angelo
/
web-base-admin-h5
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(resettle): 安置架构

This commit is contained in:
woody 2025-06-04 13:57:59 +08:00
parent 209c303913
commit 8aa4ddc774
1 changed files with 735 additions and 662 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

401
src/pages/architecture/resettleArchite/resettle1.vue
View File

@ -1,163 +1,233 @@
<template>
<view>
<view class="seach">
<view class="neibox">
会员编号
</view>
<view>
<view style="display: flex; align-items: center">
<view class="neibox"> 会员编号 </view>
<view class="seach_i">
<u--input class="these" v-model="queryParams.memberCode">
<template slot='suffix'>
<template slot="suffix">
<view class="seatch_r">
<u-icon @click="getDataList" name="search" size="22" color="#fff"></u-icon>
<u-icon
@click="getDataList"
name="search"
size="22"
color="#fff"
></u-icon>
</view>
</template>
</u--input>
</view>
<view class="neibox" @click="popShow = true">
筛选
</view>
<TopMemberSelect @change="topMemberHandleChange" />
</view>
<view class="neibox" @click="popShow = true"> 筛选 </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
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">
<TreeChart :size="size" :json="data" :class="{ landscape: landscape.length }"
@click-node="clickNode" />
<view
class="scoll_main"
ref="scrollMain"
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@touchend="handleTouchEnd"
>
<TreeChart
:size="size"
:json="data"
:class="{ landscape: landscape.length }"
@click-node="clickNode"
/>
</view>
</view>
</view>
<u-popup :show="popShow" mode="right" @close="popShow = false" :closeOnClickOverlay="false">
<u-popup
:show="popShow"
mode="right"
@close="popShow = false"
:closeOnClickOverlay="false"
>
<view class="rightPopup">
<view class="popup_top">
<view @click="()=>{getDataList(),popShow = false}">筛选</view>
<view class="top_red" @click="popShow = false">{{'返回'}}</view>
<view
@click="
() => {
getDataList(), (popShow = false);
}
"
>筛选</view
>
<view class="top_red" @click="popShow = false">{{ '返回' }}</view>
</view>
<view class="typesBox">
<view class="typeTitle" @click='listShow=true'>
结算期数
</view>
<view class="typeTitle" @click="listShow = true"> 结算期数 </view>
<view class="choiceBox">
<view class="inputbox" @click="listShow=true">
<view class="inputbox" @click="listShow = true">
<view class="">
{{settleName?settleName:"请选择"}}
{{ settleName ? settleName : '请选择' }}
</view>
<u-icon name="arrow-right" size="24rpx" color="#090000"></u-icon>
</view>
</view>
</view>
<view class="typesBox">
<view class="typeTitle">
代数
</view>
<view class="typeTitle"> 代数 </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>
<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">清空筛选条件</view>
<view class="bottom_btn thebtn2" @click="()=>{getDataList(),popShow = false}">{{'确定'}}
<view
class="bottom_btn thebtn2"
@click="
() => {
getDataList(), (popShow = false);
}
"
>{{ '确定' }}
</view>
</view>
</view>
<u-picker @cancel='listShow=false' :show="listShow" ref="uPicker" :columns="memberSettlePeriodList"
@confirm="confirm" keyName='settleDate'></u-picker>
<u-picker
@cancel="listShow = false"
:show="listShow"
ref="uPicker"
:columns="memberSettlePeriodList"
@confirm="confirm"
keyName="settleDate"
></u-picker>
</u-popup>
<u-popup :show="isPop" closeable mode="center" round='10' @close="isPop=false">
<view class="ispop_box ">
<u-popup
:show="isPop"
closeable
mode="center"
round="10"
@close="isPop = false"
>
<view class="ispop_box">
<view class="Poster1">
<view class="pop_top">
<view class="pop_top">
<view>
<image crossorigin="anonymous" data-etype="image" :data-enode="popMould.avatarUrl"
:src=" 'data:image/png;base64,' + popMould.avatarUrlBase64" mode="aspectFit" class="poster1"></image>
<image
crossorigin="anonymous"
data-etype="image"
:data-enode="popMould.avatarUrl"
:src="'data:image/png;base64,' + popMould.avatarUrlBase64"
mode="aspectFit"
class="poster1"
></image>
</view>
<view>
<image crossorigin="anonymous" data-etype="image" :data-enode="popMould.countryUrl2"
:src="'data:image/png;base64,' +popMould.countryUrl2Base64" mode="aspectFit" class="poster2"></image>
</view>
</view>
<view class="top_right">
<image crossorigin="anonymous" data-etype="image" :data-enode="popMould.settleCountryUrl2"
:src="'data:image/png;base64,' + popMould.settleCountryUrl2Base64" mode="aspectFit" class="poster2"></image>
<view style="margin-top: 18rpx;">
结算国家
<image
crossorigin="anonymous"
data-etype="image"
:data-enode="popMould.countryUrl2"
:src="'data:image/png;base64,' + popMould.countryUrl2Base64"
mode="aspectFit"
class="poster2"
></image>
</view>
</view>
<!-- <view class="top_right">
<image
crossorigin="anonymous"
data-etype="image"
:data-enode="popMould.settleCountryUrl2"
:src="
'data:image/png;base64,' + popMould.settleCountryUrl2Base64
"
mode="aspectFit"
class="poster2"
></image>
<view style="margin-top: 18rpx"> 结算国家 </view>
</view> -->
</view>
<view class="pop_center">
<view class="center_flex">
<view class="c1">会员编号</view>
<view class="c2">{{popMould.memberCode}}</view>
<view class="c2">{{ popMould.memberCode }}</view>
</view>
<view class="center_flex">
<view class="c1">会员姓名</view>
<view class="c2">{{popMould.name}}</view>
<view class="c2">{{ popMould.name }}</view>
</view>
<view class="center_flex">
<view class="c1">安置部门</view>
<view class="c2">第{{ popMould.placeDept }}部门</view>
</view>
<view class="center_flex">
<view class="c1">支付时间</view>
<view class="c2">{{popMould.payDate}}</view>
<view class="c2">{{ popMould.payDate }}</view>
</view>
</view>
<view class="pop_bottom">
<view class="b_flex">
<view class="bt1">业绩(PV)</view>
<view class="bt1">业绩(¥)</view>
<view class="bt1">左区</view>
<view class="bt1">右区</view>
</view>
<view class="b_flex">
<view class="bt2">真实新增</view>
<view class="bt2">{{popMould.leftRealNewPv}}</view>
<view class="bt2">{{popMould.rightRealNewPv}}</view>
<view class="bt2">{{ popMould.leftRealNewPv }}</view>
<view class="bt2">{{ popMould.rightRealNewPv }}</view>
</view>
<view class="b_flex">
<view class="bt2">首购新增</view>
<view class="bt2">{{popMould.leftFirstPurchaseAdd}}</view>
<view class="bt2">{{popMould.rightFirstPurchaseAdd}}</view>
<view class="bt2">{{ popMould.leftFirstPurchaseAdd }}</view>
<view class="bt2">{{ popMould.rightFirstPurchaseAdd }}</view>
</view>
<view class="b_flex">
<view class="bt2">复购新增</view>
<view class="bt2">{{popMould.leftRepeatPurchaseSurplus}}</view>
<view class="bt2">{{popMould.rightRepeatPurchaseSurplus}}</view>
<view class="bt2">{{ popMould.leftRepeatPurchaseSurplus }}</view>
<view class="bt2">{{ popMould.rightRepeatPurchaseSurplus }}</view>
</view>
<view class="b_flex">
<view class="bt2">真实累计</view>
<view class="bt2">{{popMould.leftRealTotal}}</view>
<view class="bt2">{{popMould.rightRealTotal}}</view>
<view class="bt2">{{ popMould.leftRealTotal }}</view>
<view class="bt2">{{ popMould.rightRealTotal }}</view>
</view>
<view class="b_flex">
<view class="bt2">首购累计</view>
<view class="bt2">{{popMould.leftFirstTotal}}</view>
<view class="bt2">{{popMould.rightFirstTotal}}</view>
<view class="bt2">{{ popMould.leftFirstTotal }}</view>
<view class="bt2">{{ popMould.rightFirstTotal }}</view>
</view>
<view class="b_flex">
<view class="bt2">复购累计</view>
<view class="bt2">{{popMould.leftRepeatPurchaseTotal}}</view>
<view class="bt2">{{popMould.rightRepeatPurchaseTotal}}</view>
<view class="bt2">{{ popMould.leftRepeatPurchaseTotal }}</view>
<view class="bt2">{{ popMould.rightRepeatPurchaseTotal }}</view>
</view>
<view class="b_flex">
<view class="bt2">首购结余</view>
<view class="bt2">{{popMould.leftFirstSurplus}}</view>
<view class="bt2">{{popMould.rightFirstSurplus}}</view>
<view class="bt2">{{ popMould.leftFirstSurplus }}</view>
<view class="bt2">{{ popMould.rightFirstSurplus }}</view>
</view>
<view class="b_flex">
<view class="bt2">复购结余</view>
<view class="bt2">{{popMould.leftRepeatPurchaseSurplus}}</view>
<view class="bt2">{{popMould.rightRepeatPurchaseSurplus}}</view>
<view class="bt2">{{ popMould.leftRepeatPurchaseSurplus }}</view>
<view class="bt2">{{ popMould.rightRepeatPurchaseSurplus }}</view>
</view>
</view>
</view>
@ -167,37 +237,44 @@
</view>
</view>
</u-popup>
<Eposter width="750" height="1334" :list="list" backgroundColor="rgb(255, 255, 255)" @on-success="onSuccess"
ref="Eposter">
<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 TreeChart from "@/components/architectures/resettleSO.vue";
import TreeChart from '@/components/architectures/resettleSO.vue';
import Eposter from '@/components/architectures/Poster.vue';
import * as arc from '@/api/architecture.js'
import TopMemberSelect from '@/components/top-member-select/index.vue';
import * as arc from '@/api/architecture.js';
export default {
components: {
TreeChart,
Eposter
Eposter,
TopMemberSelect,
},
data() {
return {
avaerInfoList: [],
treeData: [],
queryParams: {
memberSettlePeriodId: "", //期数
memberCode: "", //会员编号
level: 6, //代数
type: 1
memberSettlePeriodId: '', // 期数
memberCode: '', // 会员编号
level: 6, // 代数
type: 1,
},
memberSettlePeriodList: [], //期数
memberSettlePeriodList: [], // 期数
popShow: false,
listShow: false,
settleName: "",
settleName: '',
data: {},
size: 0.3,
landscape: [],
@ -205,54 +282,57 @@
isPop: false,
touchStartPosition1: {
x: 0,
y: 0
y: 0,
},
touchStartPosition2: {
x: 0,
y: 0
y: 0,
},
initialDistance: 0,
list: []
list: [],
};
},
onLoad() {
this.getAvarerInfo();
this.getDataList()
// this.getDataList();
},
methods: {
//复制文字
topMemberHandleChange(val) {
this.$set(this.queryParams, 'memberCode', val);
this.getDataList();
},
// 复制文字
copyText() {
let self = this;
let md = self.popMould;
let text =
`会员编号：${md.memberCode} \n会员姓名：${md.name} \n支付时间：${md.payDate} \n业绩(PV)  左区  右区 \n真实新增  ${md.leftRealNewPv}  ${md.rightRealNewPv} \n首购新增  ${md.leftFirstPurchaseAdd}  ${md.rightFirstPurchaseAdd} \n复购新增 ${md.leftRepeatPurchaseSurplus}  ${md.rightRepeatPurchaseSurplus} \n真实累计 ${md.leftRealTotal}  ${md.rightRealTotal} \n首购累计 ${md.leftFirstTotal}  ${md.rightFirstTotal} \n复购累计 ${md.leftRepeatPurchaseTotal}  ${md.rightRepeatPurchaseTotal} \n首购结余 ${md.leftFirstSurplus}  ${md.rightFirstSurplus} \n复购结余 ${md.leftRepeatPurchaseSurplus}  ${md.rightRepeatPurchaseSurplus} \n`;
const self = this;
const md = self.popMould;
const text = `会员编号：${md.memberCode} \n会员姓名：${md.name} \n支付时间：${md.payDate} \n业绩(PV)  左区  右区 \n真实新增  ${md.leftRealNewPv}  ${md.rightRealNewPv} \n首购新增  ${md.leftFirstPurchaseAdd}  ${md.rightFirstPurchaseAdd} \n复购新增 ${md.leftRepeatPurchaseSurplus}  ${md.rightRepeatPurchaseSurplus} \n真实累计 ${md.leftRealTotal}  ${md.rightRealTotal} \n首购累计 ${md.leftFirstTotal}  ${md.rightFirstTotal} \n复购累计 ${md.leftRepeatPurchaseTotal}  ${md.rightRepeatPurchaseTotal} \n首购结余 ${md.leftFirstSurplus}  ${md.rightFirstSurplus} \n复购结余 ${md.leftRepeatPurchaseSurplus}  ${md.rightRepeatPurchaseSurplus} \n`;
uni.setClipboardData({
data: text,
success: function(res) {
success: function (res) {
uni.getClipboardData({
success: function(res) {
success: function (res) {
uni.showToast({
title: '复制成功'
})
}
})
}
})
title: '复制成功',
});
},
//下载图片
});
},
});
},
// 下载图片
downImage(elClass) {
this.$refs.Eposter.createForElRect(elClass, false);
},
downloadImg() {
let self = this;
let element = document.querySelector('.Poster1');
const self = this;
const element = document.querySelector('.Poster1');
uni.showLoading({
title: '图片保存中'
title: '图片保存中',
});
html2canvas(element).then(function(canvas) {
let dataURL = canvas.toDataURL('image/jpeg');
let link = document.createElement('a');
html2canvas(element)
.then(function (canvas) {
const dataURL = canvas.toDataURL('image/jpeg');
const link = document.createElement('a');
link.style.display = 'none';
link.href = dataURL;
link.download = 'image.jpg';
@ -262,13 +342,14 @@
uni.showToast({
icon: 'none',
title: '保存成功',
duration: 2000
duration: 2000,
});
uni.hideLoading();
}).catch(function(error) {
})
.catch(function (error) {
uni.hideLoading();
uni.showModal({
title: '保存失败'
title: '保存失败',
});
});
},
@ -284,65 +365,72 @@
if (touch2) {
this.touchStartPosition1 = {
x: touch1.pageX,
y: touch1.pageY
y: touch1.pageY,
};
this.touchStartPosition2 = {
x: touch2.pageX,
y: touch2.pageY
y: touch2.pageY,
};
this.initialDistance = Math.hypot(touch2.pageX - touch1.pageX, touch2.pageY - touch1.pageY);
this.initialDistance = Math.hypot(
touch2.pageX - touch1.pageX,
touch2.pageY - touch1.pageY
);
}
},
handleTouchMove(event) {
const touch1 = event.touches[0];
const touch2 = event.touches[1];
if (touch2) {
const currentDistance = Math.hypot(touch2.pageX - touch1.pageX, touch2.pageY - touch1.pageY);
const currentDistance = Math.hypot(
touch2.pageX - touch1.pageX,
touch2.pageY - touch1.pageY
);
const scale = currentDistance / this.initialDistance;
this.size = this.size * scale;
}
},
handleTouchEnd() {
this.touchStartPosition1 = {
x: 0,
y: 0
y: 0,
};
this.touchStartPosition2 = {
x: 0,
y: 0
y: 0,
};
this.initialDistance = 0;
},
clickNode(e) {
let self = this;
const self = this;
if (e) {
arc.getUrlBase({
arc
.getUrlBase({
countryUrl2: e.countryUrl2,
settleCountryUrl2: e.settleCountryUrl2,
avatarUrl: e.avatarUrl,
}).then((res) => {
})
.then((res) => {
self.popMould = e;
self.popMould.countryUrl2Base64 = res.countryUrl2Base64;
self.popMould.settleCountryUrl2Base64 = res.settleCountryUrl2Base64;
self.popMould.settleCountryUrl2Base64 =
res.settleCountryUrl2Base64;
self.popMould.avatarUrlBase64 = res.avatarUrlBase64;
self.isPop = true;
});
}
},
confirm(e) {
this.queryParams.memberSettlePeriodId = e.value[0].pkId
this.settleName = e.value[0].settleDate
this.listShow = false
this.queryParams.memberSettlePeriodId = e.value[0].pkId;
this.settleName = e.value[0].settleDate;
this.listShow = false;
},
getAvarerInfo() {
arc.getAvarerInfo().then((res) => {
this.avaerInfoList = res.data;
});
arc.getMemberSettlePeriod().then(res => {
this.memberSettlePeriodList = [res.data]
})
arc.getMemberSettlePeriod().then((res) => {
this.memberSettlePeriodList = [res.data];
});
},
getDataList() {
arc.getAzFramework(this.queryParams).then((res) => {
@ -350,18 +438,17 @@
});
},
clearAll() {
this.popShow = false
this.settleName = ""
this.popShow = false;
this.settleName = '';
this.queryParams = {
memberSettlePeriodId: "", //期数
memberCode: "", //会员编号
level: "", //代数
}
this.getDataList()
memberSettlePeriodId: '', // 期数
memberCode: '', // 会员编号
level: '', // 代数
};
this.getDataList();
},
}
}
},
};
</script>
<style lang="scss" scoped>
.ispop_box {
@ -403,7 +490,6 @@
.c1 {
width: 20%;
}
.c2 {
@ -411,8 +497,8 @@
display: flex;
justify-content: center;
align-items: center;
background: #F3F3F3;
border: 2rpx solid #EEEEEE;
background: #f3f3f3;
border: 2rpx solid #eeeeee;
border-radius: 8rpx;
padding: 10rpx 0;
}
@ -441,8 +527,8 @@
align-items: center;
margin-top: 22rpx;
flex: 1;
background: #F3F3F3;
border: 2rpx solid #EEEEEE;
background: #f3f3f3;
border: 2rpx solid #eeeeee;
border-radius: 8rpx;
padding: 12rpx 0;
margin: 11rpx 18rpx;
@ -458,11 +544,11 @@
.small-btn {
width: 312rpx;
height: 72rpx;
background: #FB3024;
background: #fb3024;
border-radius: 34rpx;
font-size: 28rpx;
font-weight: 400;
color: #FFFFFF;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
@ -471,17 +557,15 @@
.small-text-btn {
width: 312rpx;
height: 72rpx;
border: 1px solid #FB3024;
border: 1px solid #fb3024;
border-radius: 34rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
color: #FB3024;
color: #fb3024;
}
}
}
.operate-btnboxs {
@ -508,12 +592,6 @@
}
}
.rightPopup {
width: 645rpx;
height: 100%;
@ -531,7 +609,7 @@
color: #333333;
.top_red {
color: #FB3024;
color: #fb3024;
}
}
@ -556,7 +634,7 @@
}
.thebtn2 {
background-color: #FB3024;
background-color: #fb3024;
color: #ffffff;
}
}
@ -609,10 +687,9 @@
}
.selectbtn {
background-color: #C8161D;
background-color: #c8161d;
color: #ffffff;
}
}
}
}
@ -647,7 +724,7 @@
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 400;
color: #999999;
color: #303133;
}
.seatch_r {
@ -655,15 +732,13 @@
border-radius: 50%;
padding: 8rpx;
}
}
.mainbox {
padding: 26rpx 22rpx;
.main_top {
background: #FFFFFF;
background: #ffffff;
border-radius: 20rpx;
padding: 20rpx 4rpx;
display: flex;
@ -700,7 +775,6 @@
padding: 38rpx 0;
border-radius: 20rpx;
}
.scoll_main {
@ -710,7 +784,6 @@
// overflow: scroll;
// overflow-x: auto;
}
}
</style>