bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

城市大屏

This commit is contained in:
bb_pan 2025-11-20 14:42:38 +08:00
parent 41472d77d8
commit adc575011b
7 changed files with 57 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/screen/cityScreen/components/countryMap/index.vue
View File

@ -363,11 +363,13 @@ export default {
background-size: 110px 32px;
}
.mapBox {
margin-top: -70px;
margin-top: -90px;
width: 100%;
height: 97%;
display: flex;
position: relative;
// 放大1.2倍
transform: scale(1.3);
#mapEcharts {
width: 100%;
height: 100%;
@ -471,7 +473,7 @@ export default {
.out-city-equip {
position: absolute;
top: 366px;
right: 95px;
right: 55px;
width: 40px;
height: 52px;
color: #fff;

4
src/views/screen/cityScreen/components/engineerUsing/index.vue
View File

@ -188,7 +188,7 @@ export default {
line-height: 38px;
}
.select-view {
width: 15%;
width: 20%;
height: 36px;
position: absolute;
top: 50%;
@ -196,7 +196,7 @@ export default {
right: 0;
}
.select-box {
width: 70%; /*设置宽度确保内容 和 下拉icon的距离*/
width: 80%; /*设置宽度确保内容 和 下拉icon的距离*/
height: 75%;
background: #113f67;
color: #ccc;

2
src/views/screen/cityScreen/components/equQuantity/index.vue
View File

@ -433,7 +433,7 @@ export default {
.item-title {
width: 100%;
// height: 30%;
padding: 6px 0 6px 10px;
padding: 2px 0 2px 10px;
background-image: url('../../../../../assets/cityScreen/equiQuantityTitle.png');
background-size: 100% 100%;
font-size: 14px;

3
src/views/screen/cityScreen/components/equUse/index.vue
View File

@ -57,6 +57,7 @@ export default {
width: 100%;
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(26, 92, 215, 0.3));
}
@ -80,7 +81,7 @@ export default {
left: 18%;
}
.content-view {
width: 100%;
width: 50%;
height: 85%;
position: relative;
background: url('../../../../../assets/cityScreen/usingBg.png') no-repeat center center;

14
src/views/screen/cityScreen/components/maintenance/index.vue
View File

@ -10,17 +10,17 @@
</div>
<div class="table-container">
<div class="tableHeader">
<div class="header" style="width: 15%">序号</div>
<div class="header" style="width: 30%">工序</div>
<div class="header" style="width: 10%">序号</div>
<div class="header" style="width: 35%">工序</div>
<div class="header" style="width: 30%">设备</div>
<div class="header" style="width: 25%">维保情况</div>
</div>
<div class="tableBox">
<div class="tableTr" v-for="(item, index) in tableList" :key="index">
<div class="tableTd" style="width: 15%">
<div class="tableTd" style="width: 10%">
{{ index + 1 }}
</div>
<div class="tableTd" style="width: 30%">
<div class="tableTd" style="width: 35%">
{{ item.procedureName }}
</div>
<div class="tableTd" style="width: 30%">
@ -141,7 +141,7 @@ export default {
.tableHeader {
width: 100%;
height: 12%;
height: 20%;
background-color: #082d6e;
opacity: 0.8;
display: flex;
@ -154,10 +154,10 @@ export default {
}
.tableTr {
width: 100%;
height: 16%;
height: 32%;
// background-image: url("../../../../../assets/cityScreen/tableTr2.png");
// background-size: 100% 100%;
border-bottom: 1px dashed #eee;
/* border-bottom: 1px dashed #eee; */
display: flex;
cursor: pointer;
}

18
src/views/screen/cityScreen/components/retire/index.vue
View File

@ -10,23 +10,23 @@
</div>
<div class="table-container">
<div class="tableHeader">
<div class="header" style="width: 15%">序号</div>
<div class="header" style="width: 10%">序号</div>
<div class="header" style="width: 30%">工序</div>
<div class="header" style="width: 30%">设备</div>
<div class="header" style="width: 25%">预警情况</div>
<div class="header" style="width: 25%">设备</div>
<div class="header" style="width: 35%">预警情况</div>
</div>
<div class="tableBox">
<div class="tableTr" v-for="(item, index) in tableList" :key="index">
<div class="tableTd" style="width: 15%">
<div class="tableTd" style="width: 10%">
{{ index + 1 }}
</div>
<div class="tableTd" style="width: 30%">
{{ item.procedureName }}
</div>
<div class="tableTd" style="width: 30%">
<div class="tableTd" style="width: 25%">
{{ item.deviceName }}
</div>
<div class="tableTd" style="width: 25%; color: #e3c54e">
<div class="tableTd" style="width: 35%; color: #e3c54e">
{{ item.situation }}
</div>
</div>
@ -139,7 +139,7 @@ export default {
.tableHeader {
width: 100%;
height: 12%;
height: 20%;
background-color: #082d6e;
opacity: 0.8;
display: flex;
@ -155,11 +155,11 @@ export default {
}
.tableTr {
width: 100%;
height: 16%;
height: 31%;
// background-image: url("../../../../../assets/cityScreen/tableTr2.png");
// background-size: 100% 100%;
// margin-bottom: 2px;
border-bottom: 1px dashed #eee;
/* border-bottom: 1px dashed #eee; */
display: flex;
cursor: pointer;
}

54
src/views/screen/cityScreen/index.vue
View File

@ -7,12 +7,16 @@
<TopIcons />
</div>
<div class="left_2">
<EquQuantity style="width: 50%" />
<EquStatus style="width: 50%" />
<EquQuantity />
</div>
<div class="left_5">
<EquStatus />
</div>
<div class="left_3">
<Maintenance style="width: 50%" />
<Retire style="width: 50%" />
<Maintenance />
</div>
<div class="left_6">
<Retire />
</div>
</div>
<div class="center_view">
@ -23,10 +27,12 @@
<TopIconsTwo />
</div>
<div class="right_2">
<EquUse style="width: 50%" />
<EquTurnover style="width: 50%" />
<EquUse />
</div>
<div class="right_3">
<EquTurnover />
</div>
<div class="right_4">
<EngineerUsing />
</div>
</div>
@ -90,46 +96,50 @@ export default {
.left_view {
display: grid;
gap: 6px;
gap: 10px;
grid-template-rows: repeat(16, 1fr);
}
.right_view {
display: grid;
gap: 6px;
gap: 10px;
grid-template-rows: repeat(16, 1fr);
}
.left_1 {
grid-row: 1 / 4;
grid-row: 1 / 2;
grid-column: 1 / 2;
}
.left_2 {
grid-row: 4 / 10;
grid-row: 2 / 6;
grid-column: 1 / 2;
}
.left_5 {
grid-row: 6 / 10;
grid-column: 1 / 2;
display: flex;
gap: 6px;
// background-color: skyblue;
}
.left_3 {
grid-row: 10 / 17;
grid-row: 10 / 13;
grid-column: 1 / 2;
}
.left_6 {
grid-row: 13 / 17;
grid-column: 1 / 2;
display: flex;
gap: 6px;
// background-color: pink;
}
.right_1 {
grid-row: 1 / 4;
grid-row: 1 / 2;
}
.right_2 {
grid-row: 4 / 10;
grid-row: 2 / 7;
display: flex;
gap: 6px;
}
.right_3 {
grid-row: 10 / 17;
grid-row: 7 / 12;
display: flex;
}
.right_4 {
grid-row: 12 / 17;
display: flex;
gap: 6px;
}
</style>