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

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

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

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

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

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

@ -57,6 +57,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center;
flex-direction: column; flex-direction: column;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(26, 92, 215, 0.3)); 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%; left: 18%;
} }
.content-view { .content-view {
width: 100%; width: 50%;
height: 85%; height: 85%;
position: relative; position: relative;
background: url('../../../../../assets/cityScreen/usingBg.png') no-repeat center center; 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>
<div class="table-container"> <div class="table-container">
<div class="tableHeader"> <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: 35%">工序</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> </div>
<div class="tableBox"> <div class="tableBox">
<div class="tableTr" v-for="(item, index) in tableList" :key="index"> <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 }} {{ index + 1 }}
</div> </div>
<div class="tableTd" style="width: 30%"> <div class="tableTd" style="width: 35%">
{{ item.procedureName }} {{ item.procedureName }}
</div> </div>
<div class="tableTd" style="width: 30%"> <div class="tableTd" style="width: 30%">
@ -141,7 +141,7 @@ export default {
.tableHeader { .tableHeader {
width: 100%; width: 100%;
height: 12%; height: 20%;
background-color: #082d6e; background-color: #082d6e;
opacity: 0.8; opacity: 0.8;
display: flex; display: flex;
@ -154,10 +154,10 @@ export default {
} }
.tableTr { .tableTr {
width: 100%; width: 100%;
height: 16%; height: 32%;
// background-image: url("../../../../../assets/cityScreen/tableTr2.png"); // background-image: url("../../../../../assets/cityScreen/tableTr2.png");
// background-size: 100% 100%; // background-size: 100% 100%;
border-bottom: 1px dashed #eee; /* border-bottom: 1px dashed #eee; */
display: flex; display: flex;
cursor: pointer; cursor: pointer;
} }

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

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

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

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