yifeng_integration/src/components/screen-map-legeng/index.vue

<template>
  <div class="map-legeng">
    <div class="flex">
      <div
        class="item"
        :class="ifShow(item.name) + index"
        v-for="(item, index) in list"
        @click="selectQy(item.name)"
        :key="index"
      >
        <img :src="item.imgSrc" alt="" />
        <section>
          <div>
            <span class="num" v-if="item.num!=999">{{ item.num }}</span>
            <span class="units"  v-if="item.num!=999">{{ item.units }}</span>
          </div>
          <div class="name">{{ item.name }}</div>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {
          imgSrc: require('@/assets/images/map/legeng/qq.png'),
          units: '家',
          num: '16',
          name: '育种企业'
        },
        {
          imgSrc: require('@/assets/images/map/legeng/pz.png'),
          units: '家',
          num: '5',
          name: '育苗企业'
        },
        {
          imgSrc: require('@/assets/images/map/legeng/zz.png'),
          units: '家',
          num: '20',
          name: '种植企业'
        },
        {
          imgSrc: require('@/assets/images/map/legeng/sc.png'),
          units: '家',
          num: '6',
          name: '加工企业'
        },  {
          imgSrc: require('@/assets/images/map/legeng/qq.png'),
          units: '家',
          num: '999',
          name: '成果展示   园区成绩'
        },
      ],
      selectArr: []
    }
  },
  mounted () {
    // setTimeout(() => {
    //   this.setMapPoint(this.selectArr)
    // }, 1000)
  },
  methods: {
    setMapPoint (selectArr) {
      console.log(selectArr,'渲染的地图点位');
      this.$EventBus.$emit('switcMapType1', selectArr)
    },
    selectQy (name) {
      if (this.selectArr.some((item) => name === item)) {
        this.selectArr = this.selectArr.filter(item => item !== name)
      } else {
        this.selectArr = [...this.selectArr, name]
      }
      this.setMapPoint(this.selectArr)
    },
    ifShow (name) {
      if (this.selectArr.some((item) => name === item)) {
        return 'selectd'
      }
      return ''
    }
  },
  components: {},
  computed: {},
  watch: {}
}
</script>

<style lang="scss" scoped>
.flex {
  @include flex(column);
  width: 100%;
  justify-content: space-around;

  .item {
    @include flex();
    margin-top: 20px;
    img {
      width: 48px;
      height: 40px;
      margin-right: 8px;
      align-items: center;
    }

    section {
      @include flex(column);

      .name {
        color: #acbbd4;
        font-size: 14px;
        width: 73px;
      }

      .num {
        font-family: pangmenzhengdao;
        color: #ffffff;
      }

      .units {
        font-size: 16px;
        color: #869db8;
        margin-left: 5px;
      }
    }
  }
  .selectd0 {
    section {
      .num {
        color: rgba(255, 98, 67, 1);
      }

      .units {
        color: rgba(255, 98, 67, 0.74);
      }
    }
  }
  .selectd1 {
    section {
      .num {
        color: rgba(50, 204, 255, 1);
      }

      .units {
        color: rgba(50, 204, 255, 0.74);
      }
    }
  }
  .selectd2 {
    section {
      .num {
        color: rgba(253, 202, 120, 1);
      }

      .units {
        color: rgba(253, 202, 120, 0.74);
      }
    }
  }
  .selectd3 {
    section {
      .num {
        color: rgba(39, 228, 184, 1);
      }

      .units {
        color: rgba(39, 228, 184, 0.74);
      }
    }
  }
}
</style>