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

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

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