一图表

src/components/DateWidget/DateWidget.vue

@@ -79,8 +79,8 @@ export default {
   background: none;
   display: flex;
   align-items: center;
-  justify-content: center;
-  margin-left: 1vw;
+  // justify-content: center;
+  // margin-left: 1vw;
   height: 45px;
   // 时间选择器
   .el-date-editor {

src/components/Map/map.js

+// 在mapboxgl.Map中添加新的方法
+
+const addedMapUtil = {
+  // base map state
+  _originalMapState: null,
+  // 设置初始地图状态
+  _initMapState(state) {
+    const { center, zoom } = state;
+    if (!center || !zoom) {
+      throw new Error("missing center or zoom!");
+    }
+    this._originalMapState = {
+      zoom,
+      center,
+    };
+  },
+  // recover map
+  recover() {
+    // this.setCenter(this._originalMapState.center)
+    // this.zoomTo(this._originalMapState.zoom)
+    this.flyTo({
+      center: this._originalMapState.center,
+      zoom: this._originalMapState.zoom,
+    });
+  },
+  baseMap: null,
+  /**
+   * @description 设置基础底图
+   * @param {Object} [baseMap.sources] 底图的sources, 和mapbox style中source格式一致
+   * @param {Array} [baseMap.layers] 底图的layers, 和mapbox style中layers格式一致
+   * @param {Object} options style中其它的选项，例如加载一些图层需要特定的字体和雪碧图。 注意：修改sprites、icon、glyphs会导致强制更新，这种情况下可能会导致某些图层丢失
+   */
+  setBaseMap(baseMap, options) {
+    const { sources, layers } = baseMap;
+    // init map
+    if (!this.baseMap) {
+      this.baseMap = baseMap; // 缓存地图的source和layer
+      return;
+    }
+
+    const style = this.getStyle();
+    // set sources
+    Object.assign(style.sources, sources);
+
+    // set layers
+    const oldLayers = style.layers;
+    const firstLayer = oldLayers[0];
+    if (!firstLayer) {
+      style.layers.push(...layers);
+    } else {
+      // step1. remove old base layers
+      const layerIds = this.baseMap.layers.map((layer) => layer.id);
+      layerIds.forEach((layerId) => {
+        const index = oldLayers.findIndex((l) => l.id === layerId);
+        if (index > -1) {
+          oldLayers.splice(index, 1);
+        }
+      });
+      // step2. add new base layers to the top of old layers
+      style.layers = layers.concat(oldLayers);
+
+      // other mapbox style options. eg. glyphs and sprite
+      if (options) {
+        Object.assign(style, options);
+      }
+      this.setStyle(style);
+    }
+    this.baseMap = { sources, layers }; // 缓存地图的source和layer
+  },
+  // 获取底图的配置
+  getBaseMap() {
+    return this.baseMap;
+  },
+};
+
+export function register(proto) {
+  Object.assign(proto, addedMapUtil);
+}

src/components/PartWrap/PartWrap.vue

@@ -2,9 +2,13 @@
   <div class="part info">
     <label class="title" for="title">
       <i class="el-icon-s-flag"></i>
-      sdf
+      {{ title }}
     </label>
     <div>
+      <label class="main" for="pm" v-if="value">
+        {{ value }}
+        <!-- <label class="sub">吨</label> -->
+      </label>
       <slot></slot>
     </div>
     <div class="border border-left-top"></div>
@@ -15,7 +19,17 @@
 </template>
 
 <script>
-export default {}
+export default {
+  name: 'PartWrap',
+  props: {
+    title: {
+      type: String
+    },
+    value: {
+      type: String
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
@@ -80,14 +94,14 @@ export default {}
 .info {
   display: flex;
   flex-direction: column;
-  padding: 1.5vh 0.5vh;
+  padding: 1vh 0.5vh;
   position: relative;
   // width: 15vw;
   margin-bottom: 1vh;
   label {
     text-align: center;
-    line-height: 90px;
-    height: 90px;
+    line-height: 5vh;
+    height: 5vh;
     .sub {
       font-size: 14px;
     }
@@ -110,7 +124,7 @@ export default {}
     margin-left: 32px;
     color: @font-light-color;
     font-family: timeFont;
-    font-size: 47px;
+    font-size: 3vh;
   }
 }
 </style>

src/pages/methaneUpgrade/index.vue

 <template>
   <!-- 农村沼气转型升级 -->
   <div class="contain">
-    <DateWidget class="date-widget" />
     <!-- <PartInfo class="part-info" :param="{ title: 'adf', value: 'adf' }" /> -->
     <div v-show="false" style="width: 100%; height: 400px">
       <Echart ref="echart3" :options="echart3_option" />
     </div>
-    <div class="echartqq">
+    <div class="bottom-part">
+      <PartWrap class="bottom-part-table">
+        <div class="bottom-part-table-cont">
+          <el-table :data="tableData" border style="width: 100%" height="180">
+            <el-table-column
+              type="index"
+              label="序号"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="huodianCnt"
+              label="地区"
+              align="center"
+            ></el-table-column>
+            <!-- <el-table-column
+              prop="name"
+              label="年末累积(处)"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="name"
+              label="年末累积(处)"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="name"
+              label="年末累积(处)"
+              align="center"
+            ></el-table-column> -->
+            <el-table-column
+              prop="name"
+              label="年末累积(处)"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="name"
+              align="center"
+              label="总池容(万平方米)"
+            ></el-table-column>
+            <el-table-column
+              prop="huodianCnt"
+              align="center"
+              label="供气户数(万户)"
+            ></el-table-column>
+            <el-table-column
+              prop="pm"
+              align="center"
+              label="装机容量(千瓦)"
+            ></el-table-column>
+          </el-table>
+        </div>
+      </PartWrap>
+      <PartWrap class="bottom-part-echart">
+        <div style="width: 100%; height: 400px">
+          <Echart ref="echart3" :options="echart3_option" />
+        </div>
+      </PartWrap>
+    </div>
+    <div class="left-part">
+      <DateWidget class="date-widget" />
+      <PartWrap
+        class="left-part-item"
+        :title="'年末累积(处)'"
+        :value="21"
+      ></PartWrap>
+      <PartWrap
+        class="left-part-item"
+        :title="'年末累积(处)'"
+        :value="21"
+      ></PartWrap>
+      <PartWrap
+        class="left-part-item"
+        :title="'年末累积(处)'"
+        :value="21"
+      ></PartWrap>
       <PartWrap
-        ><div style="width: 600px; height: 400px">
-          <Echart ref="echart3" :options="echart3_option" /></div
+        class="left-part-item"
+        :title="'年末累积(处)'"
+        :value="21"
       ></PartWrap>
     </div>
-    <div>
-      <PartWrap><div style="width: 100; height: 100px">asdf</div></PartWrap>
+    <div class="right-part">
+      <PartWrap class="bottom-part-echart">
+        <div style="width: 14vw; height: 40vh">
+          <Echart ref="echart3" :options="echart_option" />
+        </div>
+      </PartWrap>
+      <PartWrap class="bottom-part-echart">
+        <div style="width: 14vw; height: 40vh">
+          <Echart ref="echart3" :options="echart_option" />
+        </div>
+      </PartWrap>
+      <PartWrap class="bottom-part-echart">
+        <div style="width: 14vw; height: 40vh">
+          <Echart ref="echart3" :options="echart_option" />
+        </div>
+      </PartWrap>
+      <PartWrap class="bottom-part-echart">
+        <div style="width: 14vw; height: 40vh">
+          <Echart ref="echart3" :options="echart_option" />
+        </div>
+      </PartWrap>
     </div>
   </div>
 </template>
@@ -27,9 +120,7 @@ export default {
   name: 'MethaneUpgrade',
   data() {
     return {
-      dateLevel: 'year',
-      curTime: '',
-      play: false,
+      thisTable: '供气户数',
       echart3_option: {
         xAxis: {
           type: 'category',
@@ -44,6 +135,38 @@ export default {
             type: 'line'
           }
         ]
+      },
+      echart_option: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01]
+        },
+        yAxis: {
+          type: 'category',
+          data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
+        },
+        series: [
+          {
+            name: '2011年',
+            type: 'bar',
+            data: [18203, 23489, 29034, 104970, 131744, 630230],
+            itemStyle: {
+              color: '#d8ee2c'
+            }
+          }
+        ]
       }
     }
   },
@@ -63,19 +186,51 @@ export default {
   width: 100%;
   height: 100%;
   position: relative;
-  .date-widget {
+  .left-part {
+    display: flex;
+    flex-direction: column;
+    height: 50vh;
+    width: 250px;
     position: absolute;
-    top: 12vh;
+    top: 11vh;
+    left: 1vw;
+    .date-widget {
+      position: absolute;
+      left: 280px;
+    }
+    .left-part-item {
+      margin-bottom: 2vh;
+    }
   }
-  // .part-info {
-  //   position: absolute;
-  //   top: 32vh;
-  // }
-  .echartqq {
+  .bottom-part {
+    width: 68vw;
+    display: flex;
+    justify-content: space-between;
     position: absolute;
-    bottom: 3vh;
-    left: 3vh;
+    height: 36vh;
+    bottom: 2vh;
+    left: 2vh;
     z-index: 21;
+    display: flex;
+    .bottom-part-table {
+      width: 40vw;
+      .bottom-part-table-cont {
+        width: 100%;
+      }
+    }
+    .bottom-part-echart {
+      margin-left: 1vw;
+      flex: 1;
+    }
+  }
+  .right-part {
+    position: absolute;
+    right: 0;
+    top: 11vh;
+    display: flex;
+    width: 30vw;
+    flex-wrap: wrap;
+    justify-content: space-around;
   }
 }
 </style>
\ No newline at end of file