Skip to content

H
hp-smart
Commit a253ba5d by lyy
Options

中小企业页面设备管理驾驶舱

parent 7239b68d
Showing with 1171 additions and 153 deletions
src/main/webapp/HP/BI/HPBI003.jsp
......@@ -202,7 +202,8 @@
</div>
</div>
<div v-for="(temp,index) in queryXMinfoList"
class="page-title-project" style="margin-top: 0.8vh;height: 5vh;border: 1px solid #0097FF ;">
class="page-title-project"
style="margin-top: 0.8vh;height: 5vh;border: 1px solid #0097FF ;">
<div v-for="(item,index) in queryXMinfoArrary "
:key="index" class="project-title-font" style="opacity: 0.7;"
>
......@@ -237,7 +238,6 @@
const app = new Vue({
el: '#app',
components: {
<%--"home-page-top": "url:${ctx}/HP/BI/components/hipi/003/home-page-top.vue",--%>
"home-page-left": "url:${ctx}/HP/BI/components/hipi/003/home-page-left.vue",
"home-echarts": "url:${ctx}/HP/BI/components/hipi/003/home-echarts.vue",
},
......@@ -251,7 +251,7 @@
factory:'',
factoryList:[],
dataPicker: '',
dataPicker: '20241019',
querySplicingObject:[],
queryGroupCLnfoList:[],
queryBJInfoList:[],
......@@ -733,7 +733,13 @@
border: 1px solid #000000;
}
.project-title-font{
width: 20%;height: 100%;display: flex;font-size: 0.7vw;justify-content: center;align-items: center;color: #fff;
width: 20%;
height: 100%;
display: flex;
font-size: 0.7vw;
justify-content: center;
align-items: center;
color: #fff;
}
</style>
</body>
......
src/main/webapp/HP/BI/HPBI004.jsp
......@@ -118,41 +118,107 @@
</head>
<body>
<div>
<div id="app">
<el-container style="margin: 1.3vw 1.3vw;">
<el-header style="height: 12vh; padding: 0">
<div class="home-top-body">
<div class="top-body-main">
<div class="top-img">
<div>
<div id="app">
<el-container style="margin: 1.3vw 1.3vw;">
<el-header style="height: 12vh; padding: 0">
<div class="home-top-body">
<div class="top-body-main">
<div class="top-img">
</div>
<div class="top-title">
<div class="system-title">设备管理驾驶舱</div>
</div>
<div style="display: flex;width: 35%;justify-content: flex-end;">
</div>
</div>
<div class="top-title">
<div class="system-title">设备管理驾驶舱</div>
</div>
<div style="height: 4vh;margin-top: -20px;width: 100%;display: flex;justify-content: space-between">
<div>
<el-select v-model="factory" @change="handledataPicker">
<el-option
v-for="(item,index) in factoryList"
:key="index"
:label="item[0]"
:value="item[1]">
</el-option>
</el-select>
<el-date-picker
class="data-picker"
v-model="dataPicker"
type="date"
placeholder="选择日期"
@change="handledataPicker"
value-format="yyyyMMdd"
style="width: 11vw"
>
</el-date-picker>
</div>
<div style="display: flex;width: 35%;justify-content: flex-end;">
<div style="margin-right: 20px;width: 15vw;height: 6vh; display: flex;">
<img src="${ctx}/common/img/topTime.png" style="width: 3vw;height: 6vh;" alt/>
<div style="height:100%;display: flex;align-items: center;font-size: 1vw;color: #FFFFFF;">
{{ currentTime }}
</div>
</div>
</div>
</div>
<div style="height: 4vh;margin-top: -20px;width: 100%;display: flex;justify-content: space-between">
<div class="top-main">
红安
</div>
<div style="margin-right: 20px;width: 220px;height: 6vh; display: flex;">
<img src="${ctx}/common/img/topTime.png" style="width: 3vw;height: 6vh;" alt/>
<div style="height:100%;display: flex;align-items: center;font-size: 1vw;color: #FFFFFF;">
2024-10-16 [ 10：06 ]
</el-header>
<el-container style="margin-top: 3vh;height: 80vh;">
<el-aside style="width: 40vw;height: 80vh;">
<left-manage-device ref="leftmanagedevice" style="height: 100%"></left-manage-device>
</el-aside>
<el-main style="padding-bottom: 0;height: 80vh;overflow: hidden">
<div class="home-page-main">
<div class="left-device device">
<div v-for="(item,index) in queryBySbStatusList"
:key="index" 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%">
<div class="openOn-span" style="margin-left: 0.5vw;margin-right: 0.5vw">设备{{ item.status }}</div>
<img src="${ctx}/common/img/powerOn.png" style="width: 1.5vw;height: 3vh" v-if="item.status != '关机' " 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" style="margin-left: 2vw;">
<div v-for="(item,index) in querySbYesList"
:key="index" class="device-echarts-background">
<manage-echarts :option="item.option" :width="17" :height="24"></manage-echarts>
</div>
<div class="device-echarts-background">
<manage-echarts :option="testOption1" :width="17" :height="24"></manage-echarts>
</div>
<div class="device-echarts-background">
<manage-echarts :option="testOption1" :width="17" :height="24"></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">
<manage-echarts :option="item.option" :width="17" :height="24"></manage-echarts>
</div>
<div class="device-echarts-background">
<manage-echarts :option="testOption2" :width="17" :height="24"></manage-echarts>
</div>
<div class="device-echarts-background">
<manage-echarts :option="testOption2" :width="17" :height="24"></manage-echarts>
</div>
</div>
</div>
</div>
</div>
</el-header>
<el-container style="margin-top: 3vh;height: 80vh;">
<el-aside style="width: 40vw;height: 80vh;">
<left-manage-device style="height: 100%"></left-manage-device>
</el-aside>
<el-main style="padding-bottom: 0;height: 80vh;">
<right-manage-device></right-manage-device>
</el-main>
</el-main>
</el-container>
</el-container>
</el-container>
</div>
</div>
</div>
<script>
......@@ -162,18 +228,398 @@
el: '#app',
components: {
"left-manage-device": "url:${ctx}/HP/BI/components/hipi/004/left-manage-device.vue",
"right-manage-device": "url:${ctx}/HP/BI/components/hipi/004/right-manage-device.vue",
"manage-echarts": "url:${ctx}/HP/BI/components/hipi/004/manage-echarts.vue",
},
data() {
return {
isDarkTheme: false, // 控制主题的标志
date: '123test',
date: new Date(),
option1: {},
optionDate1: {},
option2: {},
optionDate2: {},
option3: {},
optionDate3: {},
testOption1:{
title: {
left: 'left',
text: '设备作业时长/小时',
textStyle: {
color: '#ffffff' // 设置标题字体颜色为白色
}
},
xAxis: {
type: 'category',
data: ['0', '0', '0', '0', '0', '0', '0'],
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
},
yAxis: {
type: 'value',
data: ['0', '0', '0', '0', '0', '0', '0'],
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
},
grid: {
top: '13%', // 图表距离容器顶部的距离
bottom: '2%', // 图表距离容器底部的距离，为下方的文字留出空间
left: '2%',
right: '2%',
containLabel: true // 确保标签（如坐标轴标签）在网格内
},
series: [
{
data: [0, 0, 0, 0, 0, 0, 0],
type: 'line',
smooth: true,
itemStyle: {
color: '#01b9ff'
},
areaStyle: {
color: '#245085'
},
}
]
},
testOption2:{
title: {
left: 'left',
text: '设备故障次数/小时',
textStyle: {
color: '#ffffff' // 设置标题字体颜色为白色
}
},
xAxis: {
type: 'category',
data: ['0', '0', '0', '0', '0', '0', '0'],
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
},
yAxis: {
type: 'value',
data: ['24', '24', '24', '24', '24', '24', '24'],
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
},
grid: {
top: '13%', // 图表距离容器顶部的距离
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'
},
}
]
},
factory:'',
factoryList:[],
dataPicker: '',
queryBySbStatusList:[],
querySbYesList:[],
querySbYesDate:[],
querySbNoList:[],
querySbNODate:[],
};
},
mounted() {
this.getYesterdayDateFormatted();
setInterval(() => {
this.date = new Date(); // 更新日期时间
}, 1000);
this.queryCompanyInfo();
this.queryBySbStatus();
//设备运行时长
this.querySbYes();
//设备异常时长
this.querySbNo();
},
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;
},
queryCompanyInfo(){
let _this = this;
var inInfo = new EiInfo();
IPLAT.EiCommunicator.send('HPBI003', 'queryCompanyInfo', inInfo, {
onSuccess: function (res) {
if(undefined != res.blocks.result.rows){
_this.factoryList = res.blocks.result.rows;
_this.factory = _this.factoryList[0][1]
}
},
onFail: function (err) {
console.error('request_tools----------------->错误信息', err);
}
},
{async: false}
);
},
handledataPicker(){
console.log('factory',this.factory)
this.queryBySbStatus();
//设备运行时长
this.querySbYes();
//设备异常时长
this.querySbNo();
// this.$refs.leftmanagedevice.
},
queryBySbStatus(){
let _this = this;
var inInfo = new EiInfo();
console.log('factory',this.factory)
console.log('dataPicker',this.dataPicker)
// inInfo.set('inqu_status-0-factoryCode','R24031403')
// inInfo.set('inqu_status-0-date','20241016')
inInfo.set('inqu_status-0-factoryCode',this.factory)
inInfo.set('inqu_status-0-date',this.datapicker)
IPLAT.EiCommunicator.send('HPBI003', '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:'H8760',
})
},
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('HPBI003', '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: '设备作业时长/小时',
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: '13%', // 图表距离容器顶部的距离
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) // 现在这里是一个对象，而不是字符串
};
});
}
else {
_this.querySbYesList = []
_this.querySbYesDate = []
}
console.log('querySbYesList',_this.querySbYesList)
},
onFail: function (err) {
console.error('request_tools----------------->错误信息', err);
}
},
{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('HPBI003', '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: '设备故障次数/小时',
textStyle: {
color: '#ffffff' // 设置标题字体颜色为白色
}
},
xAxis: {
type: 'category',
data: _this.querySbNODate,
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
},
yAxis: {
type: 'value',
data: ['0', '0', '0', '0', '0', '0', '0'],
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
},
grid: {
top: '13%', // 图表距离容器顶部的距离
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) // 现在这里是一个对象，而不是字符串
};
});
}else{
_this.querySbNoList = []
_this.querySbNODate = []
}
},
onFail: function (err) {
console.error('request_tools----------------->错误信息', err);
}
},
{async: false}
);
},
},
computed:{
currentTime() {
return this.formatTime(this.date);
},
}
})
</script>
<style>
......@@ -276,8 +722,8 @@
background-repeat: no-repeat;
/*margin-bottom: 2vh;*/
}
.top-main{
width: 8vw;
.el-input__inner{
width: 11vw;
height: 4vh;
background-image: url("${ctx}/common/img/select.png");
background-size: cover;
......@@ -292,6 +738,76 @@
flex-wrap: wrap;
padding-left: 1vw;
}
.home-page-main{
width: 100%;
height: 100%;
display: flex;
}
.device{
height: 100%;
}
.left-device{
width: 30%;
}
.right-device{
width: 68%;
height: 100%;
}
.device-background{
width: 100%;
height:31.1%;
background-image: url("${ctx}/common/img/productionBackground.png");
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
margin-bottom: 2vh;
}
.device-echarts-background{
width: 100%;
height:31.1%;
background-image: url("${ctx}/common/img/productionBackground.png");
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
margin-bottom: 2vh;
}
.device-background::before{
content: ""; /* 伪元素需要内容，即使它是空的 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 5vh;
background-image: url("${ctx}/common/img/productionTitle.png");
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: -1;
}
.device-span{
height: 3vh;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 1vw;
color: #FFFFFF;
}
.openOn-span{
height: 3vh;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 0.8vw;
color: #1AA6CB;
line-height: 3vh;
}
.device-title{
width: 100%;
height: 5vh;
}
.device-main{
width: 100%
}
</style>
</body>
</html>
src/main/webapp/HP/BI/components/hipi/004/left-manage-device.vue
......@@ -3,14 +3,14 @@
<div class="content-main-title">车间设备分布图</div>
<div class="content-content-title">原材料库</div>
<div style="width: 100%;display: flex">
<div class="content-content-img device-img1" style="margin-left: 3.5vw;margin-right: 3vh">
<img src="../../hpjx/common/img/device-img1-content.png" class="device-img1-content img" alt/>
<div class="content-content-title" style="justify-content: flex-start;margin-top: 2.8vh;padding-left: 1vw">型材切割机</div>
</div>
<div class="content-content-img device-img2">
<img src="../../hpjx/common/img/device-img2-content.png" class="device-img2-content img" alt/>
<div class="content-content-title" style="justify-content: flex-end;margin-top: 2.8vh;padding-right: 1vw">激光切割机</div>
</div>
<div class="content-content-img device-img1" style="margin-left: 3.5vw;margin-right: 3vh">
<img src="../../hpjx/common/img/device-img1-content.png" class="device-img1-content img" alt/>
<div class="content-content-title" style="justify-content: flex-start;margin-top: 2.8vh;padding-left: 1vw">型材切割机</div>
</div>
<div class="content-content-img device-img2">
<img src="../../hpjx/common/img/device-img2-content.png" class="device-img2-content img" alt/>
<div class="content-content-title" style="justify-content: flex-end;margin-top: 2.8vh;padding-right: 1vw">激光切割机</div>
</div>
</div>
<div style="width: 100%;height: 48vh;display: flex;margin-top: 2vh">
<div style="width: 50%;height: 100%">
......@@ -25,9 +25,20 @@
<img src="../../hpjx/common/img/architectureDiagram.png" style="width: 100%;height: 100%" alt/>
</div>
</div>
<!-- <div class="right-device img">-->
<!-- </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="../../hpjx/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="../../hpjx/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>
<img src="../../hpjx/common/img/device-img5-content.png" class="device-img1-content img" style="margin: 0;" alt/>
</div>
</div>
</div>
<!-- <select></select>-->
</div>
......@@ -36,8 +47,6 @@
module.exports = {
data(){
return {
name: '红安',
dataPicker:new Date,
};
},
}
......@@ -123,12 +132,11 @@ 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: 50%;
width: 46%;
height: 100%;
margin-top: 2vh;
background-image: url("../../../../../common/img/deviceImgRight.png");
background-image: url("../../../../../common/img/rightLongBg.png");
}
</style>
src/main/webapp/HP/BI/components/hipi/004/manage-echarts.vue
<template>
<div ref="chartContainer" :style="{ width: '100%', height: '40vh' }"></div>
<div ref="chartContainer" :style="{ width: width+'vw', height: height + 'vh' }"></div>
</template>
<script>
module.exports = {
props: {
option: Object
option: {
type: Object,
required: true,
},
height: {
type: Number,
default: 35
},
width: {
type: Number,
default: 52
}
},
data() {
return {
chart: null,
};
},
watch: {
option: {
handler(newVal) {
if (this.chart) {
this.chart.setOption(newVal);
}
},
deep: true, // 监听对象内部属性的变化
immediate: true, // 在绑定时立即执行一次监听器
},
},
mounted() {
this.initChart();
......@@ -26,7 +53,7 @@ module.exports = {
if (this.chart) {
this.chart.resize();
}
}
}
},
},
};
</script>
src/main/webapp/HP/BI/components/hipi/004/right-manage-device.vue
<template>
<div class="home-page-main">
<div class="left-device device">
<div v-for="(item,index) in 3"
:key="index" class="device-background">
<div class="device-title device-span" style="padding-top: 0.2vh;margin-left: 2vw">
激光切割机
</div>
<div class="device-main device-span">
123
</div>
</div>
</div>
<div class="right-device device">
<div v-for="(item,index) in 3"
:key="index" style="width: 100%;height: 31.2%;display: flex;margin-bottom: 1.9vh">
<div class="device-background" style="width: 49%;height:100%;margin-left: 1vw">
<div class="device-title device-span" style="padding-top: 0.2vh;margin-left: 2vw">
激光切割机
</div>
<div class="device-main device-span" >
123
</div>
</div>
<div class="device-background" style="width: 49%;height:100%;margin-left: 1vw">
<div class="device-title device-span" style="padding-top: 0.2vh;margin-left: 2vw">
激光切割机
</div>
<div class="device-main device-span">
123
</div>
</div>
</div>
</div>
</div>
</template>
<script>
module.exports = {
data(){
return {
name: '红安',
dataPicker:new Date,
};
},
}
</script>
<style scoped>
.home-page-main{
width: 100%;
height: 100%;
display: flex;
}
.device{
height: 100%;
}
.left-device{
width: 30%;
}
.right-device{
width: 68%;
height: 100%;
}
.device-background{
width: 100%;
height:31.1%;
background-image: url("../../../../../common/img/productionBackground.png");
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
margin-bottom: 2vh;
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page import="com.baosight.iplat4j.core.FrameworkInfo" %>
<%@ page import="com.baosight.iplat4j.core.ei.EiConstant" %>
<%@ page import="com.baosight.iplat4j.core.ei.EiInfo" %>
<%@ page import="com.baosight.iplat4j.core.ioc.spring.PlatApplicationContext" %>
<%@ page import="com.baosight.iplat4j.core.log.Logger" %>
<%@ page import="com.baosight.iplat4j.core.log.LoggerFactory" %>
<%@ page import="com.baosight.iplat4j.core.security.SecurityTokenFilter" %>
<%@ page import="com.baosight.iplat4j.core.service.soa.XServiceManager" %>
<%@ page import="com.baosight.iplat4j.core.util.StringUtils" %>
<%@ page import="com.baosight.iplat4j.core.web.threadlocal.UserSession" %>
<%@ page import="com.baosight.iplat4j.core.FrameworkInfo" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script type="text/javascript" src="../HP/BI/js/echarts.js"></script>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%
UserSession.web2Service(request);
String userName = UserSession.getLoginCName();
String loginName = UserSession.getLoginName();
System.out.println(userName + "---" + loginName);
if (userName == null && loginName == null) {
response.sendRedirect(request.getContextPath() + "/login.jsp");
}
.device-background::before{
content: ""; /* 伪元素需要内容，即使它是空的 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 5vh;
background-image: url("../../../../../common/img/productionTitle.png");
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: -1;
request.setAttribute("userName", userName);
request.setAttribute("loginName", loginName);
String efSecurityToken = null;
if (PlatApplicationContext.containsBean("securityTokenFilter")) {
SecurityTokenFilter securityTokenFilter = (SecurityTokenFilter) PlatApplicationContext.getBean("securityTokenFilter");
efSecurityToken = securityTokenFilter.getSecurityToken(request);
}
.device-span{
width: 100%;
height: 3vh;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 1vw;
color: #FFFFFF;
// 获取iPlatUI静态资源地址
String iPlatStaticURL = FrameworkInfo.getPlatStaticURL(request);
// 获取Context根路径，考虑到分布式部署的场景，不能直接使用WebContext
String iPlatContext = FrameworkInfo.getPlatWebContext(request);
String theme = org.apache.commons.lang.StringUtils.defaultIfEmpty(PlatApplicationContext.getProperty("theme"), "ant");
// 获取首页菜单目录初始化参数
String menuRoot = null;
try {
String projectName = PlatApplicationContext.getProperty("projectName");
String moduleName = PlatApplicationContext.getProperty("moduleName");
if (null != projectName && null != moduleName) {
EiInfo eiInfo = new EiInfo();
eiInfo.set(EiConstant.serviceId, "S_ED_21");
eiInfo.set("project", projectName.toUpperCase());
eiInfo.set("module", moduleName.toUpperCase());
eiInfo.set("key", "menuRoot");
EiInfo outInfo = XServiceManager.call(eiInfo);
if ("".equals(outInfo.get("menuRoot")) ||
" ".equals(outInfo.get("menuRoot")) ||
null == outInfo.get("menuRoot")) {
menuRoot = "root";
} else {
menuRoot = (String) outInfo.get("menuRoot");
}
.device-title{
width: 100%;
height: 5vh;
}
.device-main{
} catch (Exception e) {
final Logger logger = LoggerFactory.getLogger("index");
logger.error("无法获取首页菜单目录", e);
}
request.setAttribute("menuRoot", menuRoot);
// 获取首页APM指标刷新间隔参数(min)
String apmRefresh = PlatApplicationContext.getProperty("apmRefresh").isEmpty() ? "5" :
PlatApplicationContext.getProperty("apmRefresh");
request.setAttribute("apmRefresh", apmRefresh);
String projectCname = FrameworkInfo.getProjectCname();
String projectTypeDesc = FrameworkInfo.getProjectTypeDesc();
%>
<c:set var="ctx" value="<%=iPlatContext%>"/>
<c:set var="iPlatStaticURL" value="<%=iPlatStaticURL%>"/>
<c:set var="theme" value="<%=theme%>" scope="session"/>
<html>
<head>
<%-- <title>Title</title>--%>
<script src="${iPlatStaticURL}/kendoui/js/jquery.min.js"></script>
<script src="${iPlatStaticURL}/kendoui/js/kendo.all.min.js"></script>
<script src="${iPlatStaticURL}/kendoui/js/messages/kendo.messages.zh-CN.min.js"></script>
<script src="${iPlatStaticURL}/kendoui/js/cultures/kendo.culture.zh-CN.min.js"></script>
<script src="${iPlatStaticURL}/iplatui/js/lib/underscore.min.js"></script>
<script src="${iPlatStaticURL}/iplatui/js/lib/echarts.min.js"></script>
<script src="${iPlatStaticURL}/iplatui/js/iplat.ui.config.js"></script>
<script src="${iPlatStaticURL}/iplatui/assets/js/plugins/slick/slick.min.js"></script>
<script>
IPLATUI.CONTEXT_PATH = "${ctx}";
const taskRefeshTime = "${taskRefeshTime}";
const needRefresh = "${needRefresh}" == 'true';
</script>
<script src="${iPlatStaticURL}/iplatui/assets/js/iplat.ui.bootstrap.min.js"></script>
<script src="${iPlatStaticURL}/iplatui/js/iplat.ui.min.js"></script>
<script src="${ctx}/common/js/vue-2.6.10.js"></script>
<script src="${ctx}/common/js/httpVueLoader.js"></script>
<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>
</head>
<body>
<div>
<div>
<div id="app">
<el-container style="margin: 1.3vw 1.3vw;">
<el-header style="height: 12vh; padding: 0">
<div class="home-top-body">
<div class="top-body-main">
<div class="top-img">
</div>
<div class="top-title">
<div class="system-title">设备管理驾驶舱</div>
</div>
<div style="display: flex;width: 35%;justify-content: flex-end;">
</div>
</div>
</div>
<div style="height: 4vh;margin-top: -20px;width: 100%;display: flex;justify-content: space-between">
<div>
<el-select v-model="factory" @change="handledataPicker">
<el-option
v-for="(item,index) in factoryList"
:key="index"
:label="item[0]"
:value="item[1]">
</el-option>
</el-select>
<el-date-picker
class="data-picker"
v-model="dataPicker"
type="date"
placeholder="选择日期"
@change="handledataPicker"
value-format="yyyyMMdd"
style="width: 11vw"
>
</el-date-picker>
</div>
<div style="margin-right: 20px;width: 15vw;height: 6vh; display: flex;">
<img src="${ctx}/common/img/topTime.png" style="width: 3vw;height: 6vh;" alt/>
<div style="height:100%;display: flex;align-items: center;font-size: 1vw;color: #FFFFFF;">
{{ currentTime }}
</div>
</div>
</div>
</el-header>
<el-container style="margin-top: 3vh;height: 80vh;">
<el-aside style="width: 40vw;height: 80vh;">
<left-manage-device style="height: 100%"></left-manage-device>
</el-aside>
<el-main style="padding-bottom: 0;height: 80vh;">
<div class="home-page-main">
<div class="left-device device">
<div v-for="(item,index) in 3"
:key="index" class="device-background">
<div class="device-title " style="padding-top: 0.2vh;margin-left: 2vw;display: flex">
<div class="device-span" style="width: 50%">激光切割机</div>
<div style="display: flex;width: 50%">
<div class="openOn-span" style="margin-left: 0.5vw;margin-right: 0.5vw">设备开机</div>
<img src="${ctx}/common/img/powerOn.png" style="width: 1.5vw;height: 3vh" 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;">MZ-1250</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" style="margin-left: 2vw;">
<div v-for="(item,index) in 3"
:key="index" class="device-echarts-background">
<manage-echarts :option="lineOption" :height="31" :width="36"></manage-echarts>
</div>
</div>
<div class="left-device device" style="margin-left: 2vw;">
<div v-for="(item,index) in 3"
:key="index" class="device-echarts-background">
<manage-echarts :option="lineOption" :height="31" :width="36"></manage-echarts>
</div>
</div>
</div>
</el-main>
</el-container>
</el-container>
</div>
</div>
</div>
<script>
var ctx = "${ctx}";
Vue.use(httpVueLoader);
const app = new Vue({
el: '#app',
components: {
"left-manage-device": "url:${ctx}/HP/BI/components/hipi/004/left-manage-device.vue",
"manage-echarts": "url:${ctx}/HP/BI/components/hipi/004/manage-echarts.vue",
},
data() {
return {
date: new Date(),
option1: {},
optionDate1: {},
option2: {},
optionDate2: {},
option3: {},
optionDate3: {},
factory:'',
factoryList:[],
dataPicker: '',
queryBySbStatusList:[],
};
},
mounted() {
this.getYesterdayDateFormatted();
setInterval(() => {
this.date = new Date(); // 更新日期时间
}, 1000);
this.queryCompanyInfo();
this.queryBySbStatus();
//设备运行时长
this.querySbYes();
//设备异常时长
this.querySbNo();
},
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;
},
queryCompanyInfo(){
let _this = this;
var inInfo = new EiInfo();
IPLAT.EiCommunicator.send('HPBI003', 'queryCompanyInfo', inInfo, {
onSuccess: function (res) {
if(undefined != res.blocks.result.rows){
_this.factoryList = res.blocks.result.rows;
_this.factory = _this.factoryList[0][1]
}
},
onFail: function (err) {
console.error('request_tools----------------->错误信息', err);
}
},
{async: false}
);
},
handledataPicker(){
},
queryBySbStatus(){
let _this = this;
var inInfo = new EiInfo();
console.log('factory',this.factory)
console.log('dataPicker',this.dataPicker)
inInfo.set('inqu_status-0-factoryCode','R24031403')
inInfo.set('inqu_status-0-date','20241016')
// inInfo.set('inqu_status-0-factoryCode',this.factory)
// inInfo.set('inqu_status-0-date',this.datapicker)
IPLAT.EiCommunicator.send('HPBI003', 'queryBySbStatus', inInfo, {
onSuccess: function (res) {
console.log('queryBySbStatus',res)
if(undefined != res.extAttr.result[0]){
_this.queryBySbStatusList = res.extAttr.result[0];
}
// _this.getByProcessWtList = res.blocks.result.extAttr.processNameList
// console.log('getByProcessWtList',_this.getByProcessWtList)
// _this.getByProcessWtDate = res.blocks.result.extAttr.totalWeightList
// console.log('getByProcessWtDate',_this.getByProcessWtDate)
// }
},
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('HPBI003', 'querySbYes', inInfo, {
onSuccess: function (res) {
console.log('querySbYes',res)
// if(undefined != res.blocks.result.extAttr){
// _this.getByProcessWtList = res.blocks.result.extAttr.processNameList
// console.log('getByProcessWtList',_this.getByProcessWtList)
// _this.getByProcessWtDate = res.blocks.result.extAttr.totalWeightList
// console.log('getByProcessWtDate',_this.getByProcessWtDate)
// }
},
onFail: function (err) {
console.error('request_tools----------------->错误信息', err);
}
},
{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('HPBI003', 'querySbNo', inInfo, {
onSuccess: function (res) {
console.log('querySbNo',res)
// if(undefined != res.blocks.result.extAttr){
// _this.getByProcessWtList = res.blocks.result.extAttr.processNameList
// console.log('getByProcessWtList',_this.getByProcessWtList)
// _this.getByProcessWtDate = res.blocks.result.extAttr.totalWeightList
// console.log('getByProcessWtDate',_this.getByProcessWtDate)
// }
},
onFail: function (err) {
console.error('request_tools----------------->错误信息', err);
}
},
{async: false}
);
},
},
computed:{
currentTime() {
return this.formatTime(this.date);
},
}
})
</script>
<style>
html,body {
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
background-size: 100% 100%;
overflow: hidden;
background-image: url("${ctx}/common/img/productionCockpitBg.png");
background-size: cover;
background-repeat: repeat-y;
background-position: center;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
width: 100%;
height: 100%;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 500ms;
position: relative;
overflow: hidden;
z-index: 100;
transform-origin: left top;
}
.a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video{
margin: 0;
padding: 0;
box-sizing: border-box;
}
div{
display: block;
unicode-bidi: isolate;
}
*, :after, :before{
box-sizing: border-box;
}
*, :after, ::before{
box-sizing: border-box;
}
.home-top-body {
margin-top: -2vh;
height: 11vh;
position: relative;
overflow: hidden;
background-image: url("${ctx}/common/img/topImg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.top-body-main{
margin-top: 1vh;
display: flex;
min-height: 100%;
width: auto;
justify-content: space-between;
}
.top-img{
margin-top: 1vh;
display: flex;
width: 35vw;
margin-left: 1vw;
text-align: center;
max-height: 8vh;
}
.top-title {
max-height: 8vh;
display: flex;
}
.system-title {
margin-top: 1vh;
width: 100%;
letter-spacing: 6px;
font-family: Adobe Heiti Std;
font-weight: normal;
font-size: 1.8vw;
background: linear-gradient(-2deg, #FFFFFF 0%, #CAECFF 40.0634765625%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
display: flex;
justify-content: center;
}
.productionMangerBg-img-background{
width: 100%;
height: 46%;
background-image: url("${ctx}/common/img/productionMangerBg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
/*margin-bottom: 2vh;*/
}
.el-input__inner{
width: 11vw;
height: 4vh;
background-image: url("${ctx}/common/img/select.png");
background-size: cover;
background-repeat: repeat-y;
background-position: center;
display: flex;
align-content: center;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 1vw;
color: #FFFFFF;
flex-wrap: wrap;
padding-left: 1vw;
}
.home-page-main{
width: 100%;
height: 100%;
display: flex;
}
.device{
height: 100%;
}
.left-device{
width: 30%;
}
.right-device{
width: 68%;
height: 100%;
}
.device-background{
width: 100%;
height:31.1%;
background-image: url("${ctx}/common/img/productionBackground.png");
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
margin-bottom: 2vh;
}
.device-echarts-background{
width: 100%;
height:31.1%;
background-image: url("${ctx}/common/img/productionBackground.png");
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
margin-bottom: 2vh;
}
.device-background::before{
content: ""; /* 伪元素需要内容，即使它是空的 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 5vh;
background-image: url("${ctx}/common/img/productionTitle.png");
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: -1;
}
.device-span{
height: 3vh;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 1vw;
color: #FFFFFF;
}
.openOn-span{
height: 3vh;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 0.8vw;
color: #1AA6CB;
line-height: 3vh;
}
.device-title{
width: 100%;
height: 5vh;
}
.device-main{
width: 100%
}
</style>
</body>
</html>
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