feat(azjg5): 安置架构 方案五改造
This commit is contained in:
woody
parent
cc3ddf7ed5
commit
b9c8241825
|
|
@ -50,12 +50,12 @@
|
|||
</el-row></el-form>
|
||||
</div>
|
||||
<div class="theorgtree">
|
||||
<!-- <div class="lefttop">
|
||||
<div class="single" v-for="(item, index) in avaerInfoList" :key="index">
|
||||
<img :src="item.value" alt="" />
|
||||
<div class="singletitle">{{ item.name }}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="lefttop">
|
||||
<div v-for="(item, index) in rangeList" :key="index" class="single">
|
||||
<div class="colorbox" :style="{background: item.color}" />
|
||||
<div class="singletitle">{{ item.gradeName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree">
|
||||
<div class="tree-content" @mousedown.stop="move" @wheel="handleWheel">
|
||||
<div :style="{ transform: `scale(${scale})` }">
|
||||
|
|
@ -74,159 +74,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog
|
||||
:visible.sync="ifShow"
|
||||
:close-on-click-modal="false"
|
||||
width="516px"
|
||||
>
|
||||
<div class="rendercontent">
|
||||
<div ref="htmlContent">
|
||||
<div class="toprender">
|
||||
<div class="leftimg">
|
||||
<img
|
||||
class="img1"
|
||||
:src="'data:image/png;base64,' + treeData.avatarUrlBase64"
|
||||
>
|
||||
<img
|
||||
class="img2"
|
||||
:src="'data:image/png;base64,' + treeData.countryUrl2Base64"
|
||||
>
|
||||
</div>
|
||||
<div class="centerbox">
|
||||
<div class="lineboex">
|
||||
<div class="linetitle">{{ '会员编号' }}</div>
|
||||
<div class="linecontent">{{ treeData.memberCode }}</div>
|
||||
</div>
|
||||
<div class="lineboex">
|
||||
<div class="linetitle">{{ '会员姓名' }}</div>
|
||||
<div class="linecontent">{{ treeData.name }}</div>
|
||||
</div>
|
||||
<div class="lineboex">
|
||||
<div class="linetitle">安置部门</div>
|
||||
<div class="linecontent">{{ `第${treeData.placeDept}部门` }}</div>
|
||||
</div>
|
||||
<div class="lineboex">
|
||||
<div class="linetitle">{{ '支付日期' }}</div>
|
||||
<div class="linecontent">{{ treeData.payDate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightimg">
|
||||
<img
|
||||
:src="
|
||||
'data:image/png;base64,' + treeData.settleCountryUrl2Base64
|
||||
"
|
||||
>
|
||||
<div>{{ '结算国家' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottomrender">
|
||||
<div class="flexbox">
|
||||
<div class="thetitle">{{ '业绩' }}({{ isLocals() }})</div>
|
||||
<div class="linecontent">{{ '真实新增' }}</div>
|
||||
<div class="linecontent">首购新增</div>
|
||||
<div class="linecontent">复购新增</div>
|
||||
<div class="linecontent">真实累计</div>
|
||||
<div class="linecontent">首购累计</div>
|
||||
<div class="linecontent">复购累计</div>
|
||||
<div class="linecontent">首购结余</div>
|
||||
<div class="linecontent">复购结余</div>
|
||||
<!-- <div class="linecontent">新増套数</div>
|
||||
<div class="linecontent">累计套数</div> -->
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="thetitle">左区</div>
|
||||
<div class="linecontent">{{ treeData.leftRealNewPv }}</div>
|
||||
<div class="linecontent">{{ treeData.leftFirstPurchaseAdd }}</div>
|
||||
<div class="linecontent">
|
||||
{{ treeData.leftRepeatPurchaseAdd }}
|
||||
</div>
|
||||
<div class="linecontent">{{ treeData.leftRealTotal }}</div>
|
||||
<div class="linecontent">{{ treeData.leftFirstTotal }}</div>
|
||||
<div class="linecontent">
|
||||
{{ treeData.leftRepeatPurchaseTotal }}
|
||||
</div>
|
||||
<div class="linecontent">{{ treeData.leftFirstSurplus }}</div>
|
||||
<div class="linecontent">
|
||||
{{ treeData.leftRepeatPurchaseSurplus }}
|
||||
</div>
|
||||
<!-- <div class="linecontent">{{ treeData.aNewBox || 0 }}</div>
|
||||
<div class="linecontent">{{ treeData.aSumBox || 0 }}</div> -->
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="thetitle">右区</div>
|
||||
<div class="linecontent">{{ treeData.rightRealNewPv }}</div>
|
||||
<div class="linecontent">
|
||||
{{ treeData.rightFirstPurchaseAdd }}
|
||||
</div>
|
||||
<div class="linecontent">
|
||||
{{ treeData.rightRepeatPurchaseAdd }}
|
||||
</div>
|
||||
<div class="linecontent">{{ treeData.rightRealTotal }}</div>
|
||||
<div class="linecontent">{{ treeData.rightFirstTotal }}</div>
|
||||
<div class="linecontent">
|
||||
{{ treeData.rightRepeatPurchaseTotal }}
|
||||
</div>
|
||||
<div class="linecontent">{{ treeData.rightFirstSurplus }}</div>
|
||||
<div class="linecontent">
|
||||
{{ treeData.rightRepeatPurchaseSurplus }}
|
||||
</div>
|
||||
<!-- <div class="linecontent">{{ treeData.bNewBox || 0 }}</div>
|
||||
<div class="linecontent">{{ treeData.bSumBox || 0 }}</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footerbox">
|
||||
<div class="footerbtn btn1" @click="downloadImage">下载图片</div>
|
||||
<div class="footerbtn btn2" @click="copyText">复制文字</div>
|
||||
<!-- <div class="footerbtn btn3" @click="goTop(treeData)">置顶</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div v-show="false" ref="copyContent" class="copyContent">
|
||||
<div>{{ '会员编号' }}：{{ treeData.memberCode }}</div>
|
||||
<div>{{ '会员姓名' }}：{{ treeData.name }}</div>
|
||||
<div>{{ '支付日期' }}：{{ treeData.payDate }}</div>
|
||||
<div>{{ '业绩' }}({{ isLocals() }}) 左区 右区</div>
|
||||
<div>
|
||||
真实新增 {{ treeData.leftRealNewPv }} {{
|
||||
treeData.rightRealNewPv
|
||||
}}
|
||||
</div>
|
||||
<div>
|
||||
首购新增 {{ treeData.leftFirstPurchaseAdd }} {{
|
||||
treeData.rightFirstPurchaseAdd
|
||||
}}
|
||||
</div>
|
||||
<div>
|
||||
复购新增{{ treeData.leftRepeatPurchaseAdd }}
|
||||
{{ treeData.rightRepeatPurchaseAdd }}
|
||||
</div>
|
||||
<div>
|
||||
真实累计{{ treeData.leftRealTotal }} {{
|
||||
treeData.rightRealTotal
|
||||
}}
|
||||
</div>
|
||||
<div>
|
||||
首购累计{{ treeData.leftFirstTotal }} {{
|
||||
treeData.rightFirstTotal
|
||||
}}
|
||||
</div>
|
||||
<div>
|
||||
复购累计 {{ treeData.leftRepeatPurchaseTotal }} {{
|
||||
treeData.rightRepeatPurchaseTotal
|
||||
}}
|
||||
</div>
|
||||
<div>
|
||||
首购结余{{ treeData.leftFirstSurplus }} {{
|
||||
treeData.rightFirstSurplus
|
||||
}}
|
||||
</div>
|
||||
<div>
|
||||
复购结余 {{ treeData.leftRepeatPurchaseSurplus }} {{
|
||||
treeData.rightRepeatPurchaseSurplus
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -241,37 +88,19 @@ import {
|
|||
} from '@/api/archityecture'
|
||||
import { isLocals } from '../../../utils/numberToCurrency'
|
||||
import TopMemberSelect from './components/top-member-select.vue'
|
||||
import tabBarMixin from './mixins/tab-bar'
|
||||
import { getgradeRanglist } from '@/api/level'
|
||||
export default {
|
||||
name: 'Azjg5',
|
||||
components: {
|
||||
topBar,
|
||||
TopMemberSelect
|
||||
},
|
||||
mixins: [tabBarMixin],
|
||||
data() {
|
||||
return {
|
||||
moren: 'azjg5',
|
||||
topList: [
|
||||
{
|
||||
name: '方案一',
|
||||
path: 'azjg'
|
||||
},
|
||||
{
|
||||
name: '方案二',
|
||||
path: 'azjg2'
|
||||
},
|
||||
{
|
||||
name: '方案三',
|
||||
path: 'azjg3'
|
||||
},
|
||||
{
|
||||
name: '方案四',
|
||||
path: 'azjg4'
|
||||
},
|
||||
{
|
||||
name: '方案五',
|
||||
path: 'azjg5'
|
||||
}
|
||||
],
|
||||
|
||||
queryParams: {
|
||||
memberSettlePeriodId: '', // 期数
|
||||
memberCode: '', // 会员编号
|
||||
|
|
@ -283,7 +112,7 @@ export default {
|
|||
treeData: {},
|
||||
ifShow: false,
|
||||
memberSettlePeriodList: [], // 期数
|
||||
|
||||
rangeList: [], // 等级列表
|
||||
cantz: 1, // 0不可拖拽,1可拖拽
|
||||
scale: 1,
|
||||
loading: false
|
||||
|
|
@ -291,9 +120,19 @@ export default {
|
|||
},
|
||||
created() {
|
||||
// this.getSearch()
|
||||
this.getRangeList()
|
||||
this.getAvarerInfo()
|
||||
},
|
||||
methods: {
|
||||
getBorderColor(grade) {
|
||||
const color = this.rangeList.find((item) => item.gradeName === grade)?.color
|
||||
return color || '#e0e0e0'
|
||||
},
|
||||
getRangeList() {
|
||||
getgradeRanglist().then((res) => {
|
||||
this.rangeList = res.data || []
|
||||
})
|
||||
},
|
||||
TopMemberHandleChange(val) {
|
||||
if (val) {
|
||||
this.queryParams.memberCode = val
|
||||
|
|
@ -309,31 +148,6 @@ export default {
|
|||
}
|
||||
},
|
||||
isLocals,
|
||||
copyText() {
|
||||
const copyContent = this.$refs.copyContent
|
||||
const textLines = Array.from(copyContent.querySelectorAll('div')).map(
|
||||
(div) => div.textContent.trim()
|
||||
)
|
||||
const text = textLines.join('\n')
|
||||
const tempInput = document.createElement('textarea')
|
||||
tempInput.value = text
|
||||
document.body.appendChild(tempInput)
|
||||
tempInput.select()
|
||||
try {
|
||||
document.execCommand('copy')
|
||||
this.$message({
|
||||
message: '复制成功',
|
||||
type: 'success'
|
||||
})
|
||||
} catch (error) {
|
||||
this.$message({
|
||||
message: '复制失败',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
tempInput.remove()
|
||||
window.getSelection().removeAllRanges()
|
||||
},
|
||||
// 返回
|
||||
goback() {
|
||||
this.queryParams.memberCode = this.data.parentMemberCode
|
||||
|
|
@ -417,57 +231,41 @@ export default {
|
|||
onMouseout(e, data) {
|
||||
this.basicSwitch = false
|
||||
},
|
||||
// <div class="xrBox">
|
||||
// <div class="neibox" on-click={() => this.showPover(data)}>
|
||||
// <div class="topbox">
|
||||
// <img src={data.avatarUrl}></img>
|
||||
// </div>
|
||||
// <div class="centerbox">
|
||||
// <div class="cflexbox">
|
||||
// <img src={data.countryUrl}></img>
|
||||
// <div class="matitle">{data.memberCode}</div>
|
||||
// </div>
|
||||
// <div class="cflexbox">
|
||||
// <img src={data.settleCountryUrl}></img>
|
||||
// <div class="matitle">{data.name}</div>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div class="footerbox">
|
||||
// {/* 阻止冒泡事件 */}
|
||||
// <div class="ftopbtn" on-click={() => {event.stopPropagation(),this.goTop(data)}}>置顶</div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// 渲染节点
|
||||
renderContent(h, data) {
|
||||
if (!data || Object.keys(data).length === 0) {
|
||||
return
|
||||
}
|
||||
// 获取边框和阴影颜色
|
||||
const borderColor = this.getBorderColor(data.gradeName)
|
||||
// 阴影色转rgba，透明度0.25（直接在boxShadow中拼接，不再声明shadowColor）
|
||||
return (
|
||||
<div class='xrBox'>
|
||||
<div
|
||||
class='xrBox'
|
||||
style={{
|
||||
border: `4px solid ${borderColor}`,
|
||||
borderRadius: '12px',
|
||||
boxShadow: `0 4px 18px 0 ${borderColor}40, 0 0 0 4px #fff`, // 增加白色外发光提升对比度
|
||||
padding: '0',
|
||||
background: '#fff',
|
||||
transition: 'box-shadow 0.3s, border-color 0.3s'
|
||||
}}
|
||||
>
|
||||
{/* 判断data.codeName是否为空 */}
|
||||
<div class='neibox'>
|
||||
{data.memberCode ? (
|
||||
<div >
|
||||
<div
|
||||
on-contextmenu={() => this.rightClick(this.$event, data)}
|
||||
>
|
||||
<div class='topbox'>
|
||||
<div>{data.name}</div>
|
||||
<div>{data.memberCode}</div>
|
||||
<div>{data.awardsName}</div>
|
||||
<div>第{data.placeDept}部门</div>
|
||||
{/* <div>会员姓名：{data.name}</div>
|
||||
<div>会员编号：{data.memberCode}</div> */}
|
||||
</div>
|
||||
<div class='footerbox'>
|
||||
{/* 阻止冒泡事件 */}
|
||||
<div
|
||||
class='ftopbtn'
|
||||
style={{ backgroundColor: data.color }}
|
||||
on-click={() => {
|
||||
event.stopPropagation(), this.goTop(data)
|
||||
}}
|
||||
>
|
||||
{'置顶'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
|
@ -479,20 +277,12 @@ export default {
|
|||
this.queryParams.memberCode = row.memberCode
|
||||
this.getSearch()
|
||||
},
|
||||
showPover(row) {
|
||||
getUrlBase({
|
||||
countryUrl2: row.countryUrl2,
|
||||
settleCountryUrl2: row.settleCountryUrl2,
|
||||
avatarUrl: row.avatarUrl
|
||||
}).then((res) => {
|
||||
this.treeData = row
|
||||
this.treeData.countryUrl2Base64 = res.countryUrl2Base64
|
||||
this.treeData.settleCountryUrl2Base64 = res.settleCountryUrl2Base64
|
||||
this.treeData.avatarUrlBase64 = res.avatarUrlBase64
|
||||
|
||||
this.ifShow = true
|
||||
})
|
||||
rightClick(e, data) {
|
||||
event.preventDefault()
|
||||
this.queryParams.memberCode = data.memberCode
|
||||
this.getSearch()
|
||||
},
|
||||
|
||||
// 点击节点
|
||||
NodeClick(e, data) {},
|
||||
// 默认展开
|
||||
|
|
@ -661,24 +451,30 @@ export default {
|
|||
}
|
||||
.lefttop {
|
||||
display: flex;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
background: #ffffff;
|
||||
.single {
|
||||
margin: 0 5px;
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
// box-shadow: 0px 2px 20px 0px rgba(204, 204, 204, 0.5);
|
||||
}
|
||||
.singletitle {
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
}
|
||||
}
|
||||
padding: 10px 0 10px 20px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.single {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.colorbox {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e0e0e0;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.singletitle {
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
margin-top: 2px;
|
||||
}
|
||||
::v-deep .org-tree-node-label .org-tree-node-label-inner {
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -257,37 +257,17 @@ import {
|
|||
} from '@/api/archityecture'
|
||||
import TopMemberSelect from './components/top-member-select.vue'
|
||||
import { isLocals } from '../../../utils/numberToCurrency'
|
||||
import tabBarMixin from './mixins/tab-bar'
|
||||
export default {
|
||||
name: 'Azjg',
|
||||
components: {
|
||||
topBar,
|
||||
TopMemberSelect
|
||||
},
|
||||
mixins: [tabBarMixin],
|
||||
data() {
|
||||
return {
|
||||
moren: 'azjg',
|
||||
topList: [
|
||||
{
|
||||
name: '方案一',
|
||||
path: 'azjg'
|
||||
},
|
||||
{
|
||||
name: '方案二',
|
||||
path: 'azjg2'
|
||||
},
|
||||
{
|
||||
name: '方案三',
|
||||
path: 'azjg3'
|
||||
},
|
||||
{
|
||||
name: '方案四',
|
||||
path: 'azjg4'
|
||||
},
|
||||
{
|
||||
name: '方案五',
|
||||
path: 'azjg5'
|
||||
}
|
||||
],
|
||||
queryParams: {
|
||||
memberSettlePeriodId: '', // 期数
|
||||
memberCode: '', // 会员编号
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
topList: [
|
||||
{
|
||||
name: '方案一',
|
||||
path: 'azjg'
|
||||
},
|
||||
{
|
||||
name: '方案五',
|
||||
path: 'azjg5'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue