Skip to content

H
hp-smart
Commit a253ba5d by lyy
Options

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

parent 7239b68d
Showing with 66 additions and 25 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/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>
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