HSW_WX/pages/subPackages/buildmap/index.vue

<template>
  <div class="buildmap">
    <van-tabs :active="active" @change="onChange">
      <van-tab title="活跃度排行"> </van-tab>
      <van-tab title="党支部地图">
        <view class="page-main">
          <div>
            <uni-search-bar
              :radius="100"
              style="
                position: absolute;
                z-index: 10000;
                width: 96vw;
                padding: 0 2vw;
              "
              placeholder="搜索党支部"
              v-model="searchName"
              @cancel="cancel"
              @confirm="searchMap"
            />
          </div>

          <liu-easy-map
            ref="liuEasyMap"
            :scale="14"
            :markerData="markerData"
            @clickMarker="markerClick"
          />
        </view>
      </van-tab>
    </van-tabs>
    <div style="position: absolute; width: 100%">
      <div class="bluebg">
        <div
          @click="showTimePicker = true"
          style="
            display: flex;
            width: 344rpx;
            display: flex;
            height: 60rpx;
            justify-content: space-around;
            line-height: 60rpx;
            color: white;
            border-radius: 32rpx;
            border: 2rpx solid rgba(255, 255, 255, 0.53);
            background: rgba(255, 255, 255, 0.2);
            margin-top: 32rpx;
            float: right;
            margin-right: 70rpx;
          "
        >
          <div>{{ week }}</div>
          <uni-icons type="bottom" size="20"></uni-icons>
        </div>
      </div>
      <div class="top3">
        <div class="top3first">
          <div
            :class="index == list.lenght ? 'top3-row' : 'top3-row top3borderbt'"
            v-for="(item, index) in list"
            :key="index"
            v-if="index == 0 || index == 1 || index == 2"
          >
            <img :src="require(`./top${index + 1}.png`)" width="40rpx" alt="" />
            <div class="depname">{{ item.branchName }}</div>
            <div class="bili">{{ item.activationRate + "%" }}</div>
          </div>
        </div>

        <div
          class="top3-1"
          style="background: white; padding: 10rpx 0; margin-top: 22rpx"
        >
          <div
            :class="index == list.lenght ? 'top3-row' : 'top3-row top3borderbt'"
            v-for="(item, index) in list"
            :key="index"
            v-if="index != 0 && index != 1 && index != 2"
          >
            <div
              style="
                height: 40rpx;
                width: 40rpx;
                text-align: center;
                line-height: 40rpx;
                color: #777777;
              "
            >
              {{ index + 1 }}
            </div>
            <div class="depname">{{ item.branchName }}</div>
            <div class="bili">{{ item.activationRate + "%" }}</div>
          </div>
        </div>
      </div>
    </div>

    <lys-date
      ref="lysdate"
      v-if="showTimePicker"
      :type="2"
      :time="time"
      @cancleTime="showTimePicker = false"
      @submitTime="submitTime"
    />
  </div>
</template>

<script>
// import * as lys from "../../../uni_modules/lys-jsUtils.js";
// uni.$lys = lys;
import { getPartyBranchList, getActivationRanking } from "@/js_sdk/http.js";
export default {
  data() {
    return {
      showTimePicker: false,
      searchName: "",
      markerData: [],
      //展示区域点位信息
      polygons: [],
      list: [],
      week: "",
    };
  },
  onShow() {
    const date = new Date();
    console.log("第几年", date.getFullYear());

    let week =
      date.getFullYear() +
      "第" +
      this.getYearWeek(
        date.getFullYear(),
        Number(date.getMonth()) + 1,
        date.getDate()
      ) +
      "周";
    console.log(week);
    this.week = week;
    this.getActivationRanking(week);
  },
  methods: {
    async getActivationRanking(e) {
      let { data } = await getActivationRanking({ week: e });
      console.log(data);
      this.list = data;
    },
    getYearWeek(a, b, c) {
      //a为年 b为月 c为日
      /*  
         date1是当前日期  
         date2是当年第一天  
         d是当前日期是今年第多少天  
         用d + 当前年的第一天的周差距的和在除以7就是本年第几周  
     */
      var date1 = new Date(a, parseInt(b) - 1, c),
        date2 = new Date(a, 0, 1),
        d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);
      return Math.ceil((d + (date2.getDay() + 1 - 1)) / 7);
    },
    submitTime(e) {
      this.week = e;
      this.showTimePicker = false;
      console.log(e);
      this.getActivationRanking(e);
    },
    onChange(e) {
      console.log(e.detail.name);
      if (e.detail.name == 1) {
        this.getPartyBranchList();
      }
    },
    cancel() {
      this.searchName = "";
      this.getPartyBranchList();
    },
    async searchMap() {
      // changeCenter
      let { data } = await getPartyBranchList({ searchName: this.searchName });
      this.markerData = data.map((e, index, array) => {
        return {
          latitude: e.branchLat,
          longitude: e.branchLng,
          name: e.branchName,
          mapid: e.id,
          id: index,
          address: e.branchName,
          iconWidth: 32, //标记点图标宽度
          iconHeight: 32, //标记点图标高度
          calloutColor: "#798DF3", //气泡窗口 文本颜色
          calloutFontSize: 16, //气泡窗口 文本大小
          calloutBorderRadius: 6, //气泡窗口 边框圆角
          calloutPadding: 8, //气泡窗口 文本边缘留白
          calloutBgColor: "#00000000", //气泡窗口 背景颜色
          calloutDisplay: "ALWAYS", //气泡窗口 展示类型 默认常显 'ALWAYS' 常显 'BYCLICK' 点击显示
          markerUrl: require("./markerone.png"),
        };
      });
      this.$refs.liuEasyMap.changeCenter({
        latitude: this.markerData[0].latitude,
        longitude: this.markerData[0].longitude,
      });
      this.$refs.liuEasyMap.showMarkers();
    },
    async getPartyBranchList() {
      let { data } = await getPartyBranchList({ searchName: this.searchName });
      console.log(data);
      this.markerData = data.map((e, index, array) => {
        return {
          latitude: e.branchLat,
          longitude: e.branchLng,
          name: e.branchName,
          mapid: e.id,
          id: index,
          address: e.branchName,
          iconWidth: 32, //标记点图标宽度
          iconHeight: 32, //标记点图标高度
          calloutColor: "#798DF3", //气泡窗口 文本颜色
          calloutFontSize: 16, //气泡窗口 文本大小
          calloutBorderRadius: 6, //气泡窗口 边框圆角
          calloutPadding: 8, //气泡窗口 文本边缘留白
          calloutBgColor: "#00000000", //气泡窗口 背景颜色
          calloutDisplay: "ALWAYS", //气泡窗口 展示类型 默认常显 'ALWAYS' 常显 'BYCLICK' 点击显示
          markerUrl: require("./markerone.png"),
        };
      });
      this.$refs.liuEasyMap.showMarkers();
    },
    //点击标记点
    markerClick(e) {
      console.log("点击标记点信息：", e);
    },
  },
};
</script>

<style lang="scss">
.top3first {
  background: url(./topfirst3.png) no-repeat;
  border-radius: 1rem;
  background-size: 100% 100%;
  padding: 10rpx;
}
.page-main {
  width: 100%;
  height: 100vh;
}
.buildmap {
  .top3borderbt {
    border-bottom: 2rpx solid rgba(204, 204, 204, 0.4);
  }
  .top3-1 {
    background: url(./topfirst3.png) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    border-radius: 1rem;
  }
  .top3 {
    // height: 343rpx;
    background-size: 100% 100%;
    width: 80%;
    position: relative;
    top: 115rpx;
    left: 10%;
    border-radius: 1rem;

    .top3-row {
      display: flex;
      margin: 32rpx 32rpx 0 32rpx;
      padding-bottom: 24rpx;

      img {
        width: 40rpx;
        height: 40rpx;
        margin-right: 24rpx;
      }
      .depname {
        color: #162485;
        /* height: 40rpx; */
        line-height: 40rpx;
        font-size: 28rpx;
        width: 80%;
      }
      .bili {
        width: 116rpx;
        text-align: center;
        border-radius: 15rem;
        height: 40rpx;
        line-height: 40rpx;
        font-weight: 400;
        background: rgba(33, 85, 244, 0.05);
        color: #798df3;
        margin-left: auto;
      }
    }
  }
  .bluebg {
    width: 100%;
    height: 260rpx;
    background: linear-gradient(132deg, #3c53f0 0%, #1026c3 100%);
    position: absolute;
  }
  .uni-searchbar {
    background: white;
    padding: 0;
    margin-top: 10rpx;
    border-radius: 100rpx;
    .uni-searchbar__box {
      background: white !important;
    }
    .uni-searchbar__cancel {
      padding: 0 !important;
      text-align: left !important;
      width: 75rpx !important;
    }
  }
}
</style>