mt-fe-group/11-mes-new
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 设备管理布局

Browse Source
This commit is contained in:
lb 2022-11-09 16:49:56 +08:00
parent 96e407d531
commit 472ac0a19f
1 changed files with 48 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/views/EquipmentManager/HomePage.vue
View File

@ -77,13 +77,15 @@
<div class="row-3"> <div class="row-3">
<!-- 设备备件管理 --> <!-- 设备备件管理 -->
<techy-container :title="'设备备件管理'" :icon="equipmentOrderSVG"> <techy-container :title="'设备备件管理'" :icon="equipmentOrderSVG">
<techy-table <div class="table-wrapper">
:page="1" <techy-table
:limit="7" :page="1"
:show-index="false" :limit="7"
:table-config="sparepartsProps" :show-index="false"
:table-data="sparepartsDatalist" :table-config="sparepartsProps"
/> :table-data="sparepartsDatalist"
/>
</div>
</techy-container> </techy-container>
</div> </div>
</div> </div>
@ -292,26 +294,14 @@ export default {
sparepartsProps, sparepartsProps,
sparepartsDatalist, sparepartsDatalist,
rightSideProps, rightSideProps,
rightSideDatalist, rightSideDatalist
// refreshKey: 0 // refreshKey: 0
scale: 1
} }
}, },
computed: { computed: {
...mapGetters(['sidebar']) ...mapGetters(['sidebar'])
}, },
mounted() { mounted() {},
this.$nextTick(() => {
this.scale = this.$refs['cockpit-container-equipment'].offsetWidth / 1920
this.$refs['cockpit-container-equipment'].style.setProperty('--scale', this.scale)
this.$watch(() => this.$refs['cockpit-container-equipment'].offsetWidth, function(v, o) {
console.log('resize ... ref..')
this.scale = this.$refs['cockpit-container-equipment'].offsetWidth / 1920
this.$refs['cockpit-container-equipment'].style.setProperty('--scale', this.scale)
})
})
},
methods: { methods: {
changeFullScreen() { changeFullScreen() {
@ -342,8 +332,6 @@ export default {
.visual-container { .visual-container {
width: 100%; width: 100%;
min-width: 1280px;
/* height: calc(100vh - 128px); */
background: url('./assets/bg.png') no-repeat; background: url('./assets/bg.png') no-repeat;
background-size: cover; background-size: cover;
overflow: hidden; overflow: hidden;
@ -353,27 +341,28 @@ export default {
.techy-body { .techy-body {
height: calc(100vh - 64px); height: calc(100vh - 64px);
width: 100%; width: 100%;
/* overflow: hidden; */ padding: calc(24px * var(--beilv));
/* padding: 24px; */
padding: calc(100vw / 1920 * 24);
/* display: grid;
grid-template-columns: 3fr 1fr; */
display: flex; display: flex;
gap: calc(100vw / 1920 * 16); gap: calc(16px * var(--beilv));
} }
.tech-body__col-1 { .tech-body__col-1 {
height: calc(100% - 28px); /* height: calc(100% - 28px); */
flex: 1 3; height: 100%;
flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: calc(100vw / 1920 * 16); gap: calc(16px * var(--beilv));
width: 70%;
background-color: #aaaa;
} }
.tech-body__col-2 { .tech-body__col-2 {
flex: 1 1; width: 25%;
max-width: 25%; flex: 0;
height: calc(100% - 28px); /* height: calc(100% - 28px); */
height: 100%;
background-color: #cccc;
} }
.techy-container__inner { .techy-container__inner {
@ -388,18 +377,40 @@ export default {
flex: 1 1; flex: 1 1;
} }
.row-1,
.row-2,
.row-3 {
height: 30%;
}
.row-1 { .row-1 {
flex: 1; flex: 1;
display: flex; display: flex;
gap: calc(100vw / 1920 * 16); gap: calc(100vw / 1920 * 16);
} }
.row-2 {
flex: 0;
}
.row-3 {
flex: 0;
}
.equipment-exception { .equipment-exception {
flex: 3 1; min-width: 20%;
flex: 3;
} }
.equipment-alarm { .equipment-alarm {
flex: 2 1; min-width: 20%;
flex: 2;
}
.table-wrapper {
height: calc(100% - 3vh);
overflow: scroll;
background-color: #f003;
} }
.grid { .grid {