update 3d 的公用工程消耗布局

src/views/3DOverview/components/LeftContentOrder.vue

@@ -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));

src/views/3DOverview/components/LeftContentPublicConsume.vue

@@ -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>

src/views/3DOverview/index.vue

@@ -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">