feat(azjg5): 安置架构 方案五改造

src/views/framework/architecture/azjg5.vue

@@ -50,12 +50,12 @@
         </el-row></el-form>
     </div>
     <div class="theorgtree">
-      <!-- <div class="lefttop">
+      <div class="lefttop">
-          <div class="single" v-for="(item, index) in avaerInfoList" :key="index">
+        <div v-for="(item, index) in rangeList" :key="index" class="single">
-            <img :src="item.value" alt="" />
+          <div class="colorbox" :style="{background: item.color}" />
-            <div class="singletitle">{{ item.name }}</div>
+          <div class="singletitle">{{ item.gradeName }}</div>
+        </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() }})&nbsp;&nbsp;左区&nbsp;&nbsp;右区</div>
-      <div>
-        真实新增&nbsp;&nbsp;{{ treeData.leftRealNewPv }}&nbsp;&nbsp;{{
-          treeData.rightRealNewPv
-        }}
-      </div>
-      <div>
-        首购新增&nbsp;&nbsp;{{ treeData.leftFirstPurchaseAdd }}&nbsp;&nbsp;{{
-          treeData.rightFirstPurchaseAdd
-        }}
-      </div>
-      <div>
-        复购新增{{ treeData.leftRepeatPurchaseAdd }}&nbsp;&nbsp;
-        {{ treeData.rightRepeatPurchaseAdd }}
-      </div>
-      <div>
-        真实累计{{ treeData.leftRealTotal }}&nbsp;&nbsp;{{
-          treeData.rightRealTotal
-        }}
-      </div>
-      <div>
-        首购累计{{ treeData.leftFirstTotal }}&nbsp;&nbsp;{{
-          treeData.rightFirstTotal
-        }}
-      </div>
-      <div>
-        复购累计 {{ treeData.leftRepeatPurchaseTotal }}&nbsp;&nbsp;{{
-          treeData.rightRepeatPurchaseTotal
-        }}
-      </div>
-      <div>
-        首购结余{{ treeData.leftFirstSurplus }}&nbsp;&nbsp;{{
-          treeData.rightFirstSurplus
-        }}
-      </div>
-      <div>
-        复购结余 {{ treeData.leftRepeatPurchaseSurplus }}&nbsp;&nbsp;{{
-          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) {
+    rightClick(e, data) {
-      getUrlBase({
+      event.preventDefault()
-        countryUrl2: row.countryUrl2,
+      this.queryParams.memberCode = data.memberCode
-        settleCountryUrl2: row.settleCountryUrl2,
+      this.getSearch()
-        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) {},
     // 默认展开
@@ -661,24 +451,30 @@ export default {
   }
   .lefttop {
     display: flex;
-    justify-items: center;
     align-items: center;
-    padding-left: 20px;
+    padding: 10px 0 10px 20px;
-    background: #ffffff;
+    background: #fff;
+    border-radius: 8px;
+    margin-bottom: 10px;
+  }
   .single {
-      margin: 0 5px;
+    display: flex;
-      img {
+    flex-direction: column;
-        width: 40px;
+    align-items: center;
-        height: 40px;
+    margin-right: 16px;
-        border-radius: 50%;
+  }
-        // box-shadow: 0px 2px 20px 0px rgba(204, 204, 204, 0.5);
+  .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 {
-        text-align: center;
+    font-size: 12px;
-        font-size: 10px;
+    color: #333;
-        font-family: PingFang SC-Regular, PingFang SC;
+    margin-top: 2px;
-      }
-    }
   }
   ::v-deep .org-tree-node-label .org-tree-node-label-inner {
     padding: 0;

src/views/framework/architecture/index.vue

@@ -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: '', // 会员编号

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

@@ -0,0 +1,16 @@
+export default {
+  data() {
+    return {
+      topList: [
+        {
+          name: '方案一',
+          path: 'azjg'
+        },
+        {
+          name: '方案五',
+          path: 'azjg5'
+        }
+      ]
+    }
+  }
+}