Skip to content

H
hg-smart
Commit 13917c5a by liuyang
Options

Merge branch 'dev-ly' of http://git.pseer.com:8800/platform/hg-smart into dev-ly

parents fdef4a1e c97cf03d
Showing with 310 additions and 86 deletions
src/main/webapp/HG/BI/HGBI003.jsp
...@@ -174,8 +174,11 @@ ...@@ -174,8 +174,11 @@
<div class="device-title " style="padding-top: 0.2vh;margin-left: 2vw;display: flex"> <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 class="device-span" style="width: 50%">{{ item.deviceName }}</div>
<div style="display: flex;width: 50%"> <div style="display: flex;width: 50%">
<div class="openOn-span" style="margin-left: 0.5vw;margin-right: 0.5vw">设备{{ item.status }}</div> <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>
<img src="${ctx}/common/img/powerOn.png" style="width: 1.5vw;height: 3vh" v-if="item.status != '关机' " alt/> <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/> <img src="${ctx}/common/img/powerDown.png" style="width: 1.5vw;height: 3vh" v-else alt/>
</div> </div>
</div> </div>
...@@ -191,25 +194,27 @@ ...@@ -191,25 +194,27 @@
</div> </div>
</div> </div>
<div class="left-device device" style="margin-left: 2vw;"> <div class="left-device device" style="margin-left: 2vw;">
<div class="device-echarts-background"> <div v-for="(item,index) in querySbYesList"
<manage-echarts :option="testOption1" :width="17" :height="24"></manage-echarts> :key="index" class="device-echarts-background">
<manage-echarts :option="item.option" :width="17" :height="23"></manage-echarts>
</div> </div>
<div class="device-echarts-background"> <div class="device-echarts-background">
<manage-echarts :option="testOption1" :width="17" :height="24"></manage-echarts> <manage-echarts :option="lineOption1" :width="17" :height="23"></manage-echarts>
</div> </div>
<div class="device-echarts-background"> <div class="device-echarts-background">
<manage-echarts :option="testOption1" :width="17" :height="24"></manage-echarts> <manage-echarts :option="lineOption1" :width="17" :height="23"></manage-echarts>
</div> </div>
</div> </div>
<div class="left-device device" style="margin-left: 2vw;"> <div class="left-device device" style="margin-left: 2vw;">
<div class="device-echarts-background"> <div v-for="(item,index) in querySbNoList"
<manage-echarts :option="testOption2" :width="17" :height="24"></manage-echarts> :key="index" class="device-echarts-background">
<manage-echarts :option="item.option" :width="17" :height="23"></manage-echarts>
</div> </div>
<div class="device-echarts-background"> <div class="device-echarts-background">
<manage-echarts :option="testOption2" :width="17" :height="24"></manage-echarts> <manage-echarts :option="lineOption2" :width="17" :height="23"></manage-echarts>
</div> </div>
<div class="device-echarts-background"> <div class="device-echarts-background">
<manage-echarts :option="testOption2" :width="17" :height="24"></manage-echarts> <manage-echarts :option="lineOption2" :width="17" :height="23"></manage-echarts>
</div> </div>
</div> </div>
</div> </div>
...@@ -230,23 +235,155 @@ ...@@ -230,23 +235,155 @@
data() { data() {
return { return {
date: new Date(), date: new Date(),
option1: {}, option1: {},
optionDate1: {}, optionDate1: {},
option2: {}, option2: {},
optionDate2: {}, optionDate2: {},
option3: {}, option3: {},
optionDate3: {}, optionDate3: {},
testOption1:{ testOption1:{},
testOption2:{},
factory:'',
factoryList:[],
dataPicker: '',
queryBySbStatusList:[],
querySbYesList:[],
querySbYesDate:[],
querySbNoList:[],
querySbNODate:[],
};
},
mounted() {
this.getYesterdayDateFormatted();
setInterval(() => {
this.date = new Date(); // 更新日期时间
}, 1000);
this.getRoleFactory();
this.queryBySbStatus();
this.querySbYes();
this.querySbNo();
this.setOption();
this.setOption2();
// var self = this;
// setTimeout(function() {
// self.init();
// }, 60000);
setTimeout(function() {
window.location.reload();
}, 60000);
},
methods: {
// init(){
// console.log(1)
// this.getYesterdayDateFormatted();
// this.getRoleFactory();
// this.queryBySbStatus();
// this.querySbYes();
// this.querySbNo();
// },
formatTime(currentTime) {
const formattedTime =
currentTime.getFullYear() +
"-" +
(currentTime.getMonth() + 1) +
"-" +
currentTime.getDate() +
" " +
currentTime.getHours() +
":" +
currentTime.getMinutes() +
":" +
currentTime.getSeconds();
return formattedTime;
},
getYesterdayDateFormatted() {
const today = new Date();
today.setDate(today.getDate() - 1);
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1
const day = String(today.getDate()).padStart(2, '0');
const formattedDate = year+month+day;
this.dataPicker = formattedDate;
},
getRoleFactory(){
let _this = this;
var inInfo = new EiInfo();
IPLAT.EiCommunicator.send('HGSC007', 'getByRoleFactory', inInfo, {
onSuccess: function (res) {
_this.factoryList = res.extAttr.result
_this.factory = res.extAttr.result[0].factoryCode
console.log('_this.factoryList',_this.factoryList)
console.log('factory',_this.factory)
},
onFail: function (err) {
console.error('request_tools----------------->错误信息', err);
}
},
{async: false}
);
},
handledataPicker(){
this.queryBySbStatus();
this.querySbYes();
this.querySbNo();
},
queryBySbStatus(){
let _this = this;
var inInfo = new EiInfo();
inInfo.set('inqu_status-0-factoryCode',this.factory)
inInfo.set('inqu_status-0-date',this.dataPicker)
IPLAT.EiCommunicator.send('HGSB010', 'queryBySbStatus', inInfo, {
onSuccess: function (res) {
console.log('queryBySbStatus',res)
if(undefined != res.extAttr.result){
_this.queryBySbStatusList = res.extAttr.result;
}
_this.queryBySbStatusList.push({
deviceName:'切割机',
status:'3',
deviceModel:'MZ-1250',
})
_this.queryBySbStatusList.push({
deviceName:'焊接机',
status:'3',
deviceModel:'H9830',
})
},
onFail: function (err) {
console.error('request_tools----------------->错误信息', err);
}
},
{async: false}
);
},
querySbYes(){
let _this = this;
var inInfo = new EiInfo();
inInfo.set('inqu_status-0-factoryCode',this.factory)
inInfo.set('inqu_status-0-date',this.dataPicker)
IPLAT.EiCommunicator.send('HGSB010', 'querySbYes', inInfo, {
onSuccess: function (res) {
console.log('querySbYes',res)
if(undefined != res.extAttr.result[0]){
const dataList = res.extAttr.result;
_this.querySbYesDate = res.extAttr.date;
_this.querySbYesList = dataList.map((item, index) => {
const getChartOptionByIndex = (index) => {
return {
title: { title: {
left: 'left', left: 'left',
text: '设备作业时长/小时', text: '设备作业时长/分钟',
textStyle: { textStyle: {
color: '#ffffff' // 设置标题字体颜色为白色 color: '#ffffff' // 设置标题字体颜色为白色
} }
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['0', '0', '0', '0', '0', '0', '0'], data: _this.querySbYesDate,
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色 color: '#ffffff' // 设置y轴标签字体颜色为白色
...@@ -264,7 +401,7 @@ ...@@ -264,7 +401,7 @@
}, },
grid: { grid: {
top: '13%', // 图表距离容器顶部的距离 top: '17%', // 图表距离容器顶部的距离
bottom: '2%', // 图表距离容器底部的距离，为下方的文字留出空间 bottom: '2%', // 图表距离容器底部的距离，为下方的文字留出空间
left: '2%', left: '2%',
right: '2%', right: '2%',
...@@ -272,7 +409,7 @@ ...@@ -272,7 +409,7 @@
}, },
series: [ series: [
{ {
data: [0, 0, 0, 0, 0, 0, 0], data: dataList[index].data,
type: 'line', type: 'line',
smooth: true, smooth: true,
itemStyle: { itemStyle: {
...@@ -284,19 +421,53 @@ ...@@ -284,19 +421,53 @@
} }
] ]
};
};
// 返回包含正确 option 属性的对象
return {
...item,
option: getChartOptionByIndex(index) // 现在这里是一个对象，而不是字符串
};
});
}
else {
_this.querySbYesList = []
_this.querySbYesDate = []
}
console.log('querySbYesList',_this.querySbYesList)
},
onFail: function (err) {
console.error('request_tools----------------->错误信息', err);
}
}, },
testOption2:{ {async: false}
);
},
querySbNo(){
let _this = this;
var inInfo = new EiInfo();
inInfo.set('inqu_status-0-factoryCode',this.factory)
inInfo.set('inqu_status-0-date',this.dataPicker)
IPLAT.EiCommunicator.send('HGSB010', 'querySbNo', inInfo, {
onSuccess: function (res) {
console.log('querySbNo',res)
if(undefined != res.extAttr.result[0]){
const dataList = res.extAttr.result;
_this.querySbNODate = res.extAttr.date;
_this.querySbNoList = dataList.map((item, index) => {
const getChartOptionByIndex = (index) => {
return {
title: { title: {
left: 'left', left: 'left',
text: '设备故障次数/小时', text: '设备故障次数/分钟',
textStyle: { textStyle: {
color: '#ffffff' // 设置标题字体颜色为白色 color: '#ffffff' // 设置标题字体颜色为白色
} }
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['0', '0', '0', '0', '0', '0', '0'], data: _this.querySbNODate,
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色 color: '#ffffff' // 设置y轴标签字体颜色为白色
...@@ -305,7 +476,7 @@ ...@@ -305,7 +476,7 @@
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
data: ['24', '24', '24', '24', '24', '24', '24'], data: ['0', '0', '0', '0', '0', '0', '0'],
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色 color: '#ffffff' // 设置y轴标签字体颜色为白色
...@@ -322,7 +493,7 @@ ...@@ -322,7 +493,7 @@
}, },
series: [ series: [
{ {
data: [24, 24, 24, 24, 24, 24, 24], data: dataList[index].data,
type: 'line', type: 'line',
smooth: true, smooth: true,
itemStyle: { itemStyle: {
...@@ -334,88 +505,141 @@ ...@@ -334,88 +505,141 @@
} }
] ]
};
};
// 返回包含正确 option 属性的对象
return {
...item,
option: getChartOptionByIndex(index) // 现在这里是一个对象，而不是字符串
};
});
}else{
_this.querySbNoList = []
_this.querySbNODate = []
}
}, },
factory:'', onFail: function (err) {
factoryList:[], console.error('request_tools----------------->错误信息', err);
dataPicker: '', }
queryBySbStatusList:[
{
deviceName:'切割机',
status:'关机',
deviceModel:'MZ-1250',
}, },
{ {async: false}
deviceName:'切割机', );
status:'关机',
deviceModel:'MZ-1250',
}, },
{
deviceName:'焊接机', setOption(){
status:'关机', this.testOption1 = {
deviceModel:'H9830', title: {
left: 'left',
text: '设备作业时长/分钟',
textStyle: {
color: '#ffffff' // 设置标题字体颜色为白色
} }
],
querySbYesList:[],
querySbYesDate:[],
querySbNoList:[],
querySbNODate:[],
};
}, },
mounted() { xAxis: {
this.getYesterdayDateFormatted(); type: 'category',
setInterval(() => { data: this.querySbYesDate,
this.date = new Date(); // 更新日期时间 axisLabel: {
}, 1000); textStyle: {
this.getRoleFactory(); color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
}, },
methods: { yAxis: {
formatTime(currentTime) { type: 'value',
const formattedTime = axisLabel: {
currentTime.getFullYear() + textStyle: {
"-" + color: '#ffffff' // 设置y轴标签字体颜色为白色
(currentTime.getMonth() + 1) + }
"-" + }
currentTime.getDate() +
" " +
currentTime.getHours() +
":" +
currentTime.getMinutes() +
":" +
currentTime.getSeconds();
return formattedTime;
}, },
getYesterdayDateFormatted() { grid: {
const today = new Date(); top: '17%', // 图表距离容器顶部的距离
today.setDate(today.getDate() - 1); bottom: '2%', // 图表距离容器底部的距离，为下方的文字留出空间
const year = today.getFullYear(); left: '2%',
const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1 right: '2%',
const day = String(today.getDate()).padStart(2, '0'); containLabel: true // 确保标签（如坐标轴标签）在网格内
const formattedDate = year+month+day;
this.dataPicker = formattedDate;
}, },
getRoleFactory(){ series: [
let _this = this; {
var inInfo = new EiInfo(); data: [0, 0, 0, 0, 0, 0, 0],
IPLAT.EiCommunicator.send('HGSC007', 'getByRoleFactory', inInfo, { type: 'line',
onSuccess: function (res) { smooth: true,
_this.factoryList = res.extAttr.result itemStyle: {
_this.factory = res.extAttr.result[0].factoryCode color: '#01b9ff'
console.log('_this.factoryList',_this.factoryList)
console.log('factory',_this.factory)
}, },
onFail: function (err) { areaStyle: {
console.error('request_tools----------------->错误信息', err); color: '#245085'
},
}
]
} }
}, },
{async: false} setOption2(){
); this.testOption2 ={
title: {
left: 'left',
text: '设备故障次数/分钟',
textStyle: {
color: '#ffffff' // 设置标题字体颜色为白色
}
}, },
handledataPicker(){ 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: [24, 24, 24, 24, 24, 24, 24],
type: 'line',
smooth: true,
itemStyle: {
color: '#01b9ff'
},
areaStyle: {
color: '#245085'
},
}
]
}
},
}, },
computed:{ computed:{
lineOption1() {
// 这里我们不需要再次调用 setOption，因为 Vue 会自动处理绑定
return this.testOption1;
},
lineOption2() {
// 这里我们不需要再次调用 setOption，因为 Vue 会自动处理绑定
return this.testOption2;
},
currentTime() { currentTime() {
return this.formatTime(this.date); return this.formatTime(this.date);
}, },
......
src/main/webapp/HG/BI/components/hipi/001/left-manage-device.vue
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
</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">
<div class="title-content-device img">成库库 1283</div> <div class="title-content-device img">成品库</div>
</div> </div>
<img src="../../hggp/common/img/architectureDiagram.png" style="width: 100%;height: 100%" alt/> <img src="../../hggp/common/img/architectureDiagram.png" style="width: 100%;height: 100%" 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