update 3d 的公用工程消耗布局
This commit is contained in:
förälder
eab0a7da5a
incheckning
92126a2b6b
@ -125,67 +125,6 @@ export default {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.left-content-order {
|
||||
height: calc(100% - 3vh);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
.el-table-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-table-wrapper >>> * {
|
||||
background: transparent;
|
||||
}
|
||||
.el-table-wrapper >>> .el-table::before,
|
||||
.el-table-wrapper >>> .el-table--group::after,
|
||||
.el-table-wrapper >>> .el-table--border::after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-table-wrapper >>> .el-table {
|
||||
font-size: 8px;
|
||||
background-color: transparent;
|
||||
color: #fff9;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.el-table-wrapper >>> .el-table th.is-leaf,
|
||||
.el-table-wrapper >>> .el-table td {
|
||||
border-color: #0d1728;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-table__row--striped:hover > td,
|
||||
.el-table-wrapper >>> .el-table__row:hover > td {
|
||||
background-color: rgba(79, 114, 136, 0.29) !important;
|
||||
}
|
||||
|
||||
.el-table-wrapper >>> table {
|
||||
border: unset;
|
||||
}
|
||||
|
||||
.el-table-wrapper >>> thead {
|
||||
color: #fff;
|
||||
}
|
||||
.el-table-wrapper >>> tr {
|
||||
background: unset;
|
||||
}
|
||||
.el-table-wrapper >>> tbody td > div,
|
||||
.el-table-wrapper >>> thead th > div {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.el-table-wrapper >>> th,
|
||||
.el-table-wrapper >>> td {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-table-wrapper >>> tbody > tr:nth-child(even) {
|
||||
background: rgba(76, 97, 123, 0.2);
|
||||
}
|
||||
*/
|
||||
|
||||
.left-content-order >>> .el-progress-circle {
|
||||
position: relative;
|
||||
left: calc(24px * var(--beilv));
|
||||
|
||||
@ -1,30 +1,5 @@
|
||||
<template>
|
||||
<div class="public-consume__inner">
|
||||
<!-- <div class="water-area">
|
||||
<TechyBarChart
|
||||
:id="'water-chart'"
|
||||
key="waterchart"
|
||||
title="水"
|
||||
:x-data="['自来水', '纯水', '循环水']"
|
||||
:series-data="[8.2, 10, 6.1]"
|
||||
/>
|
||||
</div>
|
||||
<div class="elec-area">
|
||||
<TechyLineChart :id="'elec-chart'" key="elecchart" title="电" />
|
||||
</div>
|
||||
<div class="elec-gen-area">
|
||||
<TechyLineChart :id="'elec-gen-chart'" key="elecgenchart" title="发电" />
|
||||
</div>
|
||||
<div class="gas-area">
|
||||
<TechyBarChart
|
||||
:id="'gas-chart'"
|
||||
key="gaschart"
|
||||
title="气"
|
||||
:x-data="['天然气', '氧气', 'CDA']"
|
||||
:series-data="[8.2, 10, 6.1]"
|
||||
/>
|
||||
</div> -->
|
||||
|
||||
<div>
|
||||
<TechyBox class="water-consume">
|
||||
<div class="header-part">
|
||||
@ -92,25 +67,25 @@
|
||||
</TechyBox>
|
||||
</div>
|
||||
|
||||
<div style="height: 1px; flex: 1;">
|
||||
<div style="min-height: calc(110px * var(--beilv)); flex: 1;">
|
||||
<TechyBox class="dian-consume">
|
||||
<div class="header-part">
|
||||
<img src="./assets/consume/d.png" width="32" height="32" alt="dian" />
|
||||
<span>电</span>
|
||||
</div>
|
||||
<div class="content-part">
|
||||
<div style="height: 100%; flex: 1;">
|
||||
<DianChart />
|
||||
</div>
|
||||
</TechyBox>
|
||||
</div>
|
||||
|
||||
<div style="height: 1px; flex: 1;">
|
||||
<div style="min-height: calc(110px * var(--beilv)); flex: 1;">
|
||||
<TechyBox class="elec-consume">
|
||||
<div class="header-part">
|
||||
<img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
|
||||
<span>发电</span>
|
||||
</div>
|
||||
<div class="content-part">
|
||||
<div style="height: 100%; flex: 1; padding: calc(8px * var(--beilv))">
|
||||
<FadianChart />
|
||||
</div>
|
||||
</TechyBox>
|
||||
@ -138,34 +113,15 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.public-consume__inner {
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
height: calc(100% - 32px);
|
||||
width: 100%;
|
||||
/* display: grid;
|
||||
grid-template-areas:
|
||||
'water elec elec gas'
|
||||
'water elec-gen elec-gen gas'; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(8px * var(--beilv));
|
||||
}
|
||||
|
||||
.water-area {
|
||||
grid-area: water;
|
||||
}
|
||||
.gas-area {
|
||||
grid-area: gas;
|
||||
}
|
||||
.elec-area {
|
||||
grid-area: elec;
|
||||
}
|
||||
.elec-gen-area {
|
||||
grid-area: elec-gen;
|
||||
}
|
||||
|
||||
/* .elec-area,.elec-gen-area {
|
||||
max-height: calc((100% - 32px) / 2 - 16px);
|
||||
} */
|
||||
|
||||
.techy-box {
|
||||
padding: calc(16px * var(--beilv));
|
||||
display: flex;
|
||||
@ -201,17 +157,18 @@ export default {
|
||||
.content-part {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: calc(100vmin / 1920 * 18);
|
||||
font-size: calc(12px * var(--beilv));
|
||||
color: #fff9;
|
||||
height: 10px;
|
||||
flex: 1 1;
|
||||
gap: calc(100vmin / 1920 * 8);
|
||||
gap: calc(4px * var(--beilv));
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: calc(100vmin / 1920 * 28);
|
||||
height: calc(14px * var(--beilv));
|
||||
}
|
||||
|
||||
.row > .name,
|
||||
@ -227,10 +184,7 @@ export default {
|
||||
.diy-process-bar {
|
||||
margin: 0 8px;
|
||||
border-radius: 7px;
|
||||
height: calc(100vmin / 1920 * 14);
|
||||
/* margin: 0 8px;
|
||||
border-radius: 7px; */
|
||||
/* height: 8px; */
|
||||
height: calc(8px * var(--beilv));
|
||||
flex: 1 1;
|
||||
background-color: #fff3;
|
||||
overflow: hidden;
|
||||
@ -240,7 +194,7 @@ export default {
|
||||
.diy-process-bar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 7px;
|
||||
border-radius: calc(6px * var(--beilv));
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
}
|
||||
@ -254,4 +208,16 @@ export default {
|
||||
.diy-process-bar.color-3::after {
|
||||
background: linear-gradient(to right, #ff8bc3, #eb46a1);
|
||||
}
|
||||
|
||||
.dian-consume,
|
||||
.elec-consume {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dian-consume > .header-part,
|
||||
.elec-consume > .header-part {
|
||||
padding: calc(16px * var(--beilv));
|
||||
margin: 0;
|
||||
margin-left: calc(16px * var(--beilv));
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
<div class="upper-part">
|
||||
<div class="techy-body-part__left">
|
||||
<div class="order">
|
||||
<techy-container title="订单完成情况" icon="default">
|
||||
<LeftContentOrder />
|
||||
<techy-container title="订单完成情况" icon="default" style="display: flex; flex-direction: column;">
|
||||
<LeftContentOrder style="height: 1px; flex: 1;" />
|
||||
</techy-container>
|
||||
</div>
|
||||
<div class="public">
|
||||
|
||||
Laddar…
Referens i nytt ärende
Block a user