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 @@
</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 style="margin-right: 0.5vw;color: #FFFFFF;font-size: 0.8vw;">设备编号</div>
<div style="color: #01A9FF;font-size: 1vw;">{{ item.deviceCode }}</div>
</div>
<div style="height: 15.5vh;width: 100%;display: flex;justify-content: center;align-items: center;">
<div v-if="item.imgUrl" class="device-img">
......@@ -254,11 +254,13 @@
</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 style="margin-right: 0.5vw;color: #FFFFFF;font-size: 0.8vw;">设备编号</div>
<div style="color: #01A9FF;font-size: 1vw;">{{ item.deviceCode }}</div>
</div>
<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/>
</div>
</div>
......@@ -376,44 +378,17 @@
inInfo.set('inqu_status-0-date',this.dataPicker)
IPLAT.EiCommunicator.send('HGSB010', 'queryBySbStatus', inInfo, {
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 = []
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.querySbNo();
......@@ -447,84 +422,15 @@
if(res.extAttr.result.length){
const dataList = res.extAttr.result;
_this.querySbYesList = dataList.map((item, index) => {
const getChartOptionByIndex = (index) => {
return {
title: {
left: 'left',
text: '设备作业时长/分钟',
textStyle: {
color: '#ffffff' // 设置标题字体颜色为白色
}
},
xAxis: {
type: 'category',
data: _this.querySbYesDate,
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
_this.querySbYesList = _this.queryBySbStatusList.map(item => {
let yData = [];
let d = dataList.find(val => val.name === item.deviceCode)
if(d){
yData = d.data;
}
},
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 属性的对象
return {
...item,
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:{
option: {
title: {
left: 'left',
text: '设备作业时长/分钟',
......@@ -534,7 +440,7 @@
},
xAxis: {
type: 'category',
data: dateArr,
data: _this.querySbYesDate,
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
......@@ -559,7 +465,7 @@
},
series: [
{
data: _this.onResetData(),
data: yData,
type: 'line',
smooth: true,
itemStyle: {
......@@ -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) {
......@@ -598,9 +502,14 @@
_this.querySbNoList = [];
if(res.extAttr.result.length ){
const dataList = res.extAttr.result;
_this.querySbNoList = dataList.map((item, index) => {
const getChartOptionByIndex = (index) => {
_this.querySbNoList = _this.queryBySbStatusList.map((item, index) => {
let yData = [];
let d = dataList.find(val => val.name === item.deviceCode)
if(d){
yData = d.data;
}
return {
option: {
title: {
left: 'left',
text: '设备故障时长/分钟',
......@@ -619,7 +528,6 @@
},
yAxis: {
type: 'value',
data: ['0', '0', '0', '0', '0', '0', '0'],
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
......@@ -636,7 +544,7 @@
},
series: [
{
data: dataList[index].data,
data: yData,
type: 'line',
smooth: true,
itemStyle: {
......@@ -646,91 +554,11 @@
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) {
......
src/main/webapp/HG/BI/components/hipi/001/left-manage-device.vue
......@@ -16,7 +16,7 @@
<div style="width: 50%;height: 100%">
<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/>
<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 style="width: 79%;margin-left: 3.2vw;height: 28vh;margin-top: 2vh">
<div class="content-device-img img">
......@@ -26,17 +26,41 @@
</div>
</div>
<div class="right-device img">
<div style="width: 100%;height: 30%;display: flex;margin-top: 3vh;">
<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/>
<!-- <div style="width: 100%;height: 30%;display: flex;margin-top: 3vh;">-->
<!-- <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/>-->
<!-- </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 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/>
<img :src="`${ctx}/common/img/device-img5-content.png`" class="device-img1-content img" 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-img5-content.png`" class="device-img1-content img" style="margin: 0;" alt/>
<div class="device-item">
<div class="name" style="width: 40%;">
<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>
......@@ -137,11 +161,42 @@ module.exports = {
display: flex;
justify-content: center;
align-items: center;
//background-image: url("../../../../../common/img/titleContentDevice.png");
/*background-image: url("../../../../../common/img/titleContentDevice.png");*/
}
.right-device{
width: 46%;
height: 100%;
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>
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