feat(az-framework): 阶段架构接口联调

.env.development

@@ -3,4 +3,4 @@ ENV = 'development'
 
 VUE_APP_BASE_API = '/prod-api'
 VUE_APP_ADDRESS1 = 'http://t-app.beida777.com/#/'
-VUE_APP_SYSTEM_TYPE = 'KG'
+VUE_APP_SYSTEM_TYPE = 'ZK'

.env.production

@@ -4,4 +4,4 @@ ENV = 'production'
 # base api
 VUE_APP_BASE_API = '/prod-api'
 VUE_APP_ADDRESS1 = 'http://t-app.beida777.com/#/'
-VUE_APP_SYSTEM_TYPE = 'KG'
+VUE_APP_SYSTEM_TYPE = 'ZK'

src/api/archityecture.js

@@ -12,7 +12,7 @@ export function getTjFramework(params) {
 // 安置架构1
 export function getAzFramework(params) {
   return request({
-        url: '/member/manage/member-structure/az-framework',
+    url: '/member/manage/member-structure/three-framework',
     method: 'get',
     params
   })
@@ -52,3 +52,12 @@ export function getUrlBase(data) {
     data
   })
 }
+
+// 查询会员子点位
+export function getChildList(params) {
+  return request({
+    url: '/member/manage/member-structure/childList',
+    method: 'get',
+    params
+  })
+}

src/router/index.js

@@ -588,7 +588,7 @@ export const constantRoutes = [
       {
         path: 'architecture',
         name: 'Arcgurecture',
-        meta: { title: '安置架构' },
+        meta: { title: '阶段架构' },
         component: ParentView,
         redirect: 'architecture/index',
         children: [
@@ -596,7 +596,7 @@ export const constantRoutes = [
             path: 'azjg',
             name: 'PlacementStructure',
             component: () => import('@/views/framework/architecture/index'),
-            meta: { title: '安置架构' }
+            meta: { title: '阶段架构' }
           },
           {
             path: 'azjg2',

src/views/framework/architecture/components/member-info-dialog.vue

@@ -0,0 +1,121 @@
+<template>
+  <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 || 0 }}</div>
+            <div class="linecontent">{{ treeData.leftFirstTotal || 0 }}</div>
+            <div class="linecontent">
+              {{ treeData.leftRepeatPurchaseTotal || 0 }}
+            </div>
+            <div class="linecontent">{{ treeData.leftFirstSurplus || 0 }}</div>
+            <div class="linecontent">
+              {{ treeData.leftRepeatPurchaseSurplus || 0 }}
+            </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>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/framework/architecture/index.vue

@@ -8,22 +8,12 @@
     <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"
@@ -35,21 +25,59 @@
             </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-form-item label="阶段" prop="stage">
-              <el-select v-model="cantz" clearable :placeholder="'请选择'">
+              <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
@@ -58,7 +86,6 @@
                 @click="getSearch"
               > {{ '搜索' }}</el-button>
               <el-button @click="resetHandle"> {{ '重置' }}</el-button>
-              <el-button @click="goback"> {{ '返回' }}</el-button>
             </div>
           </el-col>
         </el-row>
@@ -66,14 +93,13 @@
     </div>
     <div class="lefttop">
       <div v-for="(item, index) in avaerInfoList" :key="index" class="single">
-        <img :src="item.value" alt="">
+        <!-- <img :src="item.value" alt=""> -->
-        <div class="singletitle">{{ item.name }}</div>
+        <!-- <div class="singletitle">{{ item.name }}</div> -->
       </div>
     </div>
-    <!-- <el-scrollbar style="width: 100%; height: 100%"> -->
     <div class="tree">
       <div class="tree-content" @wheel="handleWheel" @mousedown.stop="move">
-        <div :style="{ transform: `scale(${scale})` }">
+        <div :style="{ transform: `scale(${scale})`, height: '100%' }">
           <vue2-org-tree
             ref="orgTree"
             style="height: 100%"
@@ -89,115 +115,7 @@
       </div>
     </div>
     <!-- </el-scrollbar> -->
-    <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 || 0 }}</div>
-              <div class="linecontent">{{ treeData.leftFirstTotal || 0 }}</div>
-              <div class="linecontent">
-                {{ treeData.leftRepeatPurchaseTotal || 0 }}
-              </div>
-              <div class="linecontent">{{ treeData.leftFirstSurplus || 0 }}</div>
-              <div class="linecontent">
-                {{ treeData.leftRepeatPurchaseSurplus || 0 }}
-              </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>
@@ -247,22 +165,18 @@
 </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: 'Azjg',
   components: {
-    topBar,
+    topBar
-    TopMemberSelect
   },
   mixins: [tabBarMixin],
   data() {
@@ -270,10 +184,20 @@ export default {
       moren: 'azjg',
       queryParams: {
         memberSettlePeriodId: '', // 期数
-        memberCode: '', // 会员编号
+        memberCode: 'KG71227311', // 会员编号
-        level: 7,
+        stage: 1,
-        type: 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: {},
@@ -281,33 +205,31 @@ export default {
       ifShow: false,
       avaerInfoList: [],
       memberSettlePeriodList: [], // 期数
-      cantz: 0, // 0不可拖拽,1可拖拽
       tzList: [
         { value: 0, label: '是' },
         { value: 1, label: '否' }
       ],
       scale: 1,
-      loading: false
+      loading: false,
+      childNodeList: []
     }
   },
   created() {
-    // this.getSearch()
+    getMemberSettlePeriod().then((res) => {
-    this.getAvarerInfo()
+      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()
+      // 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))
-      }
+      return
     },
     isLocals,
     copyText() {
@@ -334,69 +256,8 @@ export default {
       }
       tempInput.remove()
       window.getSelection().removeAllRanges()
-      // const targetElement = document.querySelector(".copyContent");
+    },
-      // // 创建一个 Range 对象并选择要复制的元素
-      // const range = document.createRange();
-      // range.selectNode(targetElement);
-      // // 将 Range 对象添加到选区中
-      // const selection = window.getSelection();
-      // selection.removeAllRanges();
-      // selection.addRange(range);
-      // // 获取选区中的HTML内容
-      // const htmlContent = targetElement.innerHTML;
-      // // 使用 Clipboard API 将HTML内容复制到剪贴板中
-      // navigator.clipboard
-      //   .write([
-      //     new ClipboardItem({
-      //       "text/html": new Blob([htmlContent], { type: "text/html" }),
-      //     }),
-      //   ])
-      //   .then(() => {
-      //     this.$message({
-      //       message: "文字复制成功",
-      //       type: "success",
-      //     });
-      //   })
-      //   .catch((error) => {
-      //     this.$message({
-      //       message: "文字复制失败",
-      //       type: "warning",
-      //     });
-      //   });
 
-      // // 清除选区
-      // selection.removeAllRanges();
-    },
-    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()
-    },
     // 返回
     goback() {
       this.queryParams.memberCode = this.data.parentMemberCode
@@ -405,9 +266,6 @@ export default {
 
     // 拖拽移动
     move(e) {
-      if (this.cantz == 0) {
-        return
-      }
       const odiv = e.currentTarget // 获取元素
       console.log(e)
 
@@ -433,19 +291,7 @@ export default {
         document.onmouseup = null
       }
     },
-    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
@@ -457,15 +303,41 @@ export default {
     },
     // 渲染节点
     renderContent(h, data) {
+      if (Object.keys(data).length > 0) {
         return (
-        <div class='neibox'>
+          <div class='render-content-item'>
-          <img
+            {/* 节点编号 */}
-            on-click={() => this.showPover(data)}
+            {data.nodeCode !== '0-root' && (
-            on-contextmenu={() => this.rightClick(this.$event, data)}
+              <div class='node-code'>
-            src={data.avatarUrl}
+
-          ></img>
+                <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 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
+      }
     },
     // 右键点击
     rightClick(e, data) {
@@ -473,20 +345,7 @@ export default {
       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) {},
     // 默认展开
@@ -515,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)
@@ -533,15 +390,26 @@ export default {
         this.loading = false
       })
     },
+
     resetHandle() {
       this.$refs.topMemberSelect.reset()
       this.queryParams = {
         memberSettlePeriodId: '', // 期数
         memberCode: '', // 会员编号
-        level: 7,
+        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 || []
+        }
+      })
     }
   }
 }
@@ -590,14 +458,11 @@ export default {
   display: block;
 }
 ::v-deep .org-tree-node-label-inner {
-  background: rgba(0, 0, 0, 0);
+  background: transparent !important;
-  // list-style-type: none;
+
-  border-radius: 50%;
   padding: 0 !important;
   border: none;
-  width: 5.6px;
+  box-shadow: none !important;
-
-  height: 25px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -613,16 +478,181 @@ export default {
   background: rgba(1, 1, 1, 0) !important;
   overflow-x: auto;
 }
-::v-deep .neibox {
+::v-deep .render-content-item {
-  padding: 0;
+  border-radius: 12px;
-
   margin: auto;
   z-index: 99;
-  img {
+  padding: 0;
-    width: 36px;
+  border: none;
-    height: 36px;
+  max-width: 200px;
-    margin-top: -6px;
+  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;
+    }
+
+    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: center;
+      margin-bottom: 4px;
+      box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
+
+      i {
+        font-size: 24px;
+        color: white;
+      }
+    }
+
+    .member-details {
+      text-align: center;
+
+      .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);
   }
 }
 

src/views/framework/architecture/mixins/tab-bar.js

@@ -5,11 +5,11 @@ export default {
         {
           name: '方案一',
           path: 'azjg'
-        },
-        {
-          name: '方案五',
-          path: 'azjg5'
         }
+        // {
+        //   name: '方案五',
+        //   path: 'azjg5'
+        // }
       ]
     }
   }

vue.config.js

@@ -44,7 +44,7 @@ module.exports = {
     },
     proxy: {
       '/prod-api': {
-        target: 'http://192.168.0.86:8080',
+        target: 'http://192.168.0.106:8080/',
         changeOrigin: true,
         pathRewrite: { '^/prod-api': '' }
       }