fix(framework): 推荐架构 方案一移除memberCode默认值
This commit is contained in:
woody
parent
3a5d7f1ecd
commit
29aca47694
|
|
@ -8,191 +8,114 @@
|
|||
<div class="thetopbox">
|
||||
<el-form ref="form" :model="queryParams" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<TopMemberSelect ref="topMemberSelect" @change="TopMemberHandleChange" />
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item :label="'会员编号'" prop="memberCode">
|
||||
<el-input
|
||||
v-model="queryParams.memberCode"
|
||||
clearable
|
||||
/></el-form-item></el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item :label="'结算期数'" prop="memberSettlePeriodId">
|
||||
<el-select
|
||||
v-model="queryParams.memberSettlePeriodId"
|
||||
clearable
|
||||
:placeholder="'请选择'"
|
||||
@change="getChildNodeList"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in memberSettlePeriodList"
|
||||
:key="item.pkId"
|
||||
:label="item.settleDate"
|
||||
:value="item.pkId"
|
||||
/> </el-select></el-form-item></el-col>
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item :label="'展示层数'" prop="level">
|
||||
<el-form-item :label="'会员编号'" prop="memberCode">
|
||||
<el-input
|
||||
v-model="queryParams.level"
|
||||
v-model="queryParams.memberCode"
|
||||
clearable
|
||||
/></el-form-item></el-col>
|
||||
@blur="getChildNodeList"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="4">
|
||||
<el-form-item :label="'是否固定'" prop="cantz">
|
||||
<el-select v-model="cantz" clearable :placeholder="'请选择'">
|
||||
<el-form-item label="阶段" prop="stage">
|
||||
<el-select
|
||||
v-model="queryParams.stage"
|
||||
placeholder="请选择"
|
||||
@change="getChildNodeList"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in tzList"
|
||||
v-for="(item, index) in levelList"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select> </el-form-item></el-col>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="状态" prop="stageStatus">
|
||||
<el-select
|
||||
v-model="queryParams.stageStatus"
|
||||
:placeholder="'请选择'"
|
||||
@change="getChildNodeList"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in statusEnum"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="子点位" prop="childNode">
|
||||
<el-select v-model="queryParams.childNode" clearable filterable :placeholder="'请选择'">
|
||||
<el-option
|
||||
v-for="(item, index) in childNodeList"
|
||||
:key="index"
|
||||
:label="item.childNode"
|
||||
:value="item.childNode"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4" style="margin-left: 30px">
|
||||
<div class="searchbox">
|
||||
<el-button
|
||||
:loading="loading"
|
||||
class="searchbtn"
|
||||
@click="getSearch"
|
||||
> 搜索</el-button>
|
||||
<el-button @click="resetHandle"> 重置</el-button>
|
||||
<el-button @click="goback"> 返回</el-button>
|
||||
> {{ '搜索' }}</el-button>
|
||||
<el-button @click="resetHandle"> {{ '重置' }}</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row></el-form>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="theorgtree">
|
||||
<div class="lefttop">
|
||||
<div v-for="(item, index) in avaerInfoList" :key="index" class="single">
|
||||
<img :src="item.value" alt="">
|
||||
<div class="singletitle">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="lefttop">
|
||||
<div v-for="(item, index) in avaerInfoList" :key="index" class="single">
|
||||
<!-- <img :src="item.value" alt=""> -->
|
||||
<!-- <div class="singletitle">{{ item.name }}</div> -->
|
||||
</div>
|
||||
<div class="tree">
|
||||
<div class="tree-content" @mousedown.stop="move" @wheel="handleWheel">
|
||||
<div :style="{ transform: `scale(${scale})` }">
|
||||
<vue2-org-tree
|
||||
ref="orgTree"
|
||||
:data="data"
|
||||
collapsable
|
||||
:render-content="renderContent"
|
||||
v-bind="$listeners"
|
||||
@on-expand="onExpand"
|
||||
@on-node-click="NodeClick"
|
||||
@on-node-mouseover="onMouseover"
|
||||
@on-node-mouseout="onMouseout"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree">
|
||||
<div class="tree-content" @wheel="handleWheel" @mousedown.stop="move">
|
||||
<div :style="{ transform: `scale(${scale})`, height: '100%' }">
|
||||
<vue2-org-tree
|
||||
ref="orgTree"
|
||||
style="height: 100%"
|
||||
:data="data"
|
||||
collapsable
|
||||
:render-content="renderContent"
|
||||
@on-expand="onExpand"
|
||||
@on-node-click="NodeClick"
|
||||
@on-node-mouseover="onMouseover"
|
||||
@on-node-mouseout="onMouseout"
|
||||
/>
|
||||
</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>
|
||||
<!-- </el-scrollbar> -->
|
||||
|
||||
<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>
|
||||
|
|
@ -242,53 +165,39 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import html2canvas from 'html2canvas'
|
||||
import topBar from '@/components/topBar'
|
||||
import {
|
||||
getAzFramework,
|
||||
getAvarerInfo,
|
||||
getMemberSettlePeriod,
|
||||
getUrlBase
|
||||
getChildList
|
||||
} from '@/api/archityecture'
|
||||
import TopMemberSelect from '@/components/top-member-select/index.vue'
|
||||
import { isLocals } from '../../../utils/numberToCurrency'
|
||||
import tabBarMixin from './mixins/tab-bar'
|
||||
export default {
|
||||
name: 'Azjg2',
|
||||
name: 'Azjg',
|
||||
components: {
|
||||
topBar,
|
||||
TopMemberSelect
|
||||
topBar
|
||||
},
|
||||
mixins: [tabBarMixin],
|
||||
data() {
|
||||
return {
|
||||
moren: 'azjg2',
|
||||
topList: [
|
||||
{
|
||||
name: '方案一',
|
||||
path: 'azjg'
|
||||
},
|
||||
{
|
||||
name: '方案二',
|
||||
path: 'azjg2'
|
||||
},
|
||||
{
|
||||
name: '方案三',
|
||||
path: 'azjg3'
|
||||
},
|
||||
{
|
||||
name: '方案四',
|
||||
path: 'azjg4'
|
||||
},
|
||||
{
|
||||
name: '方案五',
|
||||
path: 'azjg5'
|
||||
}
|
||||
],
|
||||
queryParams: {
|
||||
memberSettlePeriodId: '', // 期数
|
||||
memberCode: '', // 会员编号
|
||||
level: 5,
|
||||
type: 2
|
||||
stage: 1,
|
||||
stageStatus: '',
|
||||
childNode: ''
|
||||
},
|
||||
levelList: [
|
||||
{ value: 1, label: '一阶段' },
|
||||
{ value: 2, label: '二阶段' },
|
||||
{ value: 3, label: '三阶段' }
|
||||
],
|
||||
statusEnum: [
|
||||
{ value: 0, label: '已完成' },
|
||||
{ value: 1, label: '未完成' }
|
||||
],
|
||||
basicSwitch: false,
|
||||
basicInfo: { id: null, label: null },
|
||||
data: {},
|
||||
|
|
@ -300,29 +209,27 @@ export default {
|
|||
{ value: 0, label: '是' },
|
||||
{ value: 1, label: '否' }
|
||||
],
|
||||
cantz: 1, // 0不可拖拽,1可拖拽
|
||||
scale: 1,
|
||||
loading: false
|
||||
loading: false,
|
||||
childNodeList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.getSearch()
|
||||
this.getAvarerInfo()
|
||||
getMemberSettlePeriod().then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.memberSettlePeriodList = (res.data || []).filter(item => item.isThisDay !== 0)
|
||||
this.queryParams.memberSettlePeriodId = this.memberSettlePeriodList[0].pkId
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
TopMemberHandleChange(val) {
|
||||
if (val) {
|
||||
this.queryParams.memberCode = val
|
||||
this.getSearch()
|
||||
}
|
||||
},
|
||||
handleWheel(event) {
|
||||
if (this.cantz == 1) {
|
||||
event.preventDefault()
|
||||
const delta = Math.sign(event.deltaY)
|
||||
const newScale = this.scale - delta * 0.1
|
||||
this.scale = Math.max(0.01, Math.min(newScale, 10))
|
||||
}
|
||||
// 暂时禁用滚轮缩放功能
|
||||
// event.preventDefault()
|
||||
// const delta = Math.sign(event.deltaY)
|
||||
// const newScale = this.scale - delta * 0.1
|
||||
// this.scale = Math.max(0.01, Math.min(newScale, 10))
|
||||
return
|
||||
},
|
||||
isLocals,
|
||||
copyText() {
|
||||
|
|
@ -350,17 +257,17 @@ export default {
|
|||
tempInput.remove()
|
||||
window.getSelection().removeAllRanges()
|
||||
},
|
||||
|
||||
// 返回
|
||||
goback() {
|
||||
this.queryParams.memberCode = this.data.parentMemberCode
|
||||
this.getSearch()
|
||||
},
|
||||
|
||||
// 拖拽移动
|
||||
move(e) {
|
||||
if (this.cantz == 0) {
|
||||
return
|
||||
}
|
||||
const odiv = e.currentTarget // 获取元素
|
||||
console.log(e)
|
||||
|
||||
// 算出鼠标相对元素的位置
|
||||
const disX = e.clientX - odiv.offsetLeft
|
||||
|
|
@ -384,49 +291,7 @@ export default {
|
|||
document.onmouseup = null
|
||||
}
|
||||
},
|
||||
async downloadImage() {
|
||||
const element = this.$refs.htmlContent
|
||||
// 使用html2canvas将节点生成为图片
|
||||
const canvas = await html2canvas(element)
|
||||
const image = canvas.toDataURL('image/png')
|
||||
// 复制图片到剪贴板
|
||||
try {
|
||||
await navigator.clipboard.write([
|
||||
new ClipboardItem({
|
||||
'image/png': await new Promise((resolve) =>
|
||||
canvas.toBlob(resolve, 'image/png')
|
||||
)
|
||||
})
|
||||
])
|
||||
this.$message({
|
||||
message: '复制成功',
|
||||
type: 'success'
|
||||
})
|
||||
} catch (error) {
|
||||
// this.$message({
|
||||
// message: "复制失败",
|
||||
// type: "warning",
|
||||
// });
|
||||
}
|
||||
// 下载图片到本地
|
||||
const link = document.createElement('a')
|
||||
link.href = image
|
||||
link.download = 'image.png'
|
||||
link.click()
|
||||
},
|
||||
getAvarerInfo() {
|
||||
getAvarerInfo().then((res) => {
|
||||
this.avaerInfoList = res.data
|
||||
})
|
||||
getMemberSettlePeriod().then((res) => {
|
||||
this.memberSettlePeriodList = res.data
|
||||
this.memberSettlePeriodList.forEach((ele) => {
|
||||
if (ele.isThisDay == 0) {
|
||||
this.queryParams.memberSettlePeriodId = ele.pkId
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 鼠标移入
|
||||
onMouseover(e, data) {
|
||||
this.basicInfo = data
|
||||
|
|
@ -436,78 +301,51 @@ 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
|
||||
}
|
||||
return (
|
||||
<div class='xrBox'>
|
||||
{/* 判断data.codeName是否为空 */}
|
||||
<div class='neibox'>
|
||||
{data.memberCode ? (
|
||||
<div on-click={() => this.showPover(data)}>
|
||||
<div class='topbox'>
|
||||
<img src={data.settleCountryUrl2}></img>
|
||||
</div>
|
||||
<div class='footerbox'>
|
||||
{/* 阻止冒泡事件 */}
|
||||
<div
|
||||
class='ftopbtn'
|
||||
style={{ backgroundColor: data.color }}
|
||||
on-click={() => {
|
||||
event.stopPropagation(), this.goTop(data)
|
||||
}}
|
||||
>
|
||||
{'置顶'}
|
||||
if (Object.keys(data).length > 0) {
|
||||
return (
|
||||
<div class='render-content-item'>
|
||||
{/* 节点编号 */}
|
||||
{data.nodeCode !== '0-root' && (
|
||||
<div class='node-code'>
|
||||
|
||||
<span>{data.nodeCode}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 会员信息或空点位 */}
|
||||
<div class='node-content'>
|
||||
{data.memberCode && data.memberName ? (
|
||||
<div class='member-info'>
|
||||
|
||||
<div class='member-details'>
|
||||
<div class='member-code'>{data.memberCode}</div>
|
||||
<div class='member-name'>{data.memberName}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div class='empty-node'>
|
||||
<div class='empty-avatar'>
|
||||
<i class='el-icon-plus'></i>
|
||||
</div>
|
||||
<div class='empty-text'>空点位</div>
|
||||
<div class='status-indicator inactive'></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
},
|
||||
// 置顶
|
||||
goTop(row) {
|
||||
this.queryParams.memberCode = row.memberCode
|
||||
// 右键点击
|
||||
rightClick(e, data) {
|
||||
event.preventDefault()
|
||||
this.queryParams.memberCode = data.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
|
||||
})
|
||||
},
|
||||
// 点击节点
|
||||
NodeClick(e, data) {},
|
||||
// 默认展开
|
||||
|
|
@ -536,17 +374,15 @@ export default {
|
|||
},
|
||||
// 展开
|
||||
onExpand(e, data) {
|
||||
if ('expand' in data) {
|
||||
data.expand = !data.expand
|
||||
if (!data.expand && data.children) {
|
||||
this.collapse(data.children)
|
||||
}
|
||||
} else {
|
||||
this.$set(data, 'expand', true)
|
||||
}
|
||||
},
|
||||
getSearch() {
|
||||
console.log(this.queryParams, '...this.')
|
||||
if (!this.queryParams.childNode || !this.queryParams.memberCode) {
|
||||
this.$message.warning('会员编号和子点位不能为空')
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
|
||||
getAzFramework(this.queryParams).then((res) => {
|
||||
this.data = res.data[0]
|
||||
this.toggleExpand(this.data, true)
|
||||
|
|
@ -554,22 +390,33 @@ export default {
|
|||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
resetHandle() {
|
||||
this.$refs.topMemberSelect.reset()
|
||||
this.queryParams = {
|
||||
memberSettlePeriodId: '', // 期数
|
||||
memberCode: '', // 会员编号
|
||||
level: 5,
|
||||
type: 2
|
||||
stage: 7,
|
||||
type: 1
|
||||
}
|
||||
this.getSearch()
|
||||
},
|
||||
getChildNodeList() {
|
||||
if (!this.queryParams.memberCode) {
|
||||
return
|
||||
}
|
||||
getChildList(this.queryParams).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.childNodeList = res.data || []
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog__headerbtn{
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog__headerbtn{
|
||||
top: 5px;
|
||||
right: 10px;
|
||||
border: 1px solid #c8c3c3;
|
||||
|
|
@ -604,16 +451,24 @@ export default {
|
|||
// overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .org-tree-node-btn {
|
||||
display: none;
|
||||
}
|
||||
::v-deep .org-tree-node-label {
|
||||
display: block;
|
||||
}
|
||||
::v-deep .org-tree-node-label-inner {
|
||||
padding: 0;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
background: transparent !important;
|
||||
|
||||
padding: 0 !important;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
box-shadow: none !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
// margin-left: -20px;
|
||||
// z-index: -1;
|
||||
}
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 0;
|
||||
|
|
@ -623,63 +478,184 @@ export default {
|
|||
background: rgba(1, 1, 1, 0) !important;
|
||||
overflow-x: auto;
|
||||
}
|
||||
::v-deep .xrBox {
|
||||
.neibox {
|
||||
padding: 8px 15px;
|
||||
margin: auto;
|
||||
min-width: 50px;
|
||||
min-height: 50px;
|
||||
// z-index: 99;
|
||||
.topbox {
|
||||
margin: 0 auto;
|
||||
img {
|
||||
width: 52px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
// border-radius: 50%;
|
||||
}
|
||||
::v-deep .render-content-item {
|
||||
border-radius: 12px;
|
||||
margin: auto;
|
||||
z-index: 99;
|
||||
padding: 0;
|
||||
border: none;
|
||||
max-width: 200px;
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
|
||||
}
|
||||
|
||||
.node-code {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: #ffd700;
|
||||
}
|
||||
.centerbox {
|
||||
|
||||
span {
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.node-content {
|
||||
padding: 16px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.member-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
position: relative;
|
||||
|
||||
.member-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
box-shadow: 0px 2px 20px 0px rgba(204, 204, 204, 0.5);
|
||||
.cflexbox {
|
||||
margin: 0 10px;
|
||||
img {
|
||||
width: 51px;
|
||||
height: 34px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.matitle {
|
||||
font-size: 10px;
|
||||
}
|
||||
justify-content: center;
|
||||
margin-bottom: 4px;
|
||||
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.footerbox {
|
||||
// margin-top: 10px;
|
||||
.ftopbtn {
|
||||
margin: 0 auto;
|
||||
// width: 35px;
|
||||
// height: 16px;
|
||||
background: #21c8f4;
|
||||
border-radius: 4px;
|
||||
|
||||
display: flex;
|
||||
padding: 4px 9px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
.member-details {
|
||||
text-align: center;
|
||||
|
||||
margin-top: 10px;
|
||||
.member-code {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 2px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-size: 12px;
|
||||
color: #7f8c8d;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.status-indicator.active {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #27ae60;
|
||||
border-radius: 50%;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 2px 8px rgba(39, 174, 96, 0.3);
|
||||
animation: pulse-green 2s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-node {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
opacity: 0.8;
|
||||
position: relative;
|
||||
|
||||
.empty-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #bdc3c7, #95a5a6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 4px;
|
||||
border: 2px dashed #95a5a6;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
i {
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 12px;
|
||||
color: #7f8c8d;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-indicator.inactive {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #95a5a6;
|
||||
border-radius: 50%;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 2px 8px rgba(149, 165, 166, 0.3);
|
||||
}
|
||||
|
||||
&:hover .empty-avatar {
|
||||
background: linear-gradient(135deg, #3498db, #2980b9);
|
||||
border-color: #3498db;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-green {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.lefttop {
|
||||
display: flex;
|
||||
justify-items: center;
|
||||
|
|
@ -689,8 +665,8 @@ export default {
|
|||
.single {
|
||||
margin: 0 5px;
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
// box-shadow: 0px 2px 20px 0px rgba(204, 204, 204, 0.5);
|
||||
}
|
||||
|
|
@ -701,16 +677,6 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
::v-deep .org-tree-node-label .org-tree-node-label-inner {
|
||||
padding: 0;
|
||||
}
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// ::v-deep .xrBox {
|
||||
|
||||
// }
|
||||
::v-deep .rendercontent {
|
||||
.toprender {
|
||||
display: flex;
|
||||
|
|
@ -731,7 +697,7 @@ export default {
|
|||
margin-top: 10px;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
border-radius: 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
.centerbox {
|
||||
|
|
@ -778,7 +744,7 @@ export default {
|
|||
img {
|
||||
width: 75px;
|
||||
height: 50px;
|
||||
border-radius: 10px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -844,7 +810,8 @@ export default {
|
|||
}
|
||||
|
||||
.page {
|
||||
padding: 10px 20px;
|
||||
background: #ffffff;
|
||||
padding: 10px 20px !important;
|
||||
background: #f9f9f9;
|
||||
font-size: 14px;
|
||||
.thetopbox {
|
||||
|
|
@ -862,14 +829,6 @@ export default {
|
|||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.theorgtree {
|
||||
overflow: auto;
|
||||
// margin-top: 20px;
|
||||
}
|
||||
}
|
||||
::v-deep .org-tree {
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ export default {
|
|||
path: 'azjg'
|
||||
}
|
||||
// {
|
||||
// name: '方案五',
|
||||
// path: 'azjg5'
|
||||
// name: '方案二',
|
||||
// path: 'azjg2'
|
||||
// }
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue