Skip to content

H
hg-smart
Commit c1ae1a43 by lyy
Options

设备驾驶舱

parent a5c5fee2
Showing with 291 additions and 82 deletions
src/main/webapp/HG/BI/HGBI003.jsp
......@@ -191,25 +191,27 @@
</div>
</div>
<div class="left-device device" style="margin-left: 2vw;">
<div class="device-echarts-background">
<manage-echarts :option="testOption1" :width="17" :height="24"></manage-echarts>
<div v-for="(item,index) in querySbYesList"
:key="index" class="device-echarts-background">
<manage-echarts :option="item.option" :width="17" :height="23"></manage-echarts>
</div>
<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 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="left-device device" style="margin-left: 2vw;">
<div class="device-echarts-background">
<manage-echarts :option="testOption2" :width="17" :height="24"></manage-echarts>
<div v-for="(item,index) in querySbNoList"
:key="index" class="device-echarts-background">
<manage-echarts :option="item.option" :width="17" :height="23"></manage-echarts>
</div>
<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 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>
......@@ -230,13 +232,133 @@
data() {
return {
date: new Date(),
option1: {},
optionDate1: {},
option2: {},
optionDate2: {},
option3: {},
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();
setTimeout(function() {
window.location.reload();
}, 60000);
},
methods: {
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:'关机',
deviceModel:'MZ-1250',
})
_this.queryBySbStatusList.push({
deviceName:'焊接机',
status:'关机',
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: {
left: 'left',
text: '设备作业时长/小时',
......@@ -246,7 +368,7 @@
},
xAxis: {
type: 'category',
data: ['0', '0', '0', '0', '0', '0', '0'],
data: _this.querySbYesDate,
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
......@@ -264,7 +386,7 @@
},
grid: {
top: '13%', // 图表距离容器顶部的距离
top: '17%', // 图表距离容器顶部的距离
bottom: '2%', // 图表距离容器底部的距离，为下方的文字留出空间
left: '2%',
right: '2%',
......@@ -272,7 +394,7 @@
},
series: [
{
data: [0, 0, 0, 0, 0, 0, 0],
data: dataList[index].data,
type: 'line',
smooth: true,
itemStyle: {
......@@ -284,9 +406,43 @@
}
]
};
};
// 返回包含正确 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: {
left: 'left',
text: '设备故障次数/小时',
......@@ -296,7 +452,7 @@
},
xAxis: {
type: 'category',
data: ['0', '0', '0', '0', '0', '0', '0'],
data: _this.querySbNODate,
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
......@@ -305,7 +461,7 @@
},
yAxis: {
type: 'value',
data: ['24', '24', '24', '24', '24', '24', '24'],
data: ['0', '0', '0', '0', '0', '0', '0'],
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
......@@ -322,7 +478,7 @@
},
series: [
{
data: [24, 24, 24, 24, 24, 24, 24],
data: dataList[index].data,
type: 'line',
smooth: true,
itemStyle: {
......@@ -334,88 +490,141 @@
}
]
};
};
// 返回包含正确 option 属性的对象
return {
...item,
option: getChartOptionByIndex(index) // 现在这里是一个对象，而不是字符串
};
});
}else{
_this.querySbNoList = []
_this.querySbNODate = []
}
},
factory:'',
factoryList:[],
dataPicker: '',
queryBySbStatusList:[
{
deviceName:'切割机',
status:'关机',
deviceModel:'MZ-1250',
onFail: function (err) {
console.error('request_tools----------------->错误信息', err);
}
},
{
deviceName:'切割机',
status:'关机',
deviceModel:'MZ-1250',
{async: false}
);
},
{
deviceName:'焊接机',
status:'关机',
deviceModel:'H9830',
setOption(){
this.testOption1 = {
title: {
left: 'left',
text: '设备作业时长/小时',
textStyle: {
color: '#ffffff' // 设置标题字体颜色为白色
}
],
querySbYesList:[],
querySbYesDate:[],
querySbNoList:[],
querySbNODate:[],
};
},
mounted() {
this.getYesterdayDateFormatted();
setInterval(() => {
this.date = new Date(); // 更新日期时间
}, 1000);
this.getRoleFactory();
xAxis: {
type: 'category',
data: this.querySbYesDate,
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
},
methods: {
formatTime(currentTime) {
const formattedTime =
currentTime.getFullYear() +
"-" +
(currentTime.getMonth() + 1) +
"-" +
currentTime.getDate() +
" " +
currentTime.getHours() +
":" +
currentTime.getMinutes() +
":" +
currentTime.getSeconds();
return formattedTime;
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
},
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;
grid: {
top: '17%', // 图表距离容器顶部的距离
bottom: '2%', // 图表距离容器底部的距离，为下方的文字留出空间
left: '2%',
right: '2%',
containLabel: true // 确保标签（如坐标轴标签）在网格内
},
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)
series: [
{
data: [0, 0, 0, 0, 0, 0, 0],
type: 'line',
smooth: true,
itemStyle: {
color: '#01b9ff'
},
onFail: function (err) {
console.error('request_tools----------------->错误信息', err);
areaStyle: {
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:{
lineOption1() {
// 这里我们不需要再次调用 setOption，因为 Vue 会自动处理绑定
return this.testOption1;
},
lineOption2() {
// 这里我们不需要再次调用 setOption，因为 Vue 会自动处理绑定
return this.testOption2;
},
currentTime() {
return this.formatTime(this.date);
},
......
src/main/webapp/HG/BI/components/hipi/001/left-manage-device.vue
......@@ -20,7 +20,7 @@
</div>
<div style="width: 79%;margin-left: 3.2vw;height: 28vh;margin-top: 2vh">
<div class="content-device-img img">
<div class="title-content-device img">成库库 1283</div>
<div class="title-content-device img">成品库</div>
</div>
<img src="../../hggp/common/img/architectureDiagram.png" style="width: 100%;height: 100%" alt/>
</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