Skip to content

H
hg-smart
Commit 0b53e264 by zhangzhen
Options

驾驶舱细节优化

parent e7526bb3
Showing with 100 additions and 217 deletions
src/main/webapp/HG/BI/HGBI003.jsp
...@@ -211,8 +211,8 @@ ...@@ -211,8 +211,8 @@
</div> </div>
<div class="device-main device-span"> <div class="device-main device-span">
<div style="display: flex;width: 100%;margin-left: 1vw;height: 3vh"> <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="margin-right: 0.5vw;color: #FFFFFF;font-size: 0.8vw;">设备编号</div>
<div style="color: #01A9FF;font-size: 1vw;">{{ item.deviceModel }}</div> <div style="color: #01A9FF;font-size: 1vw;">{{ item.deviceCode }}</div>
</div> </div>
<div style="height: 15.5vh;width: 100%;display: flex;justify-content: center;align-items: center;"> <div style="height: 15.5vh;width: 100%;display: flex;justify-content: center;align-items: center;">
<div v-if="item.imgUrl" class="device-img"> <div v-if="item.imgUrl" class="device-img">
...@@ -254,11 +254,13 @@ ...@@ -254,11 +254,13 @@
</div> </div>
<div class="device-main device-span"> <div class="device-main device-span">
<div style="display: flex;width: 100%;margin-left: 1vw;height: 3vh"> <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="margin-right: 0.5vw;color: #FFFFFF;font-size: 0.8vw;">设备编号</div>
<div style="color: #01A9FF;font-size: 1vw;">{{ item.deviceModel }}</div> <div style="color: #01A9FF;font-size: 1vw;">{{ item.deviceCode }}</div>
</div> </div>
<div style="height: 15.5vh;width: 100%;display: flex;justify-content: center;align-items: center;"> <div style="height: 15.5vh;width: 100%;display: flex;justify-content: center;align-items: center;">
<img v-if="item.imgUrl" :src="item.imgUrl" style="height: 100%;" alt=""> <div v-if="item.imgUrl" class="device-img">
<img :src="item.imgUrl" style="height: 100%;" alt="">
</div>
<img v-else src="${ctx}/common/img/avi.png" style="width: 3vw;height: 6vh;" alt/> <img v-else src="${ctx}/common/img/avi.png" style="width: 3vw;height: 6vh;" alt/>
</div> </div>
</div> </div>
...@@ -376,44 +378,17 @@ ...@@ -376,44 +378,17 @@
inInfo.set('inqu_status-0-date',this.dataPicker) inInfo.set('inqu_status-0-date',this.dataPicker)
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',
imgUrl:`${ctx}/common/img/device_01.jpg`
},
{
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 = [] _this.queryBySbStatusList = []
if(res.extAttr.result.length){ if(res.extAttr.result.length){
_this.queryBySbStatusList = res.extAttr.result; let deviceList = res.extAttr.result
deviceList.sort((a,b) => b.deviceCode.length - a.deviceCode.length );
_this.queryBySbStatusList = deviceList.map(item => {
return {
...item,
imgUrl: item.deviceCode === 'SB000001'?`${ctx}/common/img/device_01.jpg`:`${ctx}/common/img/device_02.png`
}
});
} }
let newArr = deviceList.slice(_this.queryBySbStatusList.length,deviceList.length);
_this.queryBySbStatusList.push(...newArr)
_this.querySbYes(); _this.querySbYes();
_this.querySbNo(); _this.querySbNo();
...@@ -447,84 +422,15 @@ ...@@ -447,84 +422,15 @@
if(res.extAttr.result.length){ if(res.extAttr.result.length){
const dataList = res.extAttr.result; const dataList = res.extAttr.result;
_this.querySbYesList = dataList.map((item, index) => { _this.querySbYesList = _this.queryBySbStatusList.map(item => {
const getChartOptionByIndex = (index) => { let yData = [];
return { let d = dataList.find(val => val.name === item.deviceCode)
title: { if(d){
left: 'left', yData = d.data;
text: '设备作业时长/分钟',
textStyle: {
color: '#ffffff' // 设置标题字体颜色为白色
}
},
xAxis: {
type: 'category',
data: _this.querySbYesDate,
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
} }
},
yAxis: {
type: 'value',
data: ['0', '0', '0', '0', '0', '0', '0'],
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
},
grid: {
top: '17%', // 图表距离容器顶部的距离
bottom: '2%', // 图表距离容器底部的距离，为下方的文字留出空间
left: '2%',
right: '2%',
containLabel: true // 确保标签（如坐标轴标签）在网格内
},
series: [
{
data: dataList[index].data,
type: 'line',
smooth: true,
itemStyle: {
color: '#01b9ff'
},
areaStyle: {
color: '#245085'
},
}
]
};
};
// 返回包含正确 option 属性的对象 // 返回包含正确 option 属性的对象
return { return {
...item, option: {
option: getChartOptionByIndex(index) // 现在这里是一个对象，而不是字符串
};
});
}
let str = ''
let dateArr = [];
if(_this.querySbYesDate.length){
str = dayjs().format('YYYY') + _this.querySbYesDate[_this.querySbYesDate.length-1];
dateArr.unshift(_this.querySbYesDate[_this.querySbYesDate.length-1])
for (let i = 0; i < 6; i++){
dateArr.unshift(dayjs(str).subtract(i+1,'day').format('MMDD'));
}
}else{
for (let i = 0; i < 7; i++){
dateArr.unshift(dayjs(_this.dataPicker).subtract(i,'day').format('MMDD'));
}
}
let list = []
for (let i = 0; i < 5; i++) {
list.push( {
option:{
title: { title: {
left: 'left', left: 'left',
text: '设备作业时长/分钟', text: '设备作业时长/分钟',
...@@ -534,7 +440,7 @@ ...@@ -534,7 +440,7 @@
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: dateArr, data: _this.querySbYesDate,
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色 color: '#ffffff' // 设置y轴标签字体颜色为白色
...@@ -559,7 +465,7 @@ ...@@ -559,7 +465,7 @@
}, },
series: [ series: [
{ {
data: _this.onResetData(), data: yData,
type: 'line', type: 'line',
smooth: true, smooth: true,
itemStyle: { itemStyle: {
...@@ -572,12 +478,10 @@ ...@@ -572,12 +478,10 @@
] ]
} }
}) };
});
} }
let newArr = list.slice(_this.querySbYesList.length,list.length);
_this.querySbYesList.push(...newArr)
console.log(_this.querySbYesList,999998888)
}, },
onFail: function (err) { onFail: function (err) {
...@@ -598,9 +502,14 @@ ...@@ -598,9 +502,14 @@
_this.querySbNoList = []; _this.querySbNoList = [];
if(res.extAttr.result.length ){ if(res.extAttr.result.length ){
const dataList = res.extAttr.result; const dataList = res.extAttr.result;
_this.querySbNoList = dataList.map((item, index) => { _this.querySbNoList = _this.queryBySbStatusList.map((item, index) => {
const getChartOptionByIndex = (index) => { let yData = [];
let d = dataList.find(val => val.name === item.deviceCode)
if(d){
yData = d.data;
}
return { return {
option: {
title: { title: {
left: 'left', left: 'left',
text: '设备故障时长/分钟', text: '设备故障时长/分钟',
...@@ -619,7 +528,6 @@ ...@@ -619,7 +528,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轴标签字体颜色为白色
...@@ -636,7 +544,7 @@ ...@@ -636,7 +544,7 @@
}, },
series: [ series: [
{ {
data: dataList[index].data, data: yData,
type: 'line', type: 'line',
smooth: true, smooth: true,
itemStyle: { itemStyle: {
...@@ -646,91 +554,11 @@ ...@@ -646,91 +554,11 @@
color: '#245085' color: '#245085'
}, },
} }
] ]
}; }
};
// 返回包含正确 option 属性的对象
return {
...item,
option: getChartOptionByIndex(index) // 现在这里是一个对象，而不是字符串
}; };
}); });
} }
let str = ''
let dateArr = [];
if( _this.querySbNODate.length){
str = dayjs().format('YYYY') + _this.querySbNODate[ _this.querySbNODate.length-1];
dateArr.unshift( _this.querySbNODate[ _this.querySbNODate.length-1])
for (let i = 0; i < 6; i++){
dateArr.unshift(dayjs(str).subtract(i+1,'day').format('MMDD'));
}
}else{
for (let i = 0; i < 7; i++){
console.log(dayjs(_this.dataPicker).subtract(i,'day').format('MMDD'),"2sdadasdas")
dateArr.unshift(dayjs(_this.dataPicker).subtract(i,'day').format('MMDD'));
}
}
let list = []
for (let i = 0; i < 5; i++) {
list.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,list.length);
_this.querySbNoList.push(...newArr)
console.log(_this.querySbNoList,77776666)
}, },
onFail: function (err) { onFail: function (err) {
......
src/main/webapp/HG/BI/components/hipi/001/left-manage-device.vue
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<div style="width: 50%;height: 100%"> <div style="width: 50%;height: 100%">
<div class="content-content-img device-img1" style="width: 79%;margin-left: 3.2vw;"> <div class="content-content-img device-img1" style="width: 79%;margin-left: 3.2vw;">
<img :src="`${ctx}/common/img/device-img3-content.png`" class="device-img1-content img" alt/> <img :src="`${ctx}/common/img/device-img3-content.png`" class="device-img1-content img" alt/>
<div class="content-content-title" style="justify-content: flex-start;margin-top: 2.8vh;padding-left: 1.5vw">组立机</div> <div class="content-content-title" style="justify-content: flex-start;margin-top: 2.8vh;margin-left: 0.5vw;">龙门加工中心</div>
</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">
...@@ -26,17 +26,41 @@ ...@@ -26,17 +26,41 @@
</div> </div>
</div> </div>
<div class="right-device img"> <div class="right-device img">
<div style="width: 100%;height: 30%;display: flex;margin-top: 3vh;"> <!-- <div style="width: 100%;height: 30%;display: flex;margin-top: 3vh;">-->
<div class="content-content-title" style="width: 40%;">组立机</div> <!-- <div class="content-content-title" style="width: 40%;">组立机</div>-->
<img :src="`${ctx}/common/img/device-img3-content.png`" class="device-img1-content img" style="margin: 0;" alt/> <!-- <img :src="`${ctx}/common/img/device-img3-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>-->
<!-- <img :src="`${ctx}/common/img/device-img4-content.png`" class="device-img1-content img" style="margin: 0;" alt/>-->
<!-- </div>-->
<div class="device-item">
<div class="name" style="width: 40%;">
<span class="text-1">数控平面钻床</span>
<span class="text-2">(HG004)</span>
</div> </div>
<div style="width: 100%;height: 30%;display: flex;margin-top: 2vh;"> <img :src="`${ctx}/common/img/device-img5-content.png`" class="device-img1-content img" alt/>
<div class="content-content-title" style="width: 40%;">埋弧焊机</div>
<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 class="device-item">
<div class="content-content-title" style="width: 40%;">龙门加工中心</div> <div class="name" style="width: 40%;">
<img :src="`${ctx}/common/img/device-img5-content.png`" class="device-img1-content img" style="margin: 0;" alt/> <span class="text-1">数控平面钻床</span>
<span class="text-2">(HG005)</span>
</div>
<img :src="`${ctx}/common/img/device-img5-content.png`" class="device-img1-content img" alt/>
</div>
<div class="device-item">
<div class="name" style="width: 40%;">
<span class="text-1">数控平面钻床</span>
<span class="text-2">(HG006)</span>
</div>
<img :src="`${ctx}/common/img/device-img5-content.png`" class="device-img1-content img" alt/>
</div>
<div class="device-item">
<div class="name" style="width: 40%;">
<span class="text-1">数控平面钻床</span>
<span class="text-2">(HG007)</span>
</div>
<img :src="`${ctx}/common/img/device-img5-content.png`" class="device-img1-content img" alt/>
</div> </div>
</div> </div>
</div> </div>
...@@ -137,11 +161,42 @@ module.exports = { ...@@ -137,11 +161,42 @@ module.exports = {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
//background-image: url("../../../../../common/img/titleContentDevice.png"); /*background-image: url("../../../../../common/img/titleContentDevice.png");*/
} }
.right-device{ .right-device{
width: 46%; width: 46%;
height: 100%; height: 100%;
background-image: url("../../../../../common/img/rightLongBg.png"); background-image: url("../../../../../common/img/rightLongBg.png");
} }
.device-item{
display: flex;
flex-direction: row;
/*justify-content: center;*/
align-items: center;
width: 100%;
height: 25%;
padding-left: 1%;
}
.device-item .device-img1-content{
margin: 2% 0 0 1%;
}
.device-item .name{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.device-item .name .text-1{
font-family: Adobe Heiti Std;
font-weight: normal;
font-size: 1vw;
color: #FFFFFF;
background: linear-gradient(180deg, #ACE5FF 0%, #FFFFFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.device-item .name .text-2{
font-size: 0.8vw;
color: #FFFFFF;
}
</style> </style>
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