From 29aca47694566d3cd1523b9041a00fc7d4c0b3dd Mon Sep 17 00:00:00 2001
From: woody <woody@163>
Date: Thu, 25 Sep 2025 15:01:57 +0800
Subject: [PATCH] =?UTF-8?q?fix(framework):=20=E6=8E=A8=E8=8D=90=E6=9E=B6?=
 =?UTF-8?q?=E6=9E=84=20=E6=96=B9=E6=A1=88=E4=B8=80=E7=A7=BB=E9=99=A4member?=
 =?UTF-8?q?Code=E9=BB=98=E8=AE=A4=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/framework/architecture/azjg2.vue    | 745 +++++++++---------
 .../framework/architecture/mixins/tab-bar.js  |   4 +-
 2 files changed, 354 insertions(+), 395 deletions(-)

diff --git a/src/views/framework/architecture/azjg2.vue b/src/views/framework/architecture/azjg2.vue
index 4dab8c4..92d2512 100644
--- a/src/views/framework/architecture/azjg2.vue
+++ b/src/views/framework/architecture/azjg2.vue
@@ -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>
diff --git a/src/views/framework/architecture/mixins/tab-bar.js b/src/views/framework/architecture/mixins/tab-bar.js
index d2aa412..7fc6d51 100644
--- a/src/views/framework/architecture/mixins/tab-bar.js
+++ b/src/views/framework/architecture/mixins/tab-bar.js
@@ -7,8 +7,8 @@ export default {
           path: 'azjg'
         }
         // {
-        //   name: '方案五',
-        //   path: 'azjg5'
+        //   name: '方案二',
+        //   path: 'azjg2'
         // }
       ]
     }