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

fix(framework): 安置架构图超出视口宽度可横向滚动 bug-61

This commit is contained in:
woody 2025-05-07 09:37:56 +08:00
parent 34e706cdb9
commit 81ea1d6da5
7 changed files with 517 additions and 536 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/views/framework/architecture/azjg2.vue
View File

@ -618,6 +618,7 @@ export default {
::v-deep .org-tree-container { ::v-deep .org-tree-container {
display: block; display: block;
background: rgba(1, 1, 1, 0) !important; background: rgba(1, 1, 1, 0) !important;
overflow-x: auto;
} }
::v-deep .xrBox { ::v-deep .xrBox {
.neibox { .neibox {
@ -703,9 +704,7 @@ export default {
::v-deep .el-dialog__body { ::v-deep .el-dialog__body {
padding: 0; padding: 0;
} }
::v-deep .org-tree-container {
display: block;
}
// ::v-deep .xrBox { // ::v-deep .xrBox {
// } // }
@ -840,9 +839,7 @@ export default {
} }
} }
} }
::v-deep .org-tree-container {
display: block;
}
.page { .page {
padding: 10px 20px; padding: 10px 20px;
background: #f9f9f9; background: #f9f9f9;

5
src/views/framework/architecture/azjg3.vue
View File

@ -661,9 +661,7 @@ export default {
::v-deep .el-dialog__body { ::v-deep .el-dialog__body {
padding: 0; padding: 0;
} }
::v-deep .org-tree-container {
display: block;
}
::v-deep .xrBox { ::v-deep .xrBox {
.neibox { .neibox {
// padding: 20px; // padding: 20px;
@ -835,6 +833,7 @@ export default {
::v-deep .org-tree-container { ::v-deep .org-tree-container {
display: block; display: block;
background: rgba(1, 1, 1, 0) !important; background: rgba(1, 1, 1, 0) !important;
} }
.page { .page {
padding: 10px 20px !important; padding: 10px 20px !important;

8
src/views/framework/architecture/azjg5.vue
View File

@ -683,9 +683,7 @@ export default {
::v-deep .el-dialog__body { ::v-deep .el-dialog__body {
padding: 0; padding: 0;
} }
::v-deep .org-tree-container {
display: block;
}
// ::v-deep .xrBox { // ::v-deep .xrBox {
// } // }
@ -820,9 +818,7 @@ export default {
} }
} }
} }
::v-deep .org-tree-container {
display: block;
}
.page { .page {
padding: 10px 20px; padding: 10px 20px;
background: #f9f9f9; background: #f9f9f9;

1
src/views/framework/architecture/index.vue
View File

@ -631,6 +631,7 @@ export default {
::v-deep .org-tree-container { ::v-deep .org-tree-container {
display: block; display: block;
background: rgba(1, 1, 1, 0) !important; background: rgba(1, 1, 1, 0) !important;
overflow-x: auto;
} }
::v-deep .neibox { ::v-deep .neibox {
padding: 0; padding: 0;

380
src/views/framework/recommend/tjjg2.vue
View File

@ -2,51 +2,47 @@
<div class="page"> <div class="page">
<topBar <topBar
v-if="topList.length > 0" v-if="topList.length > 0"
:topList="topList" :top-list="topList"
:moren="moren" :moren="moren"
></topBar> />
<div class="thetopbox"> <div class="thetopbox">
<el-form ref="form" :model="queryParams" label-width="100px"> <el-form ref="form" :model="queryParams" label-width="100px">
<el-row> <el-row>
<el-col :span="4"> <el-col :span="4">
<el-form-item :label="'会员编号'" prop="memberCode"> <el-form-item :label="'会员编号'" prop="memberCode">
<el-input <el-input
clearable
v-model="queryParams.memberCode" v-model="queryParams.memberCode"
></el-input></el-form-item clearable
></el-col> /></el-form-item></el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item :label="'结算期数'" prop="memberSettlePeriodId"> <el-form-item :label="'结算期数'" prop="memberSettlePeriodId">
<el-select <el-select
v-model="queryParams.memberSettlePeriodId"
clearable clearable
:placeholder="'请选择'" :placeholder="'请选择'"
v-model="queryParams.memberSettlePeriodId"
> >
<el-option <el-option
v-for="item in memberSettlePeriodList" v-for="item in memberSettlePeriodList"
:key="item.pkId" :key="item.pkId"
:label="item.settleDate" :label="item.settleDate"
:value="item.pkId" :value="item.pkId"
></el-option> </el-select></el-form-item /> </el-select></el-form-item></el-col>
></el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item :label="'展示层数'" prop="level"> <el-form-item :label="'展示层数'" prop="level">
<el-input <el-input
clearable
v-model="queryParams.level" v-model="queryParams.level"
></el-input></el-form-item clearable
></el-col> /></el-form-item></el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item :label="'是否固定'" prop="cantz"> <el-form-item :label="'是否固定'" prop="cantz">
<el-select clearable :placeholder="'请选择'" v-model="cantz"> <el-select v-model="cantz" clearable :placeholder="'请选择'">
<el-option <el-option
v-for="(item, index) in tzList" v-for="(item, index) in tzList"
:key="index" :key="index"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
></el-option> />
</el-select> </el-form-item </el-select> </el-form-item></el-col>
></el-col>
<el-col :span="4" style="margin-left: 30px"> <el-col :span="4" style="margin-left: 30px">
<div class="searchbox"> <div class="searchbox">
<el-button class="searchbtn" @click="getSearch"> {{ '搜索' }}</el-button> <el-button class="searchbtn" @click="getSearch"> {{ '搜索' }}</el-button>
@ -54,31 +50,30 @@
<el-button @click="goback"> {{ '返回' }}</el-button> <el-button @click="goback"> {{ '返回' }}</el-button>
</div> </div>
</el-col> </el-col>
</el-row></el-form </el-row></el-form>
>
</div> </div>
<div class="theorgtree"> <div class="theorgtree">
<div class="tree"> <div class="tree">
<div class="tree-content" @mousedown.stop="move" @wheel="handleWheel"> <div class="tree-content" @mousedown.stop="move" @wheel="handleWheel">
<div :style="{ transform: `scale(${scale})` }"> <div :style="{ transform: `scale(${scale})` }">
<vue2-org-tree <vue2-org-tree
ref="orgTree"
:data="data" :data="data"
collapsable collapsable
ref="orgTree" :render-content="renderContent"
v-bind="$listeners"
@on-expand="onExpand" @on-expand="onExpand"
@on-node-click="NodeClick" @on-node-click="NodeClick"
@on-node-mouseover="onMouseover" @on-node-mouseover="onMouseover"
@on-node-mouseout="onMouseout" @on-node-mouseout="onMouseout"
:renderContent="renderContent"
v-bind="$listeners"
/> />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div <div
class="rendercontent"
ref="htmlContent" ref="htmlContent"
class="rendercontent"
style="width: 516px; background-color: #ffffff; display: none;height: 470px;" style="width: 516px; background-color: #ffffff; display: none;height: 470px;"
> >
<div class="toprender"> <div class="toprender">
@ -86,11 +81,11 @@
<img <img
class="img1" class="img1"
:src="'data:image/png;base64,' + popdata.avatarUrlBase64" :src="'data:image/png;base64,' + popdata.avatarUrlBase64"
/> >
<img <img
class="img2" class="img2"
:src="'data:image/png;base64,' + popdata.countryUrl2Base64" :src="'data:image/png;base64,' + popdata.countryUrl2Base64"
/> >
</div> </div>
<div class="centerbox"> <div class="centerbox">
<div class="lineboex"> <div class="lineboex">
@ -102,7 +97,7 @@
<div class="linecontent">{{ popdata.name }}</div> <div class="linecontent">{{ popdata.name }}</div>
</div> </div>
<div class="lineboex"> <div class="lineboex">
<div class="linetitle">{{'直推代数'}}</div> <div class="linetitle">{{ '直推代数' }}</div>
<div class="linecontent">{{ popdata.level }}</div> <div class="linecontent">{{ popdata.level }}</div>
</div> </div>
<div class="lineboex"> <div class="lineboex">
@ -113,8 +108,8 @@
<div class="rightimg"> <div class="rightimg">
<img <img
:src="'data:image/png;base64,' + popdata.settleCountryUrl2Base64" :src="'data:image/png;base64,' + popdata.settleCountryUrl2Base64"
/> >
<div>{{'结算国家'}}</div> <div>{{ '结算国家' }}</div>
</div> </div>
</div> </div>
<div class="bottomrender"> <div class="bottomrender">
@ -131,14 +126,14 @@
<div class="flexbox"> <div class="flexbox">
<div class="thetitle">{{ '团队' }}</div> <div class="thetitle">{{ '团队' }}</div>
<div class="linecontent">{{ popdata.teamNumber }}</div> <div class="linecontent">{{ popdata.teamNumber }}</div>
<div class="linecontent">{{ popdata.teamHistoryPerformancePv }}</div> <div class="linecontent">{{ popdata.teamHistoryPerformancePv }}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="copyContent" v-show="false" ref="copyContent"> <div v-show="false" ref="copyContent" class="copyContent">
<div>{{ '会员编号' }}：{{ popdata.memberCode }}</div> <div>{{ '会员编号' }}：{{ popdata.memberCode }}</div>
<div>{{ '会员姓名' }}：{{ popdata.name }}</div> <div>{{ '会员姓名' }}：{{ popdata.name }}</div>
<div>{{'直推代数'}}：{{ popdata.level }}</div> <div>{{ '直推代数' }}：{{ popdata.level }}</div>
<div>{{ '支付日期' }}：{{ popdata.payDate }}</div> <div>{{ '支付日期' }}：{{ popdata.payDate }}</div>
<div>{{ '类型' }}&nbsp;&nbsp;直推&nbsp;&nbsp;团队</div> <div>{{ '类型' }}&nbsp;&nbsp;直推&nbsp;&nbsp;团队</div>
<div> <div>
@ -148,7 +143,7 @@
</div> </div>
<div> <div>
{{ '业绩' }}({{ isLocals() }})&nbsp;&nbsp;{{ popdata.teamNumber }}&nbsp;&nbsp;{{ {{ '业绩' }}({{ isLocals() }})&nbsp;&nbsp;{{ popdata.teamNumber }}&nbsp;&nbsp;{{
popdata.teamHistoryPerformancePv popdata.teamHistoryPerformancePv
}} }}
</div> </div>
</div> </div>
@ -156,44 +151,44 @@
</template> </template>
<script> <script>
import topBar from "@/components/topBar"; import topBar from '@/components/topBar'
import html2canvas from "html2canvas"; import html2canvas from 'html2canvas'
import { import {
getTjFramework, getTjFramework,
getMemberSettlePeriod, getMemberSettlePeriod,
getUrlBase, getUrlBase
} from "@/api/archityecture"; } from '@/api/archityecture'
import { isLocals } from "../../../utils/numberToCurrency"; import { isLocals } from '../../../utils/numberToCurrency'
export default { export default {
name: "Azjg", name: 'Azjg',
components: { components: {
topBar, topBar
}, },
data() { data() {
return { return {
moren: "tjjg2", moren: 'tjjg2',
topList: [ topList: [
{ {
name: '方案一', name: '方案一',
path: "tjjg", path: 'tjjg'
}, },
{ {
name: '方案二', name: '方案二',
path: "tjjg2", path: 'tjjg2'
}, },
{ {
name: '方案三', name: '方案三',
path: "tjjg3", path: 'tjjg3'
}, },
{ {
name: '方案四', name: '方案四',
path: "tjjg4", path: 'tjjg4'
}, }
], ],
queryParams: { queryParams: {
memberSettlePeriodId: "", //期数 memberSettlePeriodId: '', // 期数
memberCode: "", //会员编号 memberCode: '', // 会员编号
level: "", //代数 level: '' // 代数
}, },
basicSwitch: false, basicSwitch: false,
basicInfo: { id: null, label: null }, basicInfo: { id: null, label: null },
@ -201,273 +196,273 @@ export default {
memberSettlePeriodList: [], memberSettlePeriodList: [],
popdata: {}, popdata: {},
tzList: [ tzList: [
{ value: 0, label: "是" }, { value: 0, label: '是' },
{ value: 1, label: "否" }, { value: 1, label: '否' }
], ],
cantz: 1, //0不可拖拽,1可拖拽 cantz: 1, // 0不可拖拽,1可拖拽
scale: 1, scale: 1
}; }
}, },
created() { created() {
this.getSearch(); this.getSearch()
this.getAvarerInfo(); this.getAvarerInfo()
}, },
methods: { methods: {
handleWheel(event) { handleWheel(event) {
if (this.cantz == 1) { if (this.cantz == 1) {
event.preventDefault(); event.preventDefault()
const delta = Math.sign(event.deltaY); const delta = Math.sign(event.deltaY)
const newScale = this.scale - delta * 0.1; const newScale = this.scale - delta * 0.1
this.scale = Math.max(0.01, Math.min(newScale, 10)); this.scale = Math.max(0.01, Math.min(newScale, 10))
} }
}, },
//拖拽移动 // 拖拽移动
move(e) { move(e) {
if (this.cantz == 0) { if (this.cantz == 0) {
return; return
} }
const odiv = e.currentTarget; // 获取元素 const odiv = e.currentTarget // 获取元素
// 算出鼠标相对元素的位置 // 算出鼠标相对元素的位置
const disX = e.clientX - odiv.offsetLeft; const disX = e.clientX - odiv.offsetLeft
const disY = e.clientY - odiv.offsetTop; const disY = e.clientY - odiv.offsetTop
document.onmousemove = (e) => { document.onmousemove = (e) => {
// 鼠标按下并移动的事件 // 鼠标按下并移动的事件
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置 // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
const left = e.clientX - disX; const left = e.clientX - disX
const top = e.clientY - disY; const top = e.clientY - disY
// 绑定元素位置到positionX和positionY上面 // 绑定元素位置到positionX和positionY上面
this.positionX = top; this.positionX = top
this.positionY = left; this.positionY = left
// 移动当前元素 // 移动当前元素
odiv.style.left = left + "px"; odiv.style.left = left + 'px'
odiv.style.top = top + "px"; odiv.style.top = top + 'px'
}; }
document.onmouseup = () => { document.onmouseup = () => {
document.onmousemove = null; document.onmousemove = null
document.onmouseup = null; document.onmouseup = null
}; }
}, },
isLocals, isLocals,
copyText(data) { copyText(data) {
this.popdata = data; this.popdata = data
setTimeout(() => { setTimeout(() => {
const copyContent = this.$refs.copyContent; const copyContent = this.$refs.copyContent
const textLines = Array.from(copyContent.querySelectorAll("div")).map( const textLines = Array.from(copyContent.querySelectorAll('div')).map(
(div) => div.textContent.trim() (div) => div.textContent.trim()
); )
const text = textLines.join("\n"); const text = textLines.join('\n')
const tempInput = document.createElement("textarea"); const tempInput = document.createElement('textarea')
tempInput.value = text; tempInput.value = text
document.body.appendChild(tempInput); document.body.appendChild(tempInput)
tempInput.select(); tempInput.select()
try { try {
document.execCommand("copy"); document.execCommand('copy')
this.$message({ this.$message({
message: '复制成功', message: '复制成功',
type: "success", type: 'success'
}); })
} catch (error) { } catch (error) {
this.$message({ this.$message({
message: "复制失败", message: '复制失败',
type: "warning", type: 'warning'
}); })
} }
tempInput.remove(); tempInput.remove()
window.getSelection().removeAllRanges(); window.getSelection().removeAllRanges()
}, 50); }, 50)
}, },
async downloadImage(data) { async downloadImage(data) {
await getUrlBase({ await getUrlBase({
countryUrl2: data.countryUrl2, countryUrl2: data.countryUrl2,
settleCountryUrl2: data.settleCountryUrl2, settleCountryUrl2: data.settleCountryUrl2,
avatarUrl: data.avatarUrl, avatarUrl: data.avatarUrl
}).then((res) => { }).then((res) => {
this.popdata = data; this.popdata = data
this.popdata.countryUrl2Base64 = res.countryUrl2Base64; this.popdata.countryUrl2Base64 = res.countryUrl2Base64
this.popdata.settleCountryUrl2Base64 = res.settleCountryUrl2Base64; this.popdata.settleCountryUrl2Base64 = res.settleCountryUrl2Base64
this.popdata.avatarUrlBase64 = res.avatarUrlBase64; this.popdata.avatarUrlBase64 = res.avatarUrlBase64
}); })
const element = this.$refs.htmlContent; const element = this.$refs.htmlContent
await new Promise((resolve) => setTimeout(resolve, 50)); // 根据实际情况调整延迟时间 await new Promise((resolve) => setTimeout(resolve, 50)) // 根据实际情况调整延迟时间
element.style.display = "block"; element.style.display = 'block'
// 使用html2canvas将节点生成为图片 // 使用html2canvas将节点生成为图片
const canvas = await html2canvas(element); const canvas = await html2canvas(element)
const image = canvas.toDataURL("image/png"); const image = canvas.toDataURL('image/png')
// 复制图片到剪贴板 // 复制图片到剪贴板
// 下载图片到本地 // 下载图片到本地
const link = document.createElement("a"); const link = document.createElement('a')
link.href = image; link.href = image
link.download = "image.png"; link.download = 'image.png'
link.click(); link.click()
// 隐藏图片 // 隐藏图片
element.style.display = "none"; element.style.display = 'none'
}, },
getAvarerInfo() { getAvarerInfo() {
getMemberSettlePeriod().then((res) => { getMemberSettlePeriod().then((res) => {
this.memberSettlePeriodList = res.data; this.memberSettlePeriodList = res.data
this.memberSettlePeriodList.forEach((ele) => { this.memberSettlePeriodList.forEach((ele) => {
if (ele.isThisDay == 0) { if (ele.isThisDay == 0) {
this.queryParams.memberSettlePeriodId = ele.pkId; this.queryParams.memberSettlePeriodId = ele.pkId
} }
}); })
}); })
}, },
//返回 // 返回
goback() { goback() {
this.queryParams.memberCode = this.data.parentMemberCode; this.queryParams.memberCode = this.data.parentMemberCode
this.getSearch(); this.getSearch()
}, },
//鼠标移入 // 鼠标移入
onMouseover(e, data) { onMouseover(e, data) {
this.basicInfo = data; this.basicInfo = data
this.basicSwitch = true; this.basicSwitch = true
}, },
//鼠标移出 // 鼠标移出
onMouseout(e, data) { onMouseout(e, data) {
this.basicSwitch = false; this.basicSwitch = false
}, },
//渲染节点 // 渲染节点
renderContent(h, data) { renderContent(h, data) {
return ( return (
<div class="rendercontent"> <div class='rendercontent'>
<div class="toprender"> <div class='toprender'>
<div class="leftimg"> <div class='leftimg'>
<img class="img1" src={data.avatarUrl}></img> <img class='img1' src={data.avatarUrl}></img>
<img class="img2" src={data.countryUrl}></img> <img class='img2' src={data.countryUrl}></img>
</div> </div>
<div class="centerbox"> <div class='centerbox'>
<div class="lineboex"> <div class='lineboex'>
<div class="linetitle">{ '会员编号'} </div> <div class='linetitle'>{ '会员编号'} </div>
<div class="linecontent">{data.memberCode}</div> <div class='linecontent'>{data.memberCode}</div>
</div> </div>
<div class="lineboex"> <div class='lineboex'>
<div class="linetitle">{ '会员姓名' }</div> <div class='linetitle'>{ '会员姓名' }</div>
<div class="linecontent">{data.name}</div> <div class='linecontent'>{data.name}</div>
</div> </div>
<div class="lineboex"> <div class='lineboex'>
<div class="linetitle">{'直推代数'}</div> <div class='linetitle'>{'直推代数'}</div>
<div class="linecontent">{data.level}</div> <div class='linecontent'>{data.level}</div>
</div> </div>
<div class="lineboex"> <div class='lineboex'>
<div class="linetitle">{ '支付日期' }</div> <div class='linetitle'>{ '支付日期' }</div>
<div class="linecontent">{data.payDate}</div> <div class='linecontent'>{data.payDate}</div>
</div> </div>
</div> </div>
<div class="rightimg"> <div class='rightimg'>
<img src={data.settleCountryUrl2}></img> <img src={data.settleCountryUrl2}></img>
<div>{'结算国家'}</div> <div>{'结算国家'}</div>
</div> </div>
</div> </div>
<div class="bottomrender"> <div class='bottomrender'>
<div class="flexbox"> <div class='flexbox'>
<div class="thetitle">{ '类型' }</div> <div class='thetitle'>{ '类型' }</div>
<div class="linecontent">人数</div> <div class='linecontent'>人数</div>
<div class="linecontent">{ '业绩' }({isLocals()})</div> <div class='linecontent'>{ '业绩' }({isLocals()})</div>
</div> </div>
<div class="flexbox"> <div class='flexbox'>
<div class="thetitle">直推</div> <div class='thetitle'>直推</div>
<div class="linecontent">{data.directPushNumber}</div> <div class='linecontent'>{data.directPushNumber}</div>
<div class="linecontent">{data.newPerformancePv}</div> <div class='linecontent'>{data.newPerformancePv}</div>
</div> </div>
<div class="flexbox"> <div class='flexbox'>
<div class="thetitle">{'团队' }</div> <div class='thetitle'>{'团队' }</div>
<div class="linecontent">{data.teamNumber}</div> <div class='linecontent'>{data.teamNumber}</div>
<div class="linecontent">{data.teamHistoryPerformancePv }</div> <div class='linecontent'>{data.teamHistoryPerformancePv }</div>
</div> </div>
</div> </div>
<div class="footerbox"> <div class='footerbox'>
<div <div
class="footerbtn btn1" class='footerbtn btn1'
on-click={() => { on-click={() => {
this.downloadImage(data); this.downloadImage(data)
}} }}
> >
下载图片 下载图片
</div> </div>
<div <div
class="footerbtn btn2" class='footerbtn btn2'
on-click={() => { on-click={() => {
this.copyText(data); this.copyText(data)
}} }}
> >
复制文字 复制文字
</div> </div>
<div class="footerbtn btn3" on-click={() => this.goTop(data)}> <div class='footerbtn btn3' on-click={() => this.goTop(data)}>
{'置顶'} {'置顶'}
</div> </div>
</div> </div>
</div> </div>
); )
}, },
//置顶 // 置顶
goTop(row) { goTop(row) {
this.queryParams.memberCode = row.memberCode; this.queryParams.memberCode = row.memberCode
this.getSearch(); this.getSearch()
}, },
//点击节点 // 点击节点
NodeClick(e, data) {}, NodeClick(e, data) {},
//默认展开 // 默认展开
toggleExpand(data, val) { toggleExpand(data, val) {
if (Array.isArray(data)) { if (Array.isArray(data)) {
data.forEach((item) => { data.forEach((item) => {
this.$set(item, "expand", val); this.$set(item, 'expand', val)
if (item.children) { if (item.children) {
this.toggleExpand(item.children, val); this.toggleExpand(item.children, val)
} }
}); })
} else { } else {
this.$set(data, "expand", val); this.$set(data, 'expand', val)
if (data.children) { if (data.children) {
this.toggleExpand(data.children, val); this.toggleExpand(data.children, val)
} }
} }
}, },
collapse(list) { collapse(list) {
list.forEach((child) => { list.forEach((child) => {
if (child.expand) { if (child.expand) {
child.expand = false; child.expand = false
} }
child.children && this.collapse(child.children); child.children && this.collapse(child.children)
}); })
}, },
//展开 // 展开
onExpand(e, data) { onExpand(e, data) {
if ("expand" in data) { if ('expand' in data) {
data.expand = !data.expand; data.expand = !data.expand
if (!data.expand && data.children) { if (!data.expand && data.children) {
this.collapse(data.children); this.collapse(data.children)
} }
} else { } else {
this.$set(data, "expand", true); this.$set(data, 'expand', true)
} }
}, },
getSearch() { getSearch() {
getTjFramework(this.queryParams).then((res) => { getTjFramework(this.queryParams).then((res) => {
res.data.forEach((ele) => { res.data.forEach((ele) => {
ele.countryUrl2Base64 = ""; ele.countryUrl2Base64 = ''
ele.settleCountryUrl2Base64 = ""; ele.settleCountryUrl2Base64 = ''
ele.avatarUrlBase64 = ""; ele.avatarUrlBase64 = ''
}); })
this.data = res.data[0]; this.data = res.data[0]
this.toggleExpand(this.data, true); this.toggleExpand(this.data, true)
}); })
}, },
reChongzhi() { reChongzhi() {
this.queryParams = { this.queryParams = {
memberSettlePeriodId: "", //期数 memberSettlePeriodId: '', // 期数
memberCode: "", //会员编号 memberCode: '', // 会员编号
level: "", //代数 level: '' // 代数
}; }
this.getSearch(); this.getSearch()
}, }
}, }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -514,6 +509,7 @@ export default {
::v-deep .org-tree-container { ::v-deep .org-tree-container {
display: block; display: block;
background: rgba(1, 1, 1, 0) !important; background: rgba(1, 1, 1, 0) !important;
overflow-x: auto;
} }
::v-deep .rendercontent { ::v-deep .rendercontent {
.toprender { .toprender {

326
src/views/framework/recommend/tjjg3.vue
View File

@ -2,51 +2,47 @@
<div class="page"> <div class="page">
<topBar <topBar
v-if="topList.length > 0" v-if="topList.length > 0"
:topList="topList" :top-list="topList"
:moren="moren" :moren="moren"
></topBar> />
<div class="thetopbox"> <div class="thetopbox">
<el-form ref="form" :model="queryParams" label-width="100px"> <el-form ref="form" :model="queryParams" label-width="100px">
<el-row> <el-row>
<el-col :span="4"> <el-col :span="4">
<el-form-item :label="'会员编号'" prop="memberCode"> <el-form-item :label="'会员编号'" prop="memberCode">
<el-input <el-input
clearable
v-model="queryParams.memberCode" v-model="queryParams.memberCode"
></el-input></el-form-item clearable
></el-col> /></el-form-item></el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item :label="'结算期数'" prop="memberSettlePeriodId"> <el-form-item :label="'结算期数'" prop="memberSettlePeriodId">
<el-select <el-select
v-model="queryParams.memberSettlePeriodId"
clearable clearable
:placeholder="'请选择'" :placeholder="'请选择'"
v-model="queryParams.memberSettlePeriodId"
> >
<el-option <el-option
v-for="item in memberSettlePeriodList" v-for="item in memberSettlePeriodList"
:key="item.pkId" :key="item.pkId"
:label="item.settleDate" :label="item.settleDate"
:value="item.pkId" :value="item.pkId"
></el-option> </el-select></el-form-item /> </el-select></el-form-item></el-col>
></el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item :label="'展示层数'" prop="level"> <el-form-item :label="'展示层数'" prop="level">
<el-input <el-input
clearable
v-model="queryParams.level" v-model="queryParams.level"
></el-input></el-form-item clearable
></el-col> /></el-form-item></el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item :label="'是否固定'" prop="cantz"> <el-form-item :label="'是否固定'" prop="cantz">
<el-select clearable :placeholder="'请选择'" v-model="cantz"> <el-select v-model="cantz" clearable :placeholder="'请选择'">
<el-option <el-option
v-for="(item, index) in tzList" v-for="(item, index) in tzList"
:key="index" :key="index"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
></el-option> />
</el-select> </el-form-item </el-select> </el-form-item></el-col>
></el-col>
<el-col :span="4" style="margin-left: 30px"> <el-col :span="4" style="margin-left: 30px">
<div class="searchbox"> <div class="searchbox">
<el-button class="searchbtn" @click="getSearch"> {{ '搜索' }}</el-button> <el-button class="searchbtn" @click="getSearch"> {{ '搜索' }}</el-button>
@ -54,23 +50,22 @@
<el-button @click="goback"> {{ '返回' }}</el-button> <el-button @click="goback"> {{ '返回' }}</el-button>
</div> </div>
</el-col> </el-col>
</el-row></el-form </el-row></el-form>
>
</div> </div>
<div class="theorgtree"> <div class="theorgtree">
<div class="tree"> <div class="tree">
<div class="tree-content" @mousedown.stop="move" @wheel="handleWheel"> <div class="tree-content" @mousedown.stop="move" @wheel="handleWheel">
<div :style="{ transform: `scale(${scale})` }"> <div :style="{ transform: `scale(${scale})` }">
<vue2-org-tree <vue2-org-tree
ref="orgTree"
:data="data" :data="data"
collapsable collapsable
ref="orgTree" :render-content="renderContent"
v-bind="$listeners"
@on-expand="onExpand" @on-expand="onExpand"
@on-node-click="NodeClick" @on-node-click="NodeClick"
@on-node-mouseover="onMouseover" @on-node-mouseover="onMouseover"
@on-node-mouseout="onMouseout" @on-node-mouseout="onMouseout"
:renderContent="renderContent"
v-bind="$listeners"
/> />
</div> </div>
</div> </div>
@ -88,11 +83,11 @@
<img <img
class="img1" class="img1"
:src="'data:image/png;base64,' + treeData.avatarUrlBase64" :src="'data:image/png;base64,' + treeData.avatarUrlBase64"
/> >
<img <img
class="img2" class="img2"
:src="'data:image/png;base64,' + treeData.countryUrl2Base64" :src="'data:image/png;base64,' + treeData.countryUrl2Base64"
/> >
</div> </div>
<div class="centerbox"> <div class="centerbox">
<div class="lineboex"> <div class="lineboex">
@ -104,7 +99,7 @@
<div class="linecontent">{{ treeData.name }}</div> <div class="linecontent">{{ treeData.name }}</div>
</div> </div>
<div class="lineboex"> <div class="lineboex">
<div class="linetitle">{{'直推代数'}}</div> <div class="linetitle">{{ '直推代数' }}</div>
<div class="linecontent">{{ treeData.level }}</div> <div class="linecontent">{{ treeData.level }}</div>
</div> </div>
<div class="lineboex"> <div class="lineboex">
@ -117,15 +112,15 @@
:src=" :src="
'data:image/png;base64,' + treeData.settleCountryUrl2Base64 'data:image/png;base64,' + treeData.settleCountryUrl2Base64
" "
/> >
<div>{{'结算国家'}}</div> <div>{{ '结算国家' }}</div>
</div> </div>
</div> </div>
<div class="bottomrender"> <div class="bottomrender">
<div class="flexbox"> <div class="flexbox">
<div class="thetitle">{{ '类型' }}</div> <div class="thetitle">{{ '类型' }}</div>
<div class="linecontent">人数</div> <div class="linecontent">人数</div>
<div class="linecontent">{{ '业绩' }}({{isLocals()}})</div> <div class="linecontent">{{ '业绩' }}({{ isLocals() }})</div>
</div> </div>
<div class="flexbox"> <div class="flexbox">
<div class="thetitle">直推</div> <div class="thetitle">直推</div>
@ -135,7 +130,7 @@
<div class="flexbox"> <div class="flexbox">
<div class="thetitle">{{ '团队' }}</div> <div class="thetitle">{{ '团队' }}</div>
<div class="linecontent">{{ data.teamNumber }}</div> <div class="linecontent">{{ data.teamNumber }}</div>
<div class="linecontent">{{ data.teamHistoryPerformancePv }}</div> <div class="linecontent">{{ data.teamHistoryPerformancePv }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -146,10 +141,10 @@
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
<div class="copyContent" ref="copyContent" v-show="false"> <div v-show="false" ref="copyContent" class="copyContent">
<div>{{ '会员编号' }}：{{ treeData.memberCode }}</div> <div>{{ '会员编号' }}：{{ treeData.memberCode }}</div>
<div>{{ '会员姓名' }}：{{ treeData.name }}</div> <div>{{ '会员姓名' }}：{{ treeData.name }}</div>
<div>{{'直推代数'}}：{{ treeData.level }}</div> <div>{{ '直推代数' }}：{{ treeData.level }}</div>
<div>{{ '支付日期' }}：{{ treeData.payDate }}</div> <div>{{ '支付日期' }}：{{ treeData.payDate }}</div>
<div>{{ '类型' }}&nbsp;&nbsp;直推&nbsp;&nbsp;团队</div> <div>{{ '类型' }}&nbsp;&nbsp;直推&nbsp;&nbsp;团队</div>
<div> <div>
@ -158,8 +153,8 @@
}} }}
</div> </div>
<div> <div>
{{ '业绩' }}({{isLocals()}})&nbsp;&nbsp;{{ treeData.teamNumber }}&nbsp;&nbsp;{{ {{ '业绩' }}({{ isLocals() }})&nbsp;&nbsp;{{ treeData.teamNumber }}&nbsp;&nbsp;{{
treeData.teamHistoryPerformancePv treeData.teamHistoryPerformancePv
}} }}
</div> </div>
@ -168,44 +163,44 @@
</template> </template>
<script> <script>
import html2canvas from "html2canvas"; import html2canvas from 'html2canvas'
import topBar from "@/components/topBar"; import topBar from '@/components/topBar'
import { import {
getTjFramework, getTjFramework,
getMemberSettlePeriod, getMemberSettlePeriod,
getUrlBase, getUrlBase
} from "@/api/archityecture"; } from '@/api/archityecture'
import {isLocals} from "../../../utils/numberToCurrency"; import { isLocals } from '../../../utils/numberToCurrency'
export default { export default {
name: "Tjjg3", name: 'Tjjg3',
components: { components: {
topBar, topBar
}, },
data() { data() {
return { return {
moren: "tjjg3", moren: 'tjjg3',
topList: [ topList: [
{ {
name: '方案一', name: '方案一',
path: "tjjg", path: 'tjjg'
}, },
{ {
name: '方案二', name: '方案二',
path: "tjjg2", path: 'tjjg2'
}, },
{ {
name: '方案三', name: '方案三',
path: "tjjg3", path: 'tjjg3'
}, },
{ {
name: '方案四', name: '方案四',
path: "tjjg4", path: 'tjjg4'
}, }
], ],
queryParams: { queryParams: {
memberSettlePeriodId: "", //期数 memberSettlePeriodId: '', // 期数
memberCode: "", //会员编号 memberCode: '', // 会员编号
level: "", //代数 level: '' // 代数
}, },
basicSwitch: false, basicSwitch: false,
basicInfo: { id: null, label: null }, basicInfo: { id: null, label: null },
@ -214,100 +209,100 @@ export default {
ifShow: false, ifShow: false,
memberSettlePeriodList: [], memberSettlePeriodList: [],
tzList: [ tzList: [
{ value: 0, label: "是" }, { value: 0, label: '是' },
{ value: 1, label: "否" }, { value: 1, label: '否' }
], ],
cantz: 1, //0不可拖拽,1可拖拽 cantz: 1, // 0不可拖拽,1可拖拽
scale: 1, scale: 1
}; }
}, },
created() { created() {
this.getSearch(); this.getSearch()
this.getAvarerInfo(); this.getAvarerInfo()
}, },
methods: { methods: {
handleWheel(event) { handleWheel(event) {
if (this.cantz == 1) { if (this.cantz == 1) {
event.preventDefault(); event.preventDefault()
const delta = Math.sign(event.deltaY); const delta = Math.sign(event.deltaY)
const newScale = this.scale - delta * 0.1; const newScale = this.scale - delta * 0.1
this.scale = Math.max(0.01, Math.min(newScale, 10)); this.scale = Math.max(0.01, Math.min(newScale, 10))
} }
}, },
//拖拽移动 // 拖拽移动
move(e) { move(e) {
if (this.cantz == 0) { if (this.cantz == 0) {
return; return
} }
const odiv = e.currentTarget; // 获取元素 const odiv = e.currentTarget // 获取元素
// 算出鼠标相对元素的位置 // 算出鼠标相对元素的位置
const disX = e.clientX - odiv.offsetLeft; const disX = e.clientX - odiv.offsetLeft
const disY = e.clientY - odiv.offsetTop; const disY = e.clientY - odiv.offsetTop
document.onmousemove = (e) => { document.onmousemove = (e) => {
// 鼠标按下并移动的事件 // 鼠标按下并移动的事件
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置 // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
const left = e.clientX - disX; const left = e.clientX - disX
const top = e.clientY - disY; const top = e.clientY - disY
// 绑定元素位置到positionX和positionY上面 // 绑定元素位置到positionX和positionY上面
this.positionX = top; this.positionX = top
this.positionY = left; this.positionY = left
// 移动当前元素 // 移动当前元素
odiv.style.left = left + "px"; odiv.style.left = left + 'px'
odiv.style.top = top + "px"; odiv.style.top = top + 'px'
}; }
document.onmouseup = () => { document.onmouseup = () => {
document.onmousemove = null; document.onmousemove = null
document.onmouseup = null; document.onmouseup = null
}; }
}, },
isLocals, isLocals,
copyText() { copyText() {
const copyContent = this.$refs.copyContent; const copyContent = this.$refs.copyContent
const textLines = Array.from(copyContent.querySelectorAll("div")).map( const textLines = Array.from(copyContent.querySelectorAll('div')).map(
(div) => div.textContent.trim() (div) => div.textContent.trim()
); )
const text = textLines.join("\n"); const text = textLines.join('\n')
const tempInput = document.createElement("textarea"); const tempInput = document.createElement('textarea')
tempInput.value = text; tempInput.value = text
document.body.appendChild(tempInput); document.body.appendChild(tempInput)
tempInput.select(); tempInput.select()
try { try {
document.execCommand("copy"); document.execCommand('copy')
this.$message({ this.$message({
message: '复制成功', message: '复制成功',
type: "success", type: 'success'
}); })
} catch (error) { } catch (error) {
this.$message({ this.$message({
message: "复制失败", message: '复制失败',
type: "warning", type: 'warning'
}); })
} }
tempInput.remove(); tempInput.remove()
window.getSelection().removeAllRanges(); window.getSelection().removeAllRanges()
}, },
//复制图片 // 复制图片
async downloadImage() { async downloadImage() {
const element = this.$refs.htmlContent; const element = this.$refs.htmlContent
// 使用html2canvas将节点生成为图片 // 使用html2canvas将节点生成为图片
const canvas = await html2canvas(element); const canvas = await html2canvas(element)
const image = canvas.toDataURL("image/png"); const image = canvas.toDataURL('image/png')
// 复制图片到剪贴板 // 复制图片到剪贴板
try { try {
await navigator.clipboard.write([ await navigator.clipboard.write([
new ClipboardItem({ new ClipboardItem({
"image/png": await new Promise((resolve) => 'image/png': await new Promise((resolve) =>
canvas.toBlob(resolve, "image/png") canvas.toBlob(resolve, 'image/png')
), )
}), })
]); ])
this.$message({ this.$message({
message: '复制成功', message: '复制成功',
type: "success", type: 'success'
}); })
} catch (error) { } catch (error) {
// this.$message({ // this.$message({
// message: "复制失败", // message: "复制失败",
@ -315,59 +310,59 @@ export default {
// }); // });
} }
// 下载图片到本地 // 下载图片到本地
const link = document.createElement("a"); const link = document.createElement('a')
link.href = image; link.href = image
link.download = "image.png"; link.download = 'image.png'
link.click(); link.click()
}, },
getAvarerInfo() { getAvarerInfo() {
getMemberSettlePeriod().then((res) => { getMemberSettlePeriod().then((res) => {
this.memberSettlePeriodList = res.data; this.memberSettlePeriodList = res.data
this.memberSettlePeriodList.forEach((ele) => { this.memberSettlePeriodList.forEach((ele) => {
if (ele.isThisDay == 0) { if (ele.isThisDay == 0) {
this.queryParams.memberSettlePeriodId = ele.pkId; this.queryParams.memberSettlePeriodId = ele.pkId
} }
}); })
}); })
}, },
//返回 // 返回
goback() { goback() {
this.queryParams.memberCode = this.data.parentMemberCode; this.queryParams.memberCode = this.data.parentMemberCode
this.getSearch(); this.getSearch()
}, },
//鼠标移入 // 鼠标移入
onMouseover(e, data) { onMouseover(e, data) {
this.basicInfo = data; this.basicInfo = data
this.basicSwitch = true; this.basicSwitch = true
}, },
//鼠标移出 // 鼠标移出
onMouseout(e, data) { onMouseout(e, data) {
this.basicSwitch = false; this.basicSwitch = false
}, },
//渲染节点 // 渲染节点
renderContent(h, data) { renderContent(h, data) {
return ( return (
<div class="xrBox"> <div class='xrBox'>
<div class="neibox" on-click={() => this.showPover(data)}> <div class='neibox' on-click={() => this.showPover(data)}>
<div class="topbox"> <div class='topbox'>
<img src={data.avatarUrl}></img> <img src={data.avatarUrl}></img>
</div> </div>
<div class="centerbox"> <div class='centerbox'>
<div class="cflexbox"> <div class='cflexbox'>
<img src={data.countryUrl}></img> <img src={data.countryUrl}></img>
<div class="matitle">{data.memberCode}</div> <div class='matitle'>{data.memberCode}</div>
</div> </div>
<div class="cflexbox"> <div class='cflexbox'>
<img src={data.settleCountryUrl2}></img> <img src={data.settleCountryUrl2}></img>
<div class="matitle">{data.name}</div> <div class='matitle'>{data.name}</div>
</div> </div>
</div> </div>
<div class="footerbox"> <div class='footerbox'>
{/* 阻止冒泡事件 */} {/* 阻止冒泡事件 */}
<div <div
class="ftopbtn" class='ftopbtn'
on-click={() => { on-click={() => {
event.stopPropagation(), this.goTop(data); event.stopPropagation(), this.goTop(data)
}} }}
> >
{'置顶'} {'置顶'}
@ -375,80 +370,80 @@ export default {
</div> </div>
</div> </div>
</div> </div>
); )
}, },
showPover(row) { showPover(row) {
getUrlBase({ getUrlBase({
countryUrl2: row.countryUrl2, countryUrl2: row.countryUrl2,
settleCountryUrl2: row.settleCountryUrl2, settleCountryUrl2: row.settleCountryUrl2,
avatarUrl: row.avatarUrl, avatarUrl: row.avatarUrl
}).then((res) => { }).then((res) => {
this.treeData = row; this.treeData = row
this.treeData.countryUrl2Base64 = res.countryUrl2Base64; this.treeData.countryUrl2Base64 = res.countryUrl2Base64
this.treeData.settleCountryUrl2Base64 = res.settleCountryUrl2Base64; this.treeData.settleCountryUrl2Base64 = res.settleCountryUrl2Base64
this.treeData.avatarUrlBase64 = res.avatarUrlBase64; this.treeData.avatarUrlBase64 = res.avatarUrlBase64
this.ifShow = true; this.ifShow = true
}); })
}, },
//置顶 // 置顶
goTop(row) { goTop(row) {
this.queryParams.memberCode = row.memberCode; this.queryParams.memberCode = row.memberCode
this.getSearch(); this.getSearch()
}, },
//点击节点 // 点击节点
NodeClick(e, data) {}, NodeClick(e, data) {},
//默认展开 // 默认展开
toggleExpand(data, val) { toggleExpand(data, val) {
if (Array.isArray(data)) { if (Array.isArray(data)) {
data.forEach((item) => { data.forEach((item) => {
this.$set(item, "expand", val); this.$set(item, 'expand', val)
if (item.children) { if (item.children) {
this.toggleExpand(item.children, val); this.toggleExpand(item.children, val)
} }
}); })
} else { } else {
this.$set(data, "expand", val); this.$set(data, 'expand', val)
if (data.children) { if (data.children) {
this.toggleExpand(data.children, val); this.toggleExpand(data.children, val)
} }
} }
}, },
collapse(list) { collapse(list) {
list.forEach((child) => { list.forEach((child) => {
if (child.expand) { if (child.expand) {
child.expand = false; child.expand = false
} }
child.children && this.collapse(child.children); child.children && this.collapse(child.children)
}); })
}, },
//展开 // 展开
onExpand(e, data) { onExpand(e, data) {
if ("expand" in data) { if ('expand' in data) {
data.expand = !data.expand; data.expand = !data.expand
if (!data.expand && data.children) { if (!data.expand && data.children) {
this.collapse(data.children); this.collapse(data.children)
} }
} else { } else {
this.$set(data, "expand", true); this.$set(data, 'expand', true)
} }
}, },
getSearch() { getSearch() {
getTjFramework(this.queryParams).then((res) => { getTjFramework(this.queryParams).then((res) => {
this.data = res.data[0]; this.data = res.data[0]
this.toggleExpand(this.data, true); this.toggleExpand(this.data, true)
}); })
}, },
reChongzhi() { reChongzhi() {
this.queryParams = { this.queryParams = {
memberSettlePeriodId: "", //期数 memberSettlePeriodId: '', // 期数
memberCode: "", //会员编号 memberCode: '', // 会员编号
level: "", //代数 level: '' // 代数
}; }
this.getSearch(); this.getSearch()
}, }
}, }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -556,6 +551,7 @@ export default {
::v-deep .org-tree-container { ::v-deep .org-tree-container {
display: block; display: block;
background: rgba(1, 1, 1, 0) !important; background: rgba(1, 1, 1, 0) !important;
overflow-x: auto;
} }
::v-deep .rendercontent { ::v-deep .rendercontent {
.toprender { .toprender {

324
src/views/framework/recommend/tjjg4.vue
View File

@ -2,51 +2,47 @@
<div class="page"> <div class="page">
<topBar <topBar
v-if="topList.length > 0" v-if="topList.length > 0"
:topList="topList" :top-list="topList"
:moren="moren" :moren="moren"
></topBar> />
<div class="thetopbox"> <div class="thetopbox">
<el-form ref="form" :model="queryParams" label-width="100px"> <el-form ref="form" :model="queryParams" label-width="100px">
<el-row> <el-row>
<el-col :span="4"> <el-col :span="4">
<el-form-item :label="'会员编号'" prop="memberCode"> <el-form-item :label="'会员编号'" prop="memberCode">
<el-input <el-input
clearable
v-model="queryParams.memberCode" v-model="queryParams.memberCode"
></el-input></el-form-item clearable
></el-col> /></el-form-item></el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item :label="'结算期数'" prop="memberSettlePeriodId"> <el-form-item :label="'结算期数'" prop="memberSettlePeriodId">
<el-select <el-select
v-model="queryParams.memberSettlePeriodId"
clearable clearable
:placeholder="'请选择'" :placeholder="'请选择'"
v-model="queryParams.memberSettlePeriodId"
> >
<el-option <el-option
v-for="item in memberSettlePeriodList" v-for="item in memberSettlePeriodList"
:key="item.pkId" :key="item.pkId"
:label="item.settleDate" :label="item.settleDate"
:value="item.pkId" :value="item.pkId"
></el-option> </el-select></el-form-item /> </el-select></el-form-item></el-col>
></el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item :label="'展示层数'" prop="level"> <el-form-item :label="'展示层数'" prop="level">
<el-input <el-input
clearable
v-model="queryParams.level" v-model="queryParams.level"
></el-input></el-form-item clearable
></el-col> /></el-form-item></el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item :label="'是否固定'" prop="cantz"> <el-form-item :label="'是否固定'" prop="cantz">
<el-select clearable :placeholder="'请选择'" v-model="cantz"> <el-select v-model="cantz" clearable :placeholder="'请选择'">
<el-option <el-option
v-for="(item, index) in tzList" v-for="(item, index) in tzList"
:key="index" :key="index"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
></el-option> />
</el-select> </el-form-item </el-select> </el-form-item></el-col>
></el-col>
<el-col :span="4" style="margin-left: 30px"> <el-col :span="4" style="margin-left: 30px">
<div class="searchbox"> <div class="searchbox">
<el-button class="searchbtn" @click="getSearch"> {{ '搜索' }}</el-button> <el-button class="searchbtn" @click="getSearch"> {{ '搜索' }}</el-button>
@ -54,23 +50,22 @@
<el-button @click="goback"> {{ '返回' }}</el-button> <el-button @click="goback"> {{ '返回' }}</el-button>
</div> </div>
</el-col> </el-col>
</el-row></el-form </el-row></el-form>
>
</div> </div>
<div class="theorgtree"> <div class="theorgtree">
<div class="tree"> <div class="tree">
<div class="tree-content" @mousedown.stop="move" @wheel="handleWheel"> <div class="tree-content" @mousedown.stop="move" @wheel="handleWheel">
<div :style="{ transform: `scale(${scale})` }"> <div :style="{ transform: `scale(${scale})` }">
<vue2-org-tree <vue2-org-tree
ref="orgTree"
:data="data" :data="data"
collapsable collapsable
ref="orgTree" :render-content="renderContent"
v-bind="$listeners"
@on-expand="onExpand" @on-expand="onExpand"
@on-node-click="NodeClick" @on-node-click="NodeClick"
@on-node-mouseover="onMouseover" @on-node-mouseover="onMouseover"
@on-node-mouseout="onMouseout" @on-node-mouseout="onMouseout"
:renderContent="renderContent"
v-bind="$listeners"
/> />
</div> </div>
</div> </div>
@ -88,11 +83,11 @@
<img <img
class="img1" class="img1"
:src="'data:image/png;base64,' + treeData.avatarUrlBase64" :src="'data:image/png;base64,' + treeData.avatarUrlBase64"
/> >
<img <img
class="img2" class="img2"
:src="'data:image/png;base64,' + treeData.countryUrl2Base64" :src="'data:image/png;base64,' + treeData.countryUrl2Base64"
/> >
</div> </div>
<div class="centerbox"> <div class="centerbox">
<div class="lineboex"> <div class="lineboex">
@ -104,7 +99,7 @@
<div class="linecontent">{{ treeData.name }}</div> <div class="linecontent">{{ treeData.name }}</div>
</div> </div>
<div class="lineboex"> <div class="lineboex">
<div class="linetitle">{{'直推代数'}}</div> <div class="linetitle">{{ '直推代数' }}</div>
<div class="linecontent">{{ treeData.level }}</div> <div class="linecontent">{{ treeData.level }}</div>
</div> </div>
<div class="lineboex"> <div class="lineboex">
@ -117,8 +112,8 @@
:src=" :src="
'data:image/png;base64,' + treeData.settleCountryUrl2Base64 'data:image/png;base64,' + treeData.settleCountryUrl2Base64
" "
/> >
<div>{{'结算国家'}}</div> <div>{{ '结算国家' }}</div>
</div> </div>
</div> </div>
<div class="bottomrender"> <div class="bottomrender">
@ -135,7 +130,7 @@
<div class="flexbox"> <div class="flexbox">
<div class="thetitle">{{ '团队' }}</div> <div class="thetitle">{{ '团队' }}</div>
<div class="linecontent">{{ data.teamNumber }}</div> <div class="linecontent">{{ data.teamNumber }}</div>
<div class="linecontent">{{ data.teamHistoryPerformancePv }}</div> <div class="linecontent">{{ data.teamHistoryPerformancePv }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -146,10 +141,10 @@
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
<div class="copyContent" ref="copyContent" v-show="false"> <div v-show="false" ref="copyContent" class="copyContent">
<div>{{ '会员编号' }}：{{ treeData.memberCode }}</div> <div>{{ '会员编号' }}：{{ treeData.memberCode }}</div>
<div>{{ '会员姓名' }}：{{ treeData.name }}</div> <div>{{ '会员姓名' }}：{{ treeData.name }}</div>
<div>{{'直推代数'}}：{{ treeData.level }}</div> <div>{{ '直推代数' }}：{{ treeData.level }}</div>
<div>{{ '支付日期' }}：{{ treeData.payDate }}</div> <div>{{ '支付日期' }}：{{ treeData.payDate }}</div>
<div>{{ '类型' }}&nbsp;&nbsp;直推&nbsp;&nbsp;团队</div> <div>{{ '类型' }}&nbsp;&nbsp;直推&nbsp;&nbsp;团队</div>
<div> <div>
@ -158,53 +153,53 @@
}} }}
</div> </div>
<div> <div>
{{ '业绩'}}({{ isLocals() }})&nbsp;&nbsp;{{ {{ '业绩' }}({{ isLocals() }})&nbsp;&nbsp;{{
treeData.teamNumber treeData.teamNumber
}}&nbsp;&nbsp;{{ treeData.teamHistoryPerformancePv }} }}&nbsp;&nbsp;{{ treeData.teamHistoryPerformancePv }}
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import html2canvas from "html2canvas"; import html2canvas from 'html2canvas'
import topBar from "@/components/topBar"; import topBar from '@/components/topBar'
import { import {
getTjFramework, getTjFramework,
getMemberSettlePeriod, getMemberSettlePeriod,
getUrlBase, getUrlBase
} from "@/api/archityecture"; } from '@/api/archityecture'
import { isLocals } from "../../../utils/numberToCurrency"; import { isLocals } from '../../../utils/numberToCurrency'
export default { export default {
name: "Tjjg4", name: 'Tjjg4',
components: { components: {
topBar, topBar
}, },
data() { data() {
return { return {
moren: "tjjg4", moren: 'tjjg4',
topList: [ topList: [
{ {
name: '方案一', name: '方案一',
path: "tjjg", path: 'tjjg'
}, },
{ {
name: '方案二', name: '方案二',
path: "tjjg2", path: 'tjjg2'
}, },
{ {
name: '方案三', name: '方案三',
path: "tjjg3", path: 'tjjg3'
}, },
{ {
name: '方案四', name: '方案四',
path: "tjjg4", path: 'tjjg4'
}, }
], ],
queryParams: { queryParams: {
memberSettlePeriodId: "", //期数 memberSettlePeriodId: '', // 期数
memberCode: "", //会员编号 memberCode: '', // 会员编号
level: "", //代数 level: '' // 代数
}, },
basicSwitch: false, basicSwitch: false,
basicInfo: { id: null, label: null }, basicInfo: { id: null, label: null },
@ -213,99 +208,99 @@ export default {
ifShow: false, ifShow: false,
memberSettlePeriodList: [], memberSettlePeriodList: [],
tzList: [ tzList: [
{ value: 0, label: "是" }, { value: 0, label: '是' },
{ value: 1, label: "否" }, { value: 1, label: '否' }
], ],
cantz: 1, //0不可拖拽,1可拖拽 cantz: 1, // 0不可拖拽,1可拖拽
scale: 1, scale: 1
}; }
}, },
created() { created() {
this.getSearch(); this.getSearch()
this.getAvarerInfo(); this.getAvarerInfo()
}, },
methods: { methods: {
//拖拽移动 // 拖拽移动
move(e) { move(e) {
if (this.cantz == 0) { if (this.cantz == 0) {
return; return
} }
const odiv = e.currentTarget; // 获取元素 const odiv = e.currentTarget // 获取元素
// 算出鼠标相对元素的位置 // 算出鼠标相对元素的位置
const disX = e.clientX - odiv.offsetLeft; const disX = e.clientX - odiv.offsetLeft
const disY = e.clientY - odiv.offsetTop; const disY = e.clientY - odiv.offsetTop
document.onmousemove = (e) => { document.onmousemove = (e) => {
// 鼠标按下并移动的事件 // 鼠标按下并移动的事件
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置 // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
const left = e.clientX - disX; const left = e.clientX - disX
const top = e.clientY - disY; const top = e.clientY - disY
// 绑定元素位置到positionX和positionY上面 // 绑定元素位置到positionX和positionY上面
this.positionX = top; this.positionX = top
this.positionY = left; this.positionY = left
// 移动当前元素 // 移动当前元素
odiv.style.left = left + "px"; odiv.style.left = left + 'px'
odiv.style.top = top + "px"; odiv.style.top = top + 'px'
}; }
document.onmouseup = () => { document.onmouseup = () => {
document.onmousemove = null; document.onmousemove = null
document.onmouseup = null; document.onmouseup = null
}; }
}, },
handleWheel(event) { handleWheel(event) {
if (this.cantz == 1) { if (this.cantz == 1) {
event.preventDefault(); event.preventDefault()
const delta = Math.sign(event.deltaY); const delta = Math.sign(event.deltaY)
const newScale = this.scale - delta * 0.1; const newScale = this.scale - delta * 0.1
this.scale = Math.max(0.01, Math.min(newScale, 10)); this.scale = Math.max(0.01, Math.min(newScale, 10))
} }
}, },
isLocals, isLocals,
copyText() { copyText() {
const copyContent = this.$refs.copyContent; const copyContent = this.$refs.copyContent
const textLines = Array.from(copyContent.querySelectorAll("div")).map( const textLines = Array.from(copyContent.querySelectorAll('div')).map(
(div) => div.textContent.trim() (div) => div.textContent.trim()
); )
const text = textLines.join("\n"); const text = textLines.join('\n')
const tempInput = document.createElement("textarea"); const tempInput = document.createElement('textarea')
tempInput.value = text; tempInput.value = text
document.body.appendChild(tempInput); document.body.appendChild(tempInput)
tempInput.select(); tempInput.select()
try { try {
document.execCommand("copy"); document.execCommand('copy')
this.$message({ this.$message({
message: '复制成功', message: '复制成功',
type: "success", type: 'success'
}); })
} catch (error) { } catch (error) {
this.$message({ this.$message({
message: "复制失败", message: '复制失败',
type: "warning", type: 'warning'
}); })
} }
tempInput.remove(); tempInput.remove()
window.getSelection().removeAllRanges(); window.getSelection().removeAllRanges()
}, },
async downloadImage() { async downloadImage() {
const element = this.$refs.htmlContent; const element = this.$refs.htmlContent
// 使用html2canvas将节点生成为图片 // 使用html2canvas将节点生成为图片
const canvas = await html2canvas(element); const canvas = await html2canvas(element)
const image = canvas.toDataURL("image/png"); const image = canvas.toDataURL('image/png')
// 复制图片到剪贴板 // 复制图片到剪贴板
try { try {
await navigator.clipboard.write([ await navigator.clipboard.write([
new ClipboardItem({ new ClipboardItem({
"image/png": await new Promise((resolve) => 'image/png': await new Promise((resolve) =>
canvas.toBlob(resolve, "image/png") canvas.toBlob(resolve, 'image/png')
), )
}), })
]); ])
this.$message({ this.$message({
message: '复制成功', message: '复制成功',
type: "success", type: 'success'
}); })
} catch (error) { } catch (error) {
// this.$message({ // this.$message({
// message: "复制失败", // message: "复制失败",
@ -313,59 +308,59 @@ export default {
// }); // });
} }
// 下载图片到本地 // 下载图片到本地
const link = document.createElement("a"); const link = document.createElement('a')
link.href = image; link.href = image
link.download = "image.png"; link.download = 'image.png'
link.click(); link.click()
}, },
getAvarerInfo() { getAvarerInfo() {
getMemberSettlePeriod().then((res) => { getMemberSettlePeriod().then((res) => {
this.memberSettlePeriodList = res.data; this.memberSettlePeriodList = res.data
this.memberSettlePeriodList.forEach((ele) => { this.memberSettlePeriodList.forEach((ele) => {
if (ele.isThisDay == 0) { if (ele.isThisDay == 0) {
this.queryParams.memberSettlePeriodId = ele.pkId; this.queryParams.memberSettlePeriodId = ele.pkId
} }
}); })
}); })
}, },
//返回 // 返回
goback() { goback() {
this.queryParams.memberCode = this.data.parentMemberCode; this.queryParams.memberCode = this.data.parentMemberCode
this.getSearch(); this.getSearch()
}, },
//鼠标移入 // 鼠标移入
onMouseover(e, data) { onMouseover(e, data) {
this.basicInfo = data; this.basicInfo = data
this.basicSwitch = true; this.basicSwitch = true
}, },
//鼠标移出 // 鼠标移出
onMouseout(e, data) { onMouseout(e, data) {
this.basicSwitch = false; this.basicSwitch = false
}, },
//渲染节点 // 渲染节点
renderContent(h, data) { renderContent(h, data) {
return ( return (
<div class="xrBox"> <div class='xrBox'>
<div class="neibox" on-click={() => this.showPover(data)}> <div class='neibox' on-click={() => this.showPover(data)}>
<div class="topbox"> <div class='topbox'>
<img src={data.avatarUrl}></img> <img src={data.avatarUrl}></img>
</div> </div>
<div class="centerbox"> <div class='centerbox'>
<div class="cflexbox"> <div class='cflexbox'>
<img src={data.countryUrl}></img> <img src={data.countryUrl}></img>
<div class="matitle">{data.memberCode}</div> <div class='matitle'>{data.memberCode}</div>
</div> </div>
<div class="cflexbox"> <div class='cflexbox'>
<img src={data.settleCountryUrl2}></img> <img src={data.settleCountryUrl2}></img>
<div class="matitle">{data.name}</div> <div class='matitle'>{data.name}</div>
</div> </div>
</div> </div>
<div class="footerbox"> <div class='footerbox'>
{/* 阻止冒泡事件 */} {/* 阻止冒泡事件 */}
<div <div
class="ftopbtn" class='ftopbtn'
on-click={() => { on-click={() => {
event.stopPropagation(), this.goTop(data); event.stopPropagation(), this.goTop(data)
}} }}
> >
{'置顶'} {'置顶'}
@ -373,81 +368,81 @@ export default {
</div> </div>
</div> </div>
</div> </div>
); )
}, },
showPover(row) { showPover(row) {
getUrlBase({ getUrlBase({
countryUrl2: row.countryUrl2, countryUrl2: row.countryUrl2,
settleCountryUrl2: row.settleCountryUrl2, settleCountryUrl2: row.settleCountryUrl2,
avatarUrl: row.avatarUrl, avatarUrl: row.avatarUrl
}).then((res) => { }).then((res) => {
this.treeData = row; this.treeData = row
this.treeData.countryUrl2Base64 = res.countryUrl2Base64; this.treeData.countryUrl2Base64 = res.countryUrl2Base64
this.treeData.settleCountryUrl2Base64 = res.settleCountryUrl2Base64; this.treeData.settleCountryUrl2Base64 = res.settleCountryUrl2Base64
this.treeData.avatarUrlBase64 = res.avatarUrlBase64; this.treeData.avatarUrlBase64 = res.avatarUrlBase64
this.ifShow = true; this.ifShow = true
}); })
}, },
//置顶 // 置顶
goTop(row) { goTop(row) {
this.queryParams.memberCode = row.memberCode; this.queryParams.memberCode = row.memberCode
this.getSearch(); this.getSearch()
}, },
//点击节点 // 点击节点
NodeClick(e, data) {}, NodeClick(e, data) {},
//默认展开 // 默认展开
toggleExpand(data, val) { toggleExpand(data, val) {
if (Array.isArray(data)) { if (Array.isArray(data)) {
data.forEach((item) => { data.forEach((item) => {
this.$set(item, "expand", val); this.$set(item, 'expand', val)
if (item.children) { if (item.children) {
this.toggleExpand(item.children, val); this.toggleExpand(item.children, val)
} }
}); })
} else { } else {
this.$set(data, "expand", val); this.$set(data, 'expand', val)
if (data.children) { if (data.children) {
this.toggleExpand(data.children, val); this.toggleExpand(data.children, val)
} }
} }
}, },
collapse(list) { collapse(list) {
list.forEach((child) => { list.forEach((child) => {
if (child.expand) { if (child.expand) {
child.expand = false; child.expand = false
} }
child.children && this.collapse(child.children); child.children && this.collapse(child.children)
}); })
}, },
//展开 // 展开
onExpand(e, data) { onExpand(e, data) {
if ("expand" in data) { if ('expand' in data) {
data.expand = !data.expand; data.expand = !data.expand
if (!data.expand && data.children) { if (!data.expand && data.children) {
this.collapse(data.children); this.collapse(data.children)
} }
} else { } else {
this.$set(data, "expand", true); this.$set(data, 'expand', true)
} }
}, },
getSearch() { getSearch() {
getTjFramework(this.queryParams).then((res) => { getTjFramework(this.queryParams).then((res) => {
this.data = res.data[0]; this.data = res.data[0]
//默认是否展开 // 默认是否展开
this.toggleExpand(this.data, false); this.toggleExpand(this.data, false)
}); })
}, },
reChongzhi() { reChongzhi() {
this.queryParams = { this.queryParams = {
memberSettlePeriodId: "", //期数 memberSettlePeriodId: '', // 期数
memberCode: "", //会员编号 memberCode: '', // 会员编号
level: "", //代数 level: '' // 代数
}; }
this.getSearch(); this.getSearch()
}, }
}, }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -555,6 +550,7 @@ export default {
} }
::v-deep .org-tree-container { ::v-deep .org-tree-container {
display: block; display: block;
overflow-x: auto;
} }
::v-deep .rendercontent { ::v-deep .rendercontent {
.toprender { .toprender {