样式

src/pages/methaneUpgrade/index.vue

@@ -10,7 +10,7 @@
           class="bottom-part-table-cont"
           style="width: 100%,height:100%; padding-top:10px"
         >
-          <el-table :data="tableData" border style="width: 100%" height="25vh">
+          <el-table :data="tableData" border style="width: 100%" height="22vh">
             <el-table-column
               type="index"
               label="序号"
@@ -48,7 +48,7 @@
         class="bottom-part-echart"
         :title="thisCity ? thisCity.name : '全国' + statusValue1.value"
       >
-        <div style="width: 100%; height: 25vh">
+        <div style="width: 100%; height: 23vh">
           <Echart ref="echart3" :options="bottom_option" />
         </div>
       </PartWrap>
@@ -82,7 +82,7 @@
     </div>
     <Lengend class="legend-part" :colors="colors" :range="colorLabel" />
     <div class="right-part">
-      <PartWrap class="bottom-part-echart" :title="'年末累计(处)'">
+      <PartWrap class="right-part-echart" :title="'年末累计(处)'">
         <div style="width: 13vw; height: 38vh">
           <Echart
             ref="echart3"
@@ -91,7 +91,7 @@
           />
         </div>
       </PartWrap>
-      <PartWrap class="bottom-part-echart" :title="'总池容(万立方米)'">
+      <PartWrap class="right-part-echart" :title="'总池容(万立方米)'">
         <div style="width: 13vw; height: 38vh">
           <Echart
             ref="echart3"
@@ -100,7 +100,7 @@
           />
         </div>
       </PartWrap>
-      <PartWrap class="bottom-part-echart" :title="'供气户数(万户)'">
+      <PartWrap class="right-part-echart" :title="'供气户数(万户)'">
         <div style="width: 13vw; height: 38vh">
           <Echart
             ref="echart3"
@@ -109,7 +109,7 @@
           />
         </div>
       </PartWrap>
-      <PartWrap class="bottom-part-echart" :title="'装机容量(千瓦)'">
+      <PartWrap class="right-part-echart" :title="'装机容量(千瓦)'">
         <div style="width: 13vw; height: 38vh">
           <Echart
             ref="echart3"
@@ -451,11 +451,25 @@ export default {
       await this.getTableData()
       await this.getlineChartData(this.statusValue1.key)
     },
-    echartBarClick(e) {
+    async echartBarClick(e) {
       console.log(e)
       this.thisCity = this.cityConfig.find(item => {
         return item.name == e.name
       })
+      let res = await this.$api.layer.query('land_region_province', {
+        filter: ['=', 'PXZQDM', this.thisCity.code]
+      })
+      let param = res.data.features[0].properties
+      this.map.fitBounds(
+        [
+          [param.x_min, param.y_min],
+          [param.x_max, param.y_max]
+        ],
+        {
+          padding: { bottom: 500, top: 20, left: 100, right: 400 }
+        }
+      )
+      this.map.setFilter('province', ['==', 'code', this.thisCity.code])
     },
     cityChange(e) {
       if (!e) {
@@ -463,7 +477,6 @@ export default {
       }
     },
     dateChange(e) {
-      console.log(e)
       this.thisYear = e
       this.getLeftData()
       this.getTableData()
@@ -734,7 +747,7 @@ export default {
     display: flex;
     justify-content: space-between;
     position: absolute;
-    height: 30vh;
+    height: 27vh;
     bottom: 2vh;
     left: 2vh;
     z-index: 21;
@@ -765,6 +778,9 @@ export default {
     width: 28vw;
     flex-wrap: wrap;
     justify-content: space-around;
+    .right-part-echart{
+      margin-bottom: 1vh;
+    }
   }
   .status-control {
     position: absolute;