web-africa-h5/pages/architecture/resettleArchite/resettle3.vue

<template>
  <view>
    <view class="seach">
      <view class="neibox">{{ $t("MN_T_1") }}</view>
      <view class="seach_i">
        <u--input class="these" v-model="queryParams.memberCode">
          <template slot="suffix">
            <view class="seatch_r"
              ><u-icon
                @click="getDataList"
                name="search"
                size="22"
                color="#fff"
              ></u-icon
            ></view>
          </template>
        </u--input>
      </view>
      <view class="neibox" @click="onpenPop">{{ $t("MY_ORD_50") }}</view>
    </view>
    <view class="mainbox">
      <view class="main_top">
        <view
          class="top_flex"
          v-for="(item, index) in avaerInfoList"
          :key="index"
        >
          <img class="theimg" :src="item.value" alt="" />
          <view class="fle2">{{ item.name }}</view>
        </view>
      </view>

      <view class="main_bottom">
        <view
          class="scoll_main"
          ref="scrollMain"
          @touchstart="handleTouchStart"
          @touchmove="handleTouchMove"
          @touchend="handleTouchEnd"
        >
          <TreeChart3
            :style="{
              left: `${x}px`,
              top: `${y}px`,
              transform: `scale(${scale})`,
            }"
            :size="size"
            :json="data"
            :class="{ landscape: landscape.length }"
            @click-node="clickNode"
            @click-top="clickTop"
          />
        </view>
      </view>
    </view>
    <u-popup
      :show="popShow"
      mode="right"
      @close="popShow = false"
      :closeOnClickOverlay="false"
    >
      <view class="rightPopup">
        <view class="popup_top">
          <view
            @click="
              () => {
                getDataList(), (popShow = false);
              }
            "
          >
            {{ $t("MY_ORD_50") }}
          </view>
          <view class="top_red" @click="popShow = false">{{
            $t("N_I_241")
          }}</view>
        </view>
        <view class="typesBox">
          <view class="typeTitle" @click="listShow = true">{{
            $t("N_I_242")
          }}</view>
          <view class="choiceBox">
            <view class="inputbox" @click="listShow = true">
              <view class="">{{
                settleName ? settleName : $t("CK_KS_38")
              }}</view>
              <u-icon name="arrow-right" size="24rpx" color="#090000"></u-icon>
            </view>
          </view>
        </view>
        <view class="typesBox">
          <view class="typeTitle">{{ $t("w_0353") }}</view>
          <view class="choiceBox">
            <u--input
              v-model="queryParams.level"
              style="
                background-color: rgba(255, 234, 233, 0.65);
                border-color: rgba(255, 234, 233, 0.65) !important;
              "
              placeholder="请输入"
              border="surround"
              shape="circle"
            ></u--input>
          </view>
        </view>

        <view class="popup_bottom">
          <view class="bottom_btn thebtn1" @click="clearAll">{{
            $t("w_0257")
          }}</view>
          <view
            class="bottom_btn thebtn2"
            @click="
              () => {
                getDataList(), (popShow = false);
              }
            "
          >
            {{ $t("w_0035") }}
          </view>
        </view>
      </view>
      <u-picker
        :cancelText="$t('MN_F_31')"
        :confirmText="$t('MN_F_32')"
        @cancel="listShow = false"
        :show="listShow"
        ref="uPicker"
        :columns="memberSettlePeriodList"
        @confirm="confirm"
        keyName="settleDate"
      ></u-picker>
    </u-popup>

    <Eposter
      width="750"
      height="1334"
      :list="list"
      backgroundColor="rgb(255, 255, 255)"
      @on-success="onSuccess"
      ref="Eposter"
    ></Eposter>
  </view>
</template>

<script>
import html2canvas from "html2canvas";
import TreeChart3 from "@/components/architectures/resettleSO3.vue";
import Eposter from "@/components/architectures/Poster.vue";
export default {
  components: {
    TreeChart3,
    Eposter,
  },
  data() {
    return {
      avaerInfoList: [],
      treeData: [],
      queryParams: {
        memberSettlePeriodId: "", //期数
        memberCode: "", //会员编号
        level: 3, //代数
        type: 3,
      },
      memberSettlePeriodList: [], //期数
      popShow: false,
      listShow: false,
      settleName: "",
      data: {},
      size: 0.8,
      landscape: [],
      popMould: {},
      isPop: false,
      touchStartPosition1: {
        x: 0,
        y: 0,
      },
      touchStartPosition2: {
        x: 0,
        y: 0,
      },
      initialDistance: 0,
      list: [],
      startX: 0,
      startY: 0,
      x: 0, // 元素的x坐标
      y: 0, // 元素的y坐标
      scale: 1, // 元素的缩放比例
      initialX: 0, // 元素的初始x坐标
      initialY: 0, // 元素的初始y坐标
    };
  },
  onLoad() {
    this.getAvarerInfo();
    // this.getDataList();
  },
  methods: {
    onpenPop() {
      this.popShow = true;
      console.log(this.popShow);
    },
    handleTouchStart(event) {
      // 记录元素的初始位置
      this.initialX = event.changedTouches[0].clientX;
      this.initialY = event.changedTouches[0].clientY;
    },
    handleTouchMove(event) {
      if (event.touches.length === 2) {
        // 计算拖动的距离
        const deltaX = event.touches[0].clientX - event.touches[1].clientX;
        const deltaY = event.touches[0].clientY - event.touches[1].clientY;
        // 更新元素的位置和缩放比例
        this.x += deltaX;
        this.y += deltaY;
        // 根据滑动距离控制缩放比例
        this.scale += deltaY / 100;
      } else {
        // 计算拖动的距离
        const deltaX = event.changedTouches[0].clientX - this.initialX;
        const deltaY = event.changedTouches[0].clientY - this.initialY;
        // 更新元素的位置和缩放比例
        this.x += deltaX;
        this.y += deltaY;
      }

      // 更新元素的初始位置为最后一次拖动的结束位置
      this.initialX = event.touches[0].clientX;
      this.initialY = event.touches[0].clientY;
    },
    handleTouchEnd(event) {
      // 在这里记录第一次拖动的结束位置，以便第二次拖动时使用
      this.initialX = event.changedTouches[0].clientX;
      this.initialY = event.changedTouches[0].clientY;
    },
    clickNode(e) {},
    clickTop(e) {
      let that = this;
      if (e) {
        that.queryParams.memberCode = e.memberCode;
        that.getDataList();
      }
    },
    confirm(e) {
      this.queryParams.memberSettlePeriodId = e.value[0].pkId;
      this.settleName = e.value[0].settleDate;
      this.listShow = false;
    },
    getAvarerInfo() {
      let self = this;
      self._get("member/api/member-structure/get-avatar-info", {}, (res) => {
        self.avaerInfoList = res.data;
      });
      self._get(
        "member/api/member-structure/get-member-settle-period",
        {},
        (res) => {
          self.memberSettlePeriodList = [res.data];
          let memberSettlePeriodLists = res.data;
          self.queryParams.memberSettlePeriodId =
            memberSettlePeriodLists[0].pkId;
          self.getDataList();
        }
      );
    },
    getDataList() {
      let self = this;
      let params = this.queryParams;
      self._get("/member/api/member-structure/az-framework", params, (res) => {
        self.data = res.data[0];
      });
    },
    clearAll() {
      this.popShow = false;
      this.settleName = "";
      this.queryParams = {
        memberSettlePeriodId: "", //期数
        memberCode: "", //会员编号
        level: 3, //代数
        type: 3,
      };
      this.getDataList();
    },
  },
};
</script>
<style lang="scss" scoped>
.ispop_box {
  padding: 27rpx;
  padding-top: 60rpx;
  width: 670rpx;
  font-size: 24rpx;
  color: #333333;

  .pop_top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .poster1 {
      height: 88rpx;
      width: 88rpx;
    }

    .poster2 {
      width: 88rpx;
      height: 54rpx;
      border-radius: 10rpx;
      margin-left: 20rpx;
    }

    .top_right {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }

  .pop_center {
    .center_flex {
      display: flex;
      align-items: center;
      margin-top: 20rpx;

      .c1 {
        width: 20%;
      }

      .c2 {
        width: 80%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f3f3f3;
        border: 2rpx solid #eeeeee;
        border-radius: 8rpx;
        padding: 10rpx 0;
      }
    }
  }

  .pop_bottom {
    margin: 20rpx 0;
    border-top: 2rpx solid #eeeeee;
    border-top: 2rpx solid #eeeeee;

    .b_flex {
      display: flex;

      .bt1 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 22rpx;
        flex: 1;
      }

      .bt2 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 22rpx;
        flex: 1;
        background: #f3f3f3;
        border: 2rpx solid #eeeeee;
        border-radius: 8rpx;
        padding: 12rpx;
        margin: 11rpx 18rpx;
        word-break: break-all;
      }
    }
  }

  .btn_box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .small-btn {
      width: 312rpx;
      height: 72rpx;
      background: #fb3024;
      border-radius: 34rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .small-text-btn {
      width: 312rpx;
      height: 72rpx;
      border: 1px solid #fb3024;
      border-radius: 34rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      color: #fb3024;
    }
  }
}

.operate-btnboxs {
  padding: 29rpx 26rpx;
  background-color: #ffffff;

  .d-c-c {
    display: flex;
    align-items: center;
    justify-content: center;

    .operate-btn {
      width: 64rpx;
      height: 64rpx;
      margin: 5rpx;
      // background: #F2F2F2;
      border-radius: 5rpx;
      padding: 0;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.rightPopup {
  width: 645rpx;
  .popup_top {
    padding: 25rpx;
    background-color: rgba(255, 234, 233, 0.65);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;

    .top_red {
      color: #fb3024;
    }
  }

  .popup_bottom {
    display: flex;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;

    .bottom_btn {
      flex: 1;
      padding: 20rpx 0;
      text-align: center;
      font-size: 28rpx;
    }

    .thebtn1 {
      background-color: rgba(255, 234, 233, 0.65);
      color: #333333;
    }

    .thebtn2 {
      background-color: #fb3024;
      color: #ffffff;
    }
  }

  .typesBox {
    margin-top: 40rpx;

    .typeTitle {
      padding: 0 24rpx;
      font-size: 30rpx;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #333333;
    }

    .choiceBox {
      padding: 0 12rpx;
      display: flex;
      margin-top: 17rpx;
      align-items: center;
      flex-wrap: wrap;

      .inputbox {
        font-size: 26rpx;
        width: 100%;
        padding: 20rpx 32rpx;
        border-radius: 20rpx;
        background-color: rgba(255, 234, 233, 0.65);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .flex_btn {
        background-color: rgba(255, 234, 233, 0.65);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14rpx 48rpx;
        border-radius: 26rpx;
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        margin: 17rpx 5rpx;
      }

      .timesbtn {
        flex: 1;
      }

      .selectbtn {
        background-color: #c8161d;
        color: #ffffff;
      }
    }
  }
}

.seach {
  background: #fff;
  overflow: hidden;
  padding: 20rpx 23rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  border-bottom: 2rpx solid #eee;
  z-index: 99;
  .these {
    border: none;
    padding: 10rpx 0 !important;
  }

  .seach_i {
    padding: 0 20rpx;
    border-radius: 34rpx;
    background: #fff;
    flex: 1;
    background: #f5f6f8;
    margin: 0 20rpx;
  }

  .neibox {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #999999;
  }

  .seatch_r {
    background: #fb3024;
    border-radius: 50%;
    padding: 8rpx;
  }
}

.mainbox {
  padding: 26rpx 22rpx;

  .main_top {
    background: #ffffff;
    border-radius: 20rpx;
    padding: 20rpx 4rpx;
    display: flex;
    flex-wrap: wrap;

    .top_flex {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 15rpx 20rpx;
      // justify-content: center;
      width: 98rpx;

      .theimg {
        width: 92rpx;
        height: 92rpx;
        border-radius: 50%;
      }

      .flex2 {
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #666666;
      }
    }
  }

  .main_bottom {
    width: 100%;
    height: calc(100vh - 720rpx);
    margin-top: 25rpx;
    background-color: #ffffff;
    padding: 38rpx 0;

    border-radius: 20rpx;
  }

  .scoll_main {
    width: 700rpx;
    height: calc(100vh - 720rpx);
    overflow: auto;

    // overflow: scroll;
    // overflow-x: auto;
  }
}
</style>