Skip to content

H
hg-smart
Commit aae00522 by zhangzhen
Options

驾驶舱细节优化

parent 798b1a29
Showing with 156 additions and 421 deletions
src/main/webapp/HG/BI/HGBI002.jsp
...@@ -211,7 +211,7 @@ ...@@ -211,7 +211,7 @@
}, },
mounted() { mounted() {
setInterval(() => { setInterval(() => {
this.date = new Date(); // 更新日期时间 this.currentTime = dayjs().format("YYYY-MM-DD HH:mm:ss")
}, 1000); }, 1000);
this.getYesterdayDateFormatted(); this.getYesterdayDateFormatted();
this.getRoleFactory(); this.getRoleFactory();
...@@ -393,22 +393,7 @@ ...@@ -393,22 +393,7 @@
] ]
} }
}, }
formatTime(currentTime) {
const formattedTime =
currentTime.getFullYear() +
"-" +
(currentTime.getMonth() + 1) +
"-" +
currentTime.getDate() +
" " +
currentTime.getHours() +
":" +
currentTime.getMinutes() +
":" +
currentTime.getSeconds();
return formattedTime;
},
}, },
computed:{ computed:{
baroption() { baroption() {
...@@ -416,10 +401,7 @@ ...@@ -416,10 +401,7 @@
}, },
lineoption() { lineoption() {
return this.option2; return this.option2;
}, }
currentTime() {
return this.formatTime(this.date);
},
} }
}) })
</script> </script>
......
src/main/webapp/HG/BI/HGBI003.jsp
...@@ -115,6 +115,15 @@ ...@@ -115,6 +115,15 @@
<link rel="stylesheet" href="${ctx}/common/css/element-ui.css"> <link rel="stylesheet" href="${ctx}/common/css/element-ui.css">
<script src="${ctx}/common/js/element-ui.js"></script> <script src="${ctx}/common/js/element-ui.js"></script>
<script src="${ctx}/common/js/echarts.min.js"></script> <script src="${ctx}/common/js/echarts.min.js"></script>
<style>
#app .el-carousel__arrow{
background-color: rgba(255, 255, 255, 0.48) !important;
}
#app .el-carousel__arrow i{
font-size: 16px;
font-weight: bold;
}
</style>
</head> </head>
<body> <body>
<div> <div>
...@@ -167,55 +176,88 @@ ...@@ -167,55 +176,88 @@
</el-aside> </el-aside>
<el-main style="padding-bottom: 0;height: 80vh;overflow: hidden"> <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" v-if="item.status == '3' || item.status == '5' ||item.status == '6'">设备关机</div>
<div class="openOn-span" style="margin-left: 0.5vw;margin-right: 0.5vw" v-else-if="item.status == '1' || item.status == '2' ||item.status == '4' ">设备开机</div>
<div class="openOn-span" style="margin-left: 0.5vw;margin-right: 0.5vw" v-else="item.status == '0'">设备异常</div>
<img src="${ctx}/common/img/powerOn.png" style="width: 1.5vw;height: 3vh" v-if="item.status == '1' || item.status == '2' ||item.status == '4' " alt/> <el-carousel height="80vh" :interval="10000">
<img src="${ctx}/common/img/powerDown.png" style="width: 1.5vw;height: 3vh" v-else alt/> <el-carousel-item >
<div class="home-page-main">
<div class="left-device device">
<div v-for="(item,index) in queryBySbStatusList"
:key="index" class="device-background" v-if="index<=2">
<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" v-if="item.status == '3' || item.status == '5' ||item.status == '6'">设备关机</div>
<div class="openOn-span" style="margin-left: 0.5vw;margin-right: 0.5vw" v-else-if="item.status == '1' || item.status == '2' ||item.status == '4' ">设备开机</div>
<div class="openOn-span" style="margin-left: 0.5vw;margin-right: 0.5vw" v-else="item.status == '0'">设备异常</div>
<img src="${ctx}/common/img/powerOn.png" style="width: 1.5vw;height: 3vh" v-if="item.status == '1' || item.status == '2' ||item.status == '4' " 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> </div>
<div class="device-main device-span"> <div class="left-device device" >
<div style="display: flex;width: 100%;margin-left: 1vw;height: 3vh"> <div v-for="(item,index) in querySbYesList" :key="index" v-if="index<=2" class="device-echarts-background">
<div style="margin-right: 0.5vw;color: #FFFFFF;font-size: 0.8vw;">设备型号</div> <manage-echarts :option="item.option" :width="17" :height="23"></manage-echarts>
<div style="color: #01A9FF;font-size: 1vw;">{{ item.deviceModel }}</div>
</div> </div>
<div style="height: 15.5vh;width: 100%;display: flex;justify-content: center;align-items: center;"> </div>
<img src="${ctx}/common/img/avi.png" style="width: 3vw;height: 6vh;" alt/> <div class="left-device device">
<div v-for="(item,index) in querySbNoList" :key="index" v-if="index<=2" class="device-echarts-background">
<manage-echarts :option="item.option" :width="17" :height="23"></manage-echarts>
</div> </div>
</div> </div>
</div> </div>
</div> </el-carousel-item>
<div class="left-device device" style="margin-left: 2vw;"> <el-carousel-item v-if="queryBySbStatusList.length > 3" >
<div v-for="(item,index) in querySbYesList" :key="index" class="device-echarts-background"> <div class="home-page-main">
<manage-echarts :option="item.option" :width="17" :height="23"></manage-echarts> <div class="left-device device">
</div> <div v-for="(item,index) in queryBySbStatusList"
<%-- <div class="device-echarts-background">--%> :key="index" v-if="index >= 3 && index<6" class="device-background">
<%-- <manage-echarts :option="lineOption1" :width="17" :height="23"></manage-echarts>--%> <div class="device-title " style="padding-top: 0.2vh;margin-left: 2vw;display: flex">
<%-- </div>--%> <div class="device-span" style="width: 50%">{{ item.deviceName }}</div>
<%-- <div class="device-echarts-background">--%> <div style="display: flex;width: 50%">
<%-- <manage-echarts :option="lineOption1" :width="17" :height="23"></manage-echarts>--%> <div class="openOn-span" style="margin-left: 0.5vw;margin-right: 0.5vw" v-if="item.status == '3' || item.status == '5' ||item.status == '6'">设备关机</div>
<%-- </div>--%> <div class="openOn-span" style="margin-left: 0.5vw;margin-right: 0.5vw" v-else-if="item.status == '1' || item.status == '2' ||item.status == '4' ">设备开机</div>
</div> <div class="openOn-span" style="margin-left: 0.5vw;margin-right: 0.5vw" v-else="item.status == '0'">设备异常</div>
<div class="left-device device" style="margin-left: 2vw;">
<div v-for="(item,index) in querySbNoList" :key="index" class="device-echarts-background"> <img src="${ctx}/common/img/powerOn.png" style="width: 1.5vw;height: 3vh" v-if="item.status == '1' || item.status == '2' ||item.status == '4' " alt/>
<manage-echarts :option="item.option" :width="17" :height="23"></manage-echarts> <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">
<div v-for="(item,index) in querySbYesList" :key="index" v-if="index >= 3 && index<6" class="device-echarts-background">
<manage-echarts :option="item.option" :width="17" :height="23"></manage-echarts>
</div>
</div>
<div class="left-device device">
<div v-for="(item,index) in querySbNoList" :key="index" v-if="index >= 3 && index<6" class="device-echarts-background">
<manage-echarts :option="item.option" :width="17" :height="23"></manage-echarts>
</div>
</div>
</div> </div>
<%-- <div class="device-echarts-background">--%> </el-carousel-item>
<%-- <manage-echarts :option="lineOption2" :width="17" :height="23"></manage-echarts>--%> </el-carousel>
<%-- </div>--%>
<%-- <div class="device-echarts-background">--%>
<%-- <manage-echarts :option="lineOption2" :width="17" :height="23"></manage-echarts>--%>
<%-- </div>--%>
</div>
</div>
</el-main> </el-main>
</el-container> </el-container>
</el-container> </el-container>
...@@ -250,9 +292,7 @@ ...@@ -250,9 +292,7 @@
querySbYesDate:[], querySbYesDate:[],
querySbNoList:[], querySbNoList:[],
querySbNODate:[], querySbNODate:[],
currentTime:dayjs().format("YYYY-MM-DD HH:mm:ss"), currentTime:dayjs().format("YYYY-MM-DD HH:mm:ss")
lineOption1:'',
lineOption2:''
}; };
}, },
mounted() { mounted() {
...@@ -263,8 +303,6 @@ ...@@ -263,8 +303,6 @@
this.getYesterdayDateFormatted(); this.getYesterdayDateFormatted();
this.getRoleFactory(); this.getRoleFactory();
this.initPage(); this.initPage();
this.setOption();
this.setOption2();
this.onSetInterval() this.onSetInterval()
}, },
methods: { methods: {
...@@ -280,8 +318,8 @@ ...@@ -280,8 +318,8 @@
}, },
initPage(){ initPage(){
this.queryBySbStatus(); this.queryBySbStatus();
this.querySbYes(); // this.querySbYes();
this.querySbNo(); // this.querySbNo();
}, },
getYesterdayDateFormatted() { getYesterdayDateFormatted() {
this.dataPicker = dayjs().format("YYYYMMDD"); this.dataPicker = dayjs().format("YYYYMMDD");
...@@ -313,30 +351,45 @@ ...@@ -313,30 +351,45 @@
IPLAT.EiCommunicator.send('HGSB010', 'queryBySbStatus', inInfo, { IPLAT.EiCommunicator.send('HGSB010', 'queryBySbStatus', inInfo, {
onSuccess: function (res) { onSuccess: function (res) {
let deviceList = [
{
deviceName:'数控龙门加工中心',
status:'3',
deviceModel:'NSP42014C',
},
{
deviceName:'数控平面钻床1号',
status:'3',
deviceModel:'PMZ2016',
},
{
deviceName:'数控平面钻床2号',
status:'3',
deviceModel:'PMZ2016',
},
{
deviceName:'数控平面钻床3号',
status:'3',
deviceModel:'PMZ2016',
},
{
deviceName:'数控平面钻床4号',
status:'3',
deviceModel:'PMZ2016',
}
]
_this.queryBySbStatusList = []
if(res.extAttr.result.length){ if(res.extAttr.result.length){
_this.queryBySbStatusList = res.extAttr.result; _this.queryBySbStatusList = res.extAttr.result;
} }
if(!res.extAttr.result.length){ let newArr = deviceList.slice(_this.queryBySbStatusList.length,5-_this.queryBySbStatusList.length);
_this.queryBySbStatusList.push({ _this.queryBySbStatusList.push(...newArr)
deviceName:'龙门加工中心', _this.querySbYes();
status:'3', _this.querySbNo();
deviceModel:'LM-899S',
})
}
if(res.extAttr.result.length <= 1){
_this.queryBySbStatusList.push({
deviceName:'切割机',
status:'3',
deviceModel:'MZ-1250',
})
_this.queryBySbStatusList.push({
deviceName:'焊接机',
status:'3',
deviceModel:'H9830',
})
}
}, },
onFail: function (err) { onFail: function (err) {
...@@ -345,6 +398,14 @@ ...@@ -345,6 +398,14 @@
{async: false} {async: false}
); );
}, },
onResetData(num = 300,n = 200){
let arr = [];
for (let i = 0; i <7 ; i++) {
let s = Number(num) + Number((Math.random()*n).toFixed(2));
arr.push(s)
}
return arr
},
querySbYes(){ querySbYes(){
console.log('querySbYes') console.log('querySbYes')
let _this = this; let _this = this;
...@@ -418,7 +479,7 @@ ...@@ -418,7 +479,7 @@
}; };
}); });
} }
if(res.extAttr.result.length <= 1){
let str = '' let str = ''
let dateArr = []; let dateArr = [];
if(_this.querySbYesDate.length){ if(_this.querySbYesDate.length){
...@@ -432,58 +493,10 @@ ...@@ -432,58 +493,10 @@
dateArr.unshift(dayjs(_this.dataPicker).subtract(i,'day').format('MMDD')); dateArr.unshift(dayjs(_this.dataPicker).subtract(i,'day').format('MMDD'));
} }
} }
_this.querySbYesList.push({
option:{
title: {
left: 'left',
text: '设备作业时长/分钟',
textStyle: {
color: '#ffffff' // 设置标题字体颜色为白色
}
},
xAxis: {
type: 'category',
data: dateArr,
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
}, let list = []
grid: { for (let i = 0; i < 5; i++) {
top: '17%', // 图表距离容器顶部的距离 list.push( {
bottom: '2%', // 图表距离容器底部的距离，为下方的文字留出空间
left: '2%',
right: '2%',
containLabel: true // 确保标签（如坐标轴标签）在网格内
},
series: [
{
data: _this.onResetData(),
type: 'line',
smooth: true,
itemStyle: {
color: '#01b9ff'
},
areaStyle: {
color: '#245085'
},
}
]
}
})
_this.querySbYesList.push({
option:{ option:{
title: { title: {
left: 'left', left: 'left',
...@@ -533,60 +546,11 @@ ...@@ -533,60 +546,11 @@
] ]
} }
}) })
if(!res.extAttr.result.length){
_this.querySbYesList.push({
option:{
title: {
left: 'left',
text: '设备作业时长/分钟',
textStyle: {
color: '#ffffff' // 设置标题字体颜色为白色
}
},
xAxis: {
type: 'category',
data: dateArr,
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: _this.onResetData(),
type: 'line',
smooth: true,
itemStyle: {
color: '#01b9ff'
},
areaStyle: {
color: '#245085'
},
}
]
}
})
}
} }
let newArr = list.slice(_this.querySbYesList.length,5-_this.querySbYesList.length);
_this.querySbYesList.push(...newArr)
console.log(_this.querySbYesList,999998888)
}, },
onFail: function (err) { onFail: function (err) {
...@@ -595,14 +559,6 @@ ...@@ -595,14 +559,6 @@
{async: false} {async: false}
); );
}, },
onResetData(num = 300,n = 200){
let arr = [];
for (let i = 0; i <7 ; i++) {
let s = Number(num) + Number((Math.random()*n).toFixed(2));
arr.push(s)
}
return arr
},
querySbNo(){ querySbNo(){
console.log('querySbNo') console.log('querySbNo')
let _this = this; let _this = this;
...@@ -676,12 +632,10 @@ ...@@ -676,12 +632,10 @@
}); });
} }
if(res.extAttr.result.length <=1){
let str = '' let str = ''
let dateArr = []; let dateArr = [];
if( _this.querySbNODate.length){ if( _this.querySbNODate.length){
str = dayjs().format('YYYY') + _this.querySbNODate[ _this.querySbNODate.length-1]; str = dayjs().format('YYYY') + _this.querySbNODate[ _this.querySbNODate.length-1];
console.log(str,"str")
dateArr.unshift( _this.querySbNODate[ _this.querySbNODate.length-1]) dateArr.unshift( _this.querySbNODate[ _this.querySbNODate.length-1])
for (let i = 0; i < 6; i++){ for (let i = 0; i < 6; i++){
dateArr.unshift(dayjs(str).subtract(i,'day').format('MMDD')); dateArr.unshift(dayjs(str).subtract(i,'day').format('MMDD'));
...@@ -692,113 +646,9 @@ ...@@ -692,113 +646,9 @@
dateArr.unshift(dayjs(_this.dataPicker).subtract(i,'day').format('MMDD')); dateArr.unshift(dayjs(_this.dataPicker).subtract(i,'day').format('MMDD'));
} }
} }
let list = []
let yData = []; for (let i = 0; i < 5; i++) {
list.push( {
_this.querySbNoList.push({
option: {
title: {
left: 'left',
text: '设备故障时长/分钟',
textStyle: {
color: '#ffffff' // 设置标题字体颜色为白色
}
},
xAxis: {
type: 'category',
data: dateArr,
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
},
grid: {
top: '15%', // 图表距离容器顶部的距离
bottom: '2%', // 图表距离容器底部的距离，为下方的文字留出空间
left: '2%',
right: '2%',
containLabel: true // 确保标签（如坐标轴标签）在网格内
},
series: [
{
data: _this.onResetData(0,100),
type: 'line',
smooth: true,
itemStyle: {
color: '#01b9ff'
},
areaStyle: {
color: '#245085'
},
}
]
}
})
_this.querySbNoList.push({
option: {
title: {
left: 'left',
text: '设备故障时长/分钟',
textStyle: {
color: '#ffffff' // 设置标题字体颜色为白色
}
},
xAxis: {
type: 'category',
data: dateArr,
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
},
grid: {
top: '15%', // 图表距离容器顶部的距离
bottom: '2%', // 图表距离容器底部的距离，为下方的文字留出空间
left: '2%',
right: '2%',
containLabel: true // 确保标签（如坐标轴标签）在网格内
},
series: [
{
data: _this.onResetData(0,100),
type: 'line',
smooth: true,
itemStyle: {
color: '#01b9ff'
},
areaStyle: {
color: '#245085'
},
}
]
}
})
if(!res.extAttr.result.length){
_this.querySbNoList.push({
option: { option: {
title: { title: {
left: 'left', left: 'left',
...@@ -849,7 +699,11 @@ ...@@ -849,7 +699,11 @@
} }
}) })
} }
}
let newArr = list.slice(_this.querySbNoList.length,5-_this.querySbNoList.length);
_this.querySbNoList.push(...newArr)
console.log(_this.querySbNoList,77776666)
}, },
onFail: function (err) { onFail: function (err) {
...@@ -857,111 +711,7 @@ ...@@ -857,111 +711,7 @@
}, },
{async: false} {async: false}
); );
}, }
setOption(){
this.lineOption1 = {
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: [350, 240, 460, 245, 467, 234, 562],
type: 'line',
smooth: true,
itemStyle: {
color: '#01b9ff'
},
areaStyle: {
color: '#245085'
},
}
]
}
},
setOption2(){
this.lineOption2 ={
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: [30, 45, 50, 23, 24, 18, 80],
type: 'line',
smooth: true,
itemStyle: {
color: '#01b9ff'
},
areaStyle: {
color: '#245085'
},
}
]
}
},
} }
}) })
</script> </script>
...@@ -1083,15 +833,18 @@ ...@@ -1083,15 +833,18 @@
} }
.home-page-main{ .home-page-main{
display: flex;
flex-direction: row;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex;
} }
.device{ .device{
display: flex;
flex: 1;
flex-direction: column;
height: 100%; height: 100%;
} margin: 0 1%;
.left-device{
width: 30%;
} }
.right-device{ .right-device{
width: 68%; width: 68%;
......
src/main/webapp/HG/BI/components/hipi/001/left-manage-device.vue
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
<img :src="`${ctx}/common/img/device-img4-content.png`" class="device-img1-content img" style="margin: 0;" alt/> <img :src="`${ctx}/common/img/device-img4-content.png`" class="device-img1-content img" style="margin: 0;" alt/>
</div> </div>
<div style="width: 100%;height: 30%;display: flex;margin-top: 2vh;"> <div style="width: 100%;height: 30%;display: flex;margin-top: 2vh;">
<div class="content-content-title" style="width: 40%;">激光焊接机</div> <div class="content-content-title" style="width: 40%;">龙门加工中心</div>
<img :src="`${ctx}/common/img/device-img5-content.png`" class="device-img1-content img" style="margin: 0;" alt/> <img :src="`${ctx}/common/img/device-img5-content.png`" class="device-img1-content img" style="margin: 0;" alt/>
</div> </div>
</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