Skip to content

H
hg-smart
Commit aae00522 by zhangzhen
Options

驾驶舱细节优化

parent 798b1a29
Showing with 128 additions and 393 deletions
src/main/webapp/HG/BI/HGBI002.jsp
......@@ -211,7 +211,7 @@
},
mounted() {
setInterval(() => {
this.date = new Date(); // 更新日期时间
this.currentTime = dayjs().format("YYYY-MM-DD HH:mm:ss")
}, 1000);
this.getYesterdayDateFormatted();
this.getRoleFactory();
......@@ -393,22 +393,7 @@
]
}
},
formatTime(currentTime) {
const formattedTime =
currentTime.getFullYear() +
"-" +
(currentTime.getMonth() + 1) +
"-" +
currentTime.getDate() +
" " +
currentTime.getHours() +
":" +
currentTime.getMinutes() +
":" +
currentTime.getSeconds();
return formattedTime;
},
}
},
computed:{
baroption() {
......@@ -416,10 +401,7 @@
},
lineoption() {
return this.option2;
},
currentTime() {
return this.formatTime(this.date);
},
}
}
})
</script>
......
src/main/webapp/HG/BI/HGBI003.jsp
......@@ -115,6 +115,15 @@
<link rel="stylesheet" href="${ctx}/common/css/element-ui.css">
<script src="${ctx}/common/js/element-ui.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>
<body>
<div>
......@@ -167,10 +176,52 @@
</el-aside>
<el-main style="padding-bottom: 0;height: 80vh;overflow: hidden">
<el-carousel height="80vh" :interval="10000">
<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 class="left-device device" >
<div v-for="(item,index) in querySbYesList" :key="index" v-if="index<=2" 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<=2" class="device-echarts-background">
<manage-echarts :option="item.option" :width="17" :height="23"></manage-echarts>
</div>
</div>
</div>
</el-carousel-item>
<el-carousel-item v-if="queryBySbStatusList.length > 3" >
<div class="home-page-main">
<div class="left-device device">
<div v-for="(item,index) in queryBySbStatusList"
:key="index" class="device-background">
:key="index" v-if="index >= 3 && index<6" 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%">
......@@ -193,29 +244,20 @@
</div>
</div>
</div>
<div class="left-device device" style="margin-left: 2vw;">
<div v-for="(item,index) in querySbYesList" :key="index" class="device-echarts-background">
<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 class="device-echarts-background">--%>
<%-- <manage-echarts :option="lineOption1" :width="17" :height="23"></manage-echarts>--%>
<%-- </div>--%>
<%-- <div class="device-echarts-background">--%>
<%-- <manage-echarts :option="lineOption1" :width="17" :height="23"></manage-echarts>--%>
<%-- </div>--%>
</div>
<div class="left-device device" style="margin-left: 2vw;">
<div v-for="(item,index) in querySbNoList" :key="index" class="device-echarts-background">
<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 class="device-echarts-background">--%>
<%-- <manage-echarts :option="lineOption2" :width="17" :height="23"></manage-echarts>--%>
<%-- </div>--%>
<%-- <div class="device-echarts-background">--%>
<%-- <manage-echarts :option="lineOption2" :width="17" :height="23"></manage-echarts>--%>
<%-- </div>--%>
</div>
</div>
</el-carousel-item>
</el-carousel>
</el-main>
</el-container>
</el-container>
......@@ -250,9 +292,7 @@
querySbYesDate:[],
querySbNoList:[],
querySbNODate:[],
currentTime:dayjs().format("YYYY-MM-DD HH:mm:ss"),
lineOption1:'',
lineOption2:''
currentTime:dayjs().format("YYYY-MM-DD HH:mm:ss")
};
},
mounted() {
......@@ -263,8 +303,6 @@
this.getYesterdayDateFormatted();
this.getRoleFactory();
this.initPage();
this.setOption();
this.setOption2();
this.onSetInterval()
},
methods: {
......@@ -280,8 +318,8 @@
},
initPage(){
this.queryBySbStatus();
this.querySbYes();
this.querySbNo();
// this.querySbYes();
// this.querySbNo();
},
getYesterdayDateFormatted() {
this.dataPicker = dayjs().format("YYYYMMDD");
......@@ -313,30 +351,45 @@
IPLAT.EiCommunicator.send('HGSB010', 'queryBySbStatus', inInfo, {
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){
_this.queryBySbStatusList = res.extAttr.result;
}
if(!res.extAttr.result.length){
_this.queryBySbStatusList.push({
deviceName:'龙门加工中心',
status:'3',
deviceModel:'LM-899S',
})
}
let newArr = deviceList.slice(_this.queryBySbStatusList.length,5-_this.queryBySbStatusList.length);
_this.queryBySbStatusList.push(...newArr)
_this.querySbYes();
_this.querySbNo();
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) {
......@@ -345,6 +398,14 @@
{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(){
console.log('querySbYes')
let _this = this;
......@@ -418,7 +479,7 @@
};
});
}
if(res.extAttr.result.length <= 1){
let str = ''
let dateArr = [];
if(_this.querySbYesDate.length){
......@@ -432,58 +493,10 @@
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轴标签字体颜色为白色
}
}
},
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'
},
}
]
}
})
_this.querySbYesList.push({
let list = []
for (let i = 0; i < 5; i++) {
list.push( {
option:{
title: {
left: 'left',
......@@ -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) {
......@@ -595,14 +559,6 @@
{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(){
console.log('querySbNo')
let _this = this;
......@@ -676,12 +632,10 @@
});
}
if(res.extAttr.result.length <=1){
let str = ''
let dateArr = [];
if( _this.querySbNODate.length){
str = dayjs().format('YYYY') + _this.querySbNODate[ _this.querySbNODate.length-1];
console.log(str,"str")
dateArr.unshift( _this.querySbNODate[ _this.querySbNODate.length-1])
for (let i = 0; i < 6; i++){
dateArr.unshift(dayjs(str).subtract(i,'day').format('MMDD'));
......@@ -692,10 +646,9 @@
dateArr.unshift(dayjs(_this.dataPicker).subtract(i,'day').format('MMDD'));
}
}
let yData = [];
_this.querySbNoList.push({
let list = []
for (let i = 0; i < 5; i++) {
list.push( {
option: {
title: {
left: 'left',
......@@ -745,111 +698,12 @@
]
}
})
_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: {
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'
},
}
let newArr = list.slice(_this.querySbNoList.length,5-_this.querySbNoList.length);
_this.querySbNoList.push(...newArr)
console.log(_this.querySbNoList,77776666)
]
}
})
}
}
},
onFail: function (err) {
......@@ -857,111 +711,7 @@
},
{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>
......@@ -1083,15 +833,18 @@
}
.home-page-main{
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
display: flex;
}
.device{
display: flex;
flex: 1;
flex-direction: column;
height: 100%;
}
.left-device{
width: 30%;
margin: 0 1%;
}
.right-device{
width: 68%;
......
src/main/webapp/HG/BI/components/hipi/001/left-manage-device.vue
......@@ -35,7 +35,7 @@
<img :src="`${ctx}/common/img/device-img4-content.png`" class="device-img1-content img" style="margin: 0;" alt/>
</div>
<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/>
</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