jiahe_device/src/views/energySourcesProvince/component/maps.vue

<template>
  <div class="box">
    <div class="num">
      <div v-for="(item, index) in numArr" :key="index">
        <div class="num-top">
          {{ item.name }}
          <img src="../../../../public/img/energySourcesProvince/maps1.png" v-if="item.status">
          <img src="../../../../public/img/energySourcesProvince/maps2.png" v-else>
        </div>
        <div class="num-bottom">
          <div class="num-bottom-div">
            <span class="num-bottom-span1" :style="{ color: item.status ? '#1BE9BB' : '#EB3939' }">{{ item.thisYear }}</span>
            <span class="num-bottom-span2" :style="{ color: item.status ? '#1BE9BB' : '#EB3939' }">{{ item.unit }}</span>
          </div>
          <div class="num-bottom-div" style="text-align: right;">

            <span class="num-bottom-span3">{{ item.lastYear }}</span>
            <span class="num-bottom-span4">上年度</span>
          </div>
        </div>
      </div>
    </div>
    <div id="mainMaps">
      <PathMap />
      <div class="model"></div>
    </div>
    <!-- <baidu-map :center="centers" :zoom="zoom"
            @ready="handler" class="map"
            v-if="refresh" :ak="ak"
            /> -->
  </div>
</template>

<script>


import { getTotalCarbonEmissions } from "@/api/energySourcesProvince/energySourcesProvince"
import PathMap from "./pathMap";
export default {
  data() {
    return {
      active: false,
      numArr: [
        {
          name: '碳排放计划量',
          status: 1,
          unit: 'kg/万元'
        },
        {
          name: '碳排放总量',
          status: 1,
          unit: 't'
        },
        {
          name: '碳减排总量',
          status: 0,
          unit: 't'
        }
      ],
    };
  },
  components: {
    PathMap
  },
  created() {
    this.getData()


    // this.$nextTick(() => {
    //   this.echartsInit()

    //   this.refresh = true
    // })

  },
  methods: {
    handler({ BMap, map }) {
      // console.log(BMap, map)
      // this.center.lng = 116.404
      // this.center.lat = 39.915
      // this.zoom = 15
    },
    getData() {
      getTotalCarbonEmissions().then(res => {
        const { jnzl, qnzl, jnjhl, qnjhl, qnjpzl, jnjpzl } = res.data.data
        this.numArr[0].thisYear = jnjhl
        this.numArr[0].lastYear = qnjhl
        jnjhl > qnjhl ? this.numArr[0].status = 0 : this.numArr[0].status = 1

        this.numArr[1].thisYear = jnzl
        this.numArr[1].lastYear = qnzl
        jnzl > qnjhl ? this.numArr[1].status = 0 : this.numArr[1].status = 1

        this.numArr[2].thisYear = jnjpzl
        this.numArr[2].lastYear = qnjpzl
        jnjpzl > qnjpzl ? this.numArr[2].status = 0 : this.numArr[2].status = 1
      })
    },
    draw({ el, BMap, map }) {
      console.log(el)
      const pixel = map.pointToOverlayPixel(new BMap.Point(116.404, 39.915))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  width: 9.94rem;
  height: 7.88rem;
  margin: 0 auto;
  box-sizing: border-box;
  z-index: -1;

  .num {
    width: 9rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    &>div {
      width: 2.92rem;
      height: 1.12rem;
      background: url("../../../../public/img/energySourcesProvince/maps.png");
      background-size: 100% 100%;
      padding: 0.24rem 0.12rem 0 0.24rem;
      box-sizing: border-box;

      &>.num-top {
        font-size: 0.16rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba($color: #fff, $alpha: 0.8);

        img {
          width: 0.2rem;
          height: 0.2rem;
          margin-left: 2px;
          vertical-align: bottom;
        }
      }

      &>.num-bottom {
        width: 96%;
        height: 0.4rem;
        // line-height: 0.4rem;
        overflow: hidden;
        margin-top: 0.1rem;
        display: flex;
        justify-content: space-between;
        .num-bottom-div {
          width: 50%;
        }
        .num-bottom-span1 {
          font-size: 0.3rem;
          font-family: Acumin-Pro-Condensed-Black-2;
          font-weight: bold;
          vertical-align: -webkit-baseline-middle;
        }

        .num-bottom-span2 {
          font-size: 0.16rem;
          font-family: Acumin-Pro-Condensed-Black-2;
          font-weight: bold;
          margin-left: 0.04rem;
        }

        .num-bottom-span3 {
          font-size: 0.16rem;
          font-family: Acumin-Pro-Condensed-Black-2;
          font-weight: bold;
          color: #149EEE;
          margin-left: 0.1rem;
        }

        .num-bottom-span4 {
          font-size: 0.14rem;
          font-family: Acumin-Pro-Condensed-Black-2;
          font-weight: bold;
          color: #149EEE;
          margin-left: 0.04rem;
        }
      }
    }
  }

  #mainMaps {
    width: 900px;
    height: 620px;
    box-sizing: border-box;
    margin: 12px auto;
    border: 2px solid #044de5;
    // background: url("../../../../public/img/energySourcesProvince/maps.png");
    // background-size: 100% 100%;
    position: relative;

    .model {
      position: absolute;
      left: -0.03rem;
      bottom: -0.12rem;
      width: 9.02rem;
      height: 0.66rem;
      border-top: 0.02rem solid #044de5;
      z-index: 20;
      background: #143074;
    }
  }

}
</style>