fix(framework): 安置架构图超出视口宽度可横向滚动 bug-61

src/views/framework/architecture/azjg2.vue

@@ -618,6 +618,7 @@ export default {
 ::v-deep .org-tree-container {
   display: block;
   background: rgba(1, 1, 1, 0) !important;
+  overflow-x: auto;
 }
 ::v-deep .xrBox {
   .neibox {
@@ -703,9 +704,7 @@ export default {
 ::v-deep .el-dialog__body {
   padding: 0;
 }
-::v-deep .org-tree-container {
-  display: block;
-}
+
 // ::v-deep .xrBox {
 
 // }
@@ -840,9 +839,7 @@ export default {
     }
   }
 }
-::v-deep .org-tree-container {
-  display: block;
-}
+
 .page {
   padding: 10px 20px;
   background: #f9f9f9;

src/views/framework/architecture/azjg3.vue

@@ -661,9 +661,7 @@ export default {
 ::v-deep .el-dialog__body {
   padding: 0;
 }
-::v-deep .org-tree-container {
-  display: block;
-}
+
 ::v-deep .xrBox {
   .neibox {
     // padding: 20px;
@@ -835,6 +833,7 @@ export default {
 ::v-deep .org-tree-container {
   display: block;
   background: rgba(1, 1, 1, 0) !important;
+
 }
 .page {
   padding: 10px 20px !important;

src/views/framework/architecture/azjg5.vue

@@ -683,9 +683,7 @@ export default {
   ::v-deep .el-dialog__body {
     padding: 0;
   }
-  ::v-deep .org-tree-container {
-    display: block;
-  }
+
   // ::v-deep .xrBox {
 
   // }
@@ -820,9 +818,7 @@ export default {
       }
     }
   }
-  ::v-deep .org-tree-container {
-    display: block;
-  }
+
   .page {
     padding: 10px 20px;
     background: #f9f9f9;

src/views/framework/architecture/index.vue

@@ -631,6 +631,7 @@ export default {
 ::v-deep .org-tree-container {
   display: block;
   background: rgba(1, 1, 1, 0) !important;
+  overflow-x: auto;
 }
 ::v-deep .neibox {
   padding: 0;

src/views/framework/recommend/tjjg2.vue

@@ -2,51 +2,47 @@
   <div class="page">
     <topBar
       v-if="topList.length > 0"
-      :topList="topList"
+      :top-list="topList"
       :moren="moren"
-    ></topBar>
+    />
     <div class="thetopbox">
       <el-form ref="form" :model="queryParams" label-width="100px">
         <el-row>
           <el-col :span="4">
             <el-form-item :label="'会员编号'" prop="memberCode">
               <el-input
-                clearable
                 v-model="queryParams.memberCode"
-              ></el-input></el-form-item
-          ></el-col>
+                clearable
+              /></el-form-item></el-col>
           <el-col :span="4">
             <el-form-item :label="'结算期数'" prop="memberSettlePeriodId">
               <el-select
+                v-model="queryParams.memberSettlePeriodId"
                 clearable
                 :placeholder="'请选择'"
-                v-model="queryParams.memberSettlePeriodId"
               >
                 <el-option
                   v-for="item in memberSettlePeriodList"
                   :key="item.pkId"
                   :label="item.settleDate"
                   :value="item.pkId"
-                ></el-option> </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-input
-                clearable
                 v-model="queryParams.level"
-              ></el-input></el-form-item
-          ></el-col>
+                clearable
+              /></el-form-item></el-col>
           <el-col :span="4">
             <el-form-item :label="'是否固定'" prop="cantz">
-              <el-select clearable :placeholder="'请选择'" v-model="cantz">
+              <el-select v-model="cantz" clearable :placeholder="'请选择'">
                 <el-option
                   v-for="(item, index) in tzList"
                   :key="index"
                   :label="item.label"
                   :value="item.value"
-                ></el-option>
-              </el-select> </el-form-item
-          ></el-col>
+                />
+              </el-select> </el-form-item></el-col>
           <el-col :span="4" style="margin-left: 30px">
             <div class="searchbox">
               <el-button class="searchbtn" @click="getSearch"> {{ '搜索' }}</el-button>
@@ -54,31 +50,30 @@
               <el-button @click="goback"> {{ '返回' }}</el-button>
             </div>
           </el-col>
-        </el-row></el-form
-      >
+        </el-row></el-form>
     </div>
     <div class="theorgtree">
       <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
-              ref="orgTree"
+              :render-content="renderContent"
+              v-bind="$listeners"
               @on-expand="onExpand"
               @on-node-click="NodeClick"
               @on-node-mouseover="onMouseover"
               @on-node-mouseout="onMouseout"
-              :renderContent="renderContent"
-              v-bind="$listeners"
             />
           </div>
         </div>
       </div>
     </div>
     <div
-      class="rendercontent"
       ref="htmlContent"
+      class="rendercontent"
       style="width: 516px; background-color: #ffffff; display: none;height: 470px;"
     >
       <div class="toprender">
@@ -86,11 +81,11 @@
           <img
             class="img1"
             :src="'data:image/png;base64,' + popdata.avatarUrlBase64"
-          />
+          >
           <img
             class="img2"
             :src="'data:image/png;base64,' + popdata.countryUrl2Base64"
-          />
+          >
         </div>
         <div class="centerbox">
           <div class="lineboex">
@@ -102,7 +97,7 @@
             <div class="linecontent">{{ popdata.name }}</div>
           </div>
           <div class="lineboex">
-            <div class="linetitle">{{'直推代数'}}</div>
+            <div class="linetitle">{{ '直推代数' }}</div>
             <div class="linecontent">{{ popdata.level }}</div>
           </div>
           <div class="lineboex">
@@ -113,8 +108,8 @@
         <div class="rightimg">
           <img
             :src="'data:image/png;base64,' + popdata.settleCountryUrl2Base64"
-          />
-          <div>{{'结算国家'}}</div>
+          >
+          <div>{{ '结算国家' }}</div>
         </div>
       </div>
       <div class="bottomrender">
@@ -131,14 +126,14 @@
         <div class="flexbox">
           <div class="thetitle">{{ '团队' }}</div>
           <div class="linecontent">{{ popdata.teamNumber }}</div>
-          <div class="linecontent">{{ popdata.teamHistoryPerformancePv  }}</div>
+          <div class="linecontent">{{ popdata.teamHistoryPerformancePv }}</div>
         </div>
       </div>
     </div>
-    <div class="copyContent" v-show="false" ref="copyContent">
+    <div v-show="false" ref="copyContent" class="copyContent">
       <div>{{ '会员编号' }}：{{ popdata.memberCode }}</div>
       <div>{{ '会员姓名' }}：{{ popdata.name }}</div>
-      <div>{{'直推代数'}}：{{ popdata.level }}</div>
+      <div>{{ '直推代数' }}：{{ popdata.level }}</div>
       <div>{{ '支付日期' }}：{{ popdata.payDate }}</div>
       <div>{{ '类型' }}&nbsp;&nbsp;直推&nbsp;&nbsp;团队</div>
       <div>
@@ -148,7 +143,7 @@
       </div>
       <div>
         {{ '业绩' }}({{ isLocals() }})&nbsp;&nbsp;{{ popdata.teamNumber }}&nbsp;&nbsp;{{
-          popdata.teamHistoryPerformancePv 
+          popdata.teamHistoryPerformancePv
         }}
       </div>
     </div>
@@ -156,44 +151,44 @@
 </template>
 
 <script>
-import topBar from "@/components/topBar";
-import html2canvas from "html2canvas";
+import topBar from '@/components/topBar'
+import html2canvas from 'html2canvas'
 import {
   getTjFramework,
   getMemberSettlePeriod,
-  getUrlBase,
-} from "@/api/archityecture";
-import { isLocals } from "../../../utils/numberToCurrency";
+  getUrlBase
+} from '@/api/archityecture'
+import { isLocals } from '../../../utils/numberToCurrency'
 export default {
-  name: "Azjg",
+  name: 'Azjg',
   components: {
-    topBar,
+    topBar
   },
   data() {
     return {
-      moren: "tjjg2",
+      moren: 'tjjg2',
       topList: [
         {
           name: '方案一',
-          path: "tjjg",
+          path: 'tjjg'
         },
         {
           name: '方案二',
-          path: "tjjg2",
+          path: 'tjjg2'
         },
         {
           name: '方案三',
-          path: "tjjg3",
+          path: 'tjjg3'
         },
         {
           name: '方案四',
-          path: "tjjg4",
-        },
+          path: 'tjjg4'
+        }
       ],
       queryParams: {
-        memberSettlePeriodId: "", //期数
-        memberCode: "", //会员编号
-        level: "", //代数
+        memberSettlePeriodId: '', // 期数
+        memberCode: '', // 会员编号
+        level: '' // 代数
       },
       basicSwitch: false,
       basicInfo: { id: null, label: null },
@@ -201,273 +196,273 @@ export default {
       memberSettlePeriodList: [],
       popdata: {},
       tzList: [
-        { value: 0, label: "是" },
-        { value: 1, label: "否" },
+        { value: 0, label: '是' },
+        { value: 1, label: '否' }
       ],
-      cantz: 1, //0不可拖拽,1可拖拽
-      scale: 1,
-    };
+      cantz: 1, // 0不可拖拽,1可拖拽
+      scale: 1
+    }
   },
   created() {
-    this.getSearch();
-    this.getAvarerInfo();
+    this.getSearch()
+    this.getAvarerInfo()
   },
   methods: {
     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))
       }
     },
-     //拖拽移动
-     move(e) {
+    // 拖拽移动
+    move(e) {
       if (this.cantz == 0) {
-        return;
+        return
       }
-      const odiv = e.currentTarget; // 获取元素
+      const odiv = e.currentTarget // 获取元素
 
       // 算出鼠标相对元素的位置
-      const disX = e.clientX - odiv.offsetLeft;
-      const disY = e.clientY - odiv.offsetTop;
+      const disX = e.clientX - odiv.offsetLeft
+      const disY = e.clientY - odiv.offsetTop
       document.onmousemove = (e) => {
         // 鼠标按下并移动的事件
         // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
-        const left = e.clientX - disX;
-        const top = e.clientY - disY;
+        const left = e.clientX - disX
+        const top = e.clientY - disY
 
         // 绑定元素位置到positionX和positionY上面
-        this.positionX = top;
-        this.positionY = left;
+        this.positionX = top
+        this.positionY = left
 
         // 移动当前元素
-        odiv.style.left = left + "px";
-        odiv.style.top = top + "px";
-      };
+        odiv.style.left = left + 'px'
+        odiv.style.top = top + 'px'
+      }
       document.onmouseup = () => {
-        document.onmousemove = null;
-        document.onmouseup = null;
-      };
+        document.onmousemove = null
+        document.onmouseup = null
+      }
     },
     isLocals,
     copyText(data) {
-      this.popdata = data;
+      this.popdata = data
       setTimeout(() => {
-        const copyContent = this.$refs.copyContent;
-        const textLines = Array.from(copyContent.querySelectorAll("div")).map(
+        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();
+        )
+        const text = textLines.join('\n')
+        const tempInput = document.createElement('textarea')
+        tempInput.value = text
+        document.body.appendChild(tempInput)
+        tempInput.select()
         try {
-          document.execCommand("copy");
+          document.execCommand('copy')
           this.$message({
             message: '复制成功',
-            type: "success",
-          });
+            type: 'success'
+          })
         } catch (error) {
           this.$message({
-            message: "复制失败",
-            type: "warning",
-          });
+            message: '复制失败',
+            type: 'warning'
+          })
         }
-        tempInput.remove();
-        window.getSelection().removeAllRanges();
-      }, 50);
+        tempInput.remove()
+        window.getSelection().removeAllRanges()
+      }, 50)
     },
     async downloadImage(data) {
       await getUrlBase({
         countryUrl2: data.countryUrl2,
         settleCountryUrl2: data.settleCountryUrl2,
-        avatarUrl: data.avatarUrl,
+        avatarUrl: data.avatarUrl
       }).then((res) => {
-        this.popdata = data;
-        this.popdata.countryUrl2Base64 = res.countryUrl2Base64;
-        this.popdata.settleCountryUrl2Base64 = res.settleCountryUrl2Base64;
-        this.popdata.avatarUrlBase64 = res.avatarUrlBase64;
-      });
+        this.popdata = data
+        this.popdata.countryUrl2Base64 = res.countryUrl2Base64
+        this.popdata.settleCountryUrl2Base64 = res.settleCountryUrl2Base64
+        this.popdata.avatarUrlBase64 = res.avatarUrlBase64
+      })
 
-      const element = this.$refs.htmlContent;
+      const element = this.$refs.htmlContent
 
-      await new Promise((resolve) => setTimeout(resolve, 50)); // 根据实际情况调整延迟时间
-      element.style.display = "block";
+      await new Promise((resolve) => setTimeout(resolve, 50)) // 根据实际情况调整延迟时间
+      element.style.display = 'block'
       // 使用html2canvas将节点生成为图片
-      const canvas = await html2canvas(element);
-      const image = canvas.toDataURL("image/png");
+      const canvas = await html2canvas(element)
+      const image = canvas.toDataURL('image/png')
       // 复制图片到剪贴板
 
       // 下载图片到本地
-      const link = document.createElement("a");
-      link.href = image;
-      link.download = "image.png";
-      link.click();
+      const link = document.createElement('a')
+      link.href = image
+      link.download = 'image.png'
+      link.click()
       // 隐藏图片
-      element.style.display = "none";
+      element.style.display = 'none'
     },
     getAvarerInfo() {
       getMemberSettlePeriod().then((res) => {
-        this.memberSettlePeriodList = res.data;
+        this.memberSettlePeriodList = res.data
         this.memberSettlePeriodList.forEach((ele) => {
           if (ele.isThisDay == 0) {
-            this.queryParams.memberSettlePeriodId = ele.pkId;
+            this.queryParams.memberSettlePeriodId = ele.pkId
           }
-        });
-      });
+        })
+      })
     },
-    //返回
+    // 返回
     goback() {
-      this.queryParams.memberCode = this.data.parentMemberCode;
-      this.getSearch();
+      this.queryParams.memberCode = this.data.parentMemberCode
+      this.getSearch()
     },
-    //鼠标移入
+    // 鼠标移入
     onMouseover(e, data) {
-      this.basicInfo = data;
-      this.basicSwitch = true;
+      this.basicInfo = data
+      this.basicSwitch = true
     },
-    //鼠标移出
+    // 鼠标移出
     onMouseout(e, data) {
-      this.basicSwitch = false;
+      this.basicSwitch = false
     },
-    //渲染节点
+    // 渲染节点
     renderContent(h, data) {
       return (
-        <div class="rendercontent">
-          <div class="toprender">
-            <div class="leftimg">
-              <img class="img1" src={data.avatarUrl}></img>
-              <img class="img2" src={data.countryUrl}></img>
+        <div class='rendercontent'>
+          <div class='toprender'>
+            <div class='leftimg'>
+              <img class='img1' src={data.avatarUrl}></img>
+              <img class='img2' src={data.countryUrl}></img>
             </div>
-            <div class="centerbox">
-              <div class="lineboex">
-                <div class="linetitle">{ '会员编号'} </div>
-                <div class="linecontent">{data.memberCode}</div>
+            <div class='centerbox'>
+              <div class='lineboex'>
+                <div class='linetitle'>{ '会员编号'} </div>
+                <div class='linecontent'>{data.memberCode}</div>
               </div>
-              <div class="lineboex">
-                <div class="linetitle">{ '会员姓名' }</div>
-                <div class="linecontent">{data.name}</div>
+              <div class='lineboex'>
+                <div class='linetitle'>{ '会员姓名' }</div>
+                <div class='linecontent'>{data.name}</div>
               </div>
-              <div class="lineboex">
-                <div class="linetitle">{'直推代数'}</div>
-                <div class="linecontent">{data.level}</div>
+              <div class='lineboex'>
+                <div class='linetitle'>{'直推代数'}</div>
+                <div class='linecontent'>{data.level}</div>
               </div>
-              <div class="lineboex">
-                <div class="linetitle">{ '支付日期' }</div>
-                <div class="linecontent">{data.payDate}</div>
+              <div class='lineboex'>
+                <div class='linetitle'>{ '支付日期' }</div>
+                <div class='linecontent'>{data.payDate}</div>
               </div>
             </div>
-            <div class="rightimg">
+            <div class='rightimg'>
               <img src={data.settleCountryUrl2}></img>
               <div>{'结算国家'}</div>
             </div>
           </div>
-          <div class="bottomrender">
-            <div class="flexbox">
-              <div class="thetitle">{ '类型' }</div>
-              <div class="linecontent">人数</div>
-              <div class="linecontent">{ '业绩' }({isLocals()})</div>
+          <div class='bottomrender'>
+            <div class='flexbox'>
+              <div class='thetitle'>{ '类型' }</div>
+              <div class='linecontent'>人数</div>
+              <div class='linecontent'>{ '业绩' }({isLocals()})</div>
             </div>
-            <div class="flexbox">
-              <div class="thetitle">直推</div>
-              <div class="linecontent">{data.directPushNumber}</div>
-              <div class="linecontent">{data.newPerformancePv}</div>
+            <div class='flexbox'>
+              <div class='thetitle'>直推</div>
+              <div class='linecontent'>{data.directPushNumber}</div>
+              <div class='linecontent'>{data.newPerformancePv}</div>
             </div>
-            <div class="flexbox">
-              <div class="thetitle">{'团队' }</div>
-              <div class="linecontent">{data.teamNumber}</div>
-              <div class="linecontent">{data.teamHistoryPerformancePv }</div>
+            <div class='flexbox'>
+              <div class='thetitle'>{'团队' }</div>
+              <div class='linecontent'>{data.teamNumber}</div>
+              <div class='linecontent'>{data.teamHistoryPerformancePv }</div>
             </div>
           </div>
-          <div class="footerbox">
+          <div class='footerbox'>
             <div
-              class="footerbtn btn1"
+              class='footerbtn btn1'
               on-click={() => {
-                this.downloadImage(data);
+                this.downloadImage(data)
               }}
             >
             下载图片
             </div>
             <div
-              class="footerbtn btn2"
+              class='footerbtn btn2'
               on-click={() => {
-                this.copyText(data);
+                this.copyText(data)
               }}
             >
               复制文字
             </div>
-            <div class="footerbtn btn3" on-click={() => this.goTop(data)}>
+            <div class='footerbtn btn3' on-click={() => this.goTop(data)}>
               {'置顶'}
             </div>
           </div>
         </div>
-      );
+      )
     },
-    //置顶
+    // 置顶
     goTop(row) {
-      this.queryParams.memberCode = row.memberCode;
-      this.getSearch();
+      this.queryParams.memberCode = row.memberCode
+      this.getSearch()
     },
-    //点击节点
+    // 点击节点
     NodeClick(e, data) {},
-    //默认展开
+    // 默认展开
     toggleExpand(data, val) {
       if (Array.isArray(data)) {
         data.forEach((item) => {
-          this.$set(item, "expand", val);
+          this.$set(item, 'expand', val)
           if (item.children) {
-            this.toggleExpand(item.children, val);
+            this.toggleExpand(item.children, val)
           }
-        });
+        })
       } else {
-        this.$set(data, "expand", val);
+        this.$set(data, 'expand', val)
         if (data.children) {
-          this.toggleExpand(data.children, val);
+          this.toggleExpand(data.children, val)
         }
       }
     },
     collapse(list) {
       list.forEach((child) => {
         if (child.expand) {
-          child.expand = false;
+          child.expand = false
         }
-        child.children && this.collapse(child.children);
-      });
+        child.children && this.collapse(child.children)
+      })
     },
-    //展开
+    // 展开
     onExpand(e, data) {
-      if ("expand" in data) {
-        data.expand = !data.expand;
+      if ('expand' in data) {
+        data.expand = !data.expand
         if (!data.expand && data.children) {
-          this.collapse(data.children);
+          this.collapse(data.children)
         }
       } else {
-        this.$set(data, "expand", true);
+        this.$set(data, 'expand', true)
       }
     },
     getSearch() {
       getTjFramework(this.queryParams).then((res) => {
         res.data.forEach((ele) => {
-          ele.countryUrl2Base64 = "";
-          ele.settleCountryUrl2Base64 = "";
-          ele.avatarUrlBase64 = "";
-        });
-        this.data = res.data[0];
-        this.toggleExpand(this.data, true);
-      });
+          ele.countryUrl2Base64 = ''
+          ele.settleCountryUrl2Base64 = ''
+          ele.avatarUrlBase64 = ''
+        })
+        this.data = res.data[0]
+        this.toggleExpand(this.data, true)
+      })
     },
     reChongzhi() {
       this.queryParams = {
-        memberSettlePeriodId: "", //期数
-        memberCode: "", //会员编号
-        level: "", //代数
-      };
-      this.getSearch();
-    },
-  },
-};
+        memberSettlePeriodId: '', // 期数
+        memberCode: '', // 会员编号
+        level: '' // 代数
+      }
+      this.getSearch()
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -514,6 +509,7 @@ export default {
 ::v-deep .org-tree-container {
   display: block;
   background: rgba(1, 1, 1, 0) !important;
+  overflow-x: auto;
 }
 ::v-deep .rendercontent {
   .toprender {

src/views/framework/recommend/tjjg3.vue

@@ -2,51 +2,47 @@
   <div class="page">
     <topBar
       v-if="topList.length > 0"
-      :topList="topList"
+      :top-list="topList"
       :moren="moren"
-    ></topBar>
+    />
     <div class="thetopbox">
       <el-form ref="form" :model="queryParams" label-width="100px">
         <el-row>
           <el-col :span="4">
             <el-form-item :label="'会员编号'" prop="memberCode">
               <el-input
-                clearable
                 v-model="queryParams.memberCode"
-              ></el-input></el-form-item
-          ></el-col>
+                clearable
+              /></el-form-item></el-col>
           <el-col :span="4">
             <el-form-item :label="'结算期数'" prop="memberSettlePeriodId">
               <el-select
+                v-model="queryParams.memberSettlePeriodId"
                 clearable
                 :placeholder="'请选择'"
-                v-model="queryParams.memberSettlePeriodId"
               >
                 <el-option
                   v-for="item in memberSettlePeriodList"
                   :key="item.pkId"
                   :label="item.settleDate"
                   :value="item.pkId"
-                ></el-option> </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-input
-                clearable
                 v-model="queryParams.level"
-              ></el-input></el-form-item
-          ></el-col>
+                clearable
+              /></el-form-item></el-col>
           <el-col :span="4">
             <el-form-item :label="'是否固定'" prop="cantz">
-              <el-select clearable :placeholder="'请选择'" v-model="cantz">
+              <el-select v-model="cantz" clearable :placeholder="'请选择'">
                 <el-option
                   v-for="(item, index) in tzList"
                   :key="index"
                   :label="item.label"
                   :value="item.value"
-                ></el-option>
-              </el-select> </el-form-item
-          ></el-col>
+                />
+              </el-select> </el-form-item></el-col>
           <el-col :span="4" style="margin-left: 30px">
             <div class="searchbox">
               <el-button class="searchbtn" @click="getSearch"> {{ '搜索' }}</el-button>
@@ -54,23 +50,22 @@
               <el-button @click="goback"> {{ '返回' }}</el-button>
             </div>
           </el-col>
-        </el-row></el-form
-      >
+        </el-row></el-form>
     </div>
     <div class="theorgtree">
       <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
-              ref="orgTree"
+              :render-content="renderContent"
+              v-bind="$listeners"
               @on-expand="onExpand"
               @on-node-click="NodeClick"
               @on-node-mouseover="onMouseover"
               @on-node-mouseout="onMouseout"
-              :renderContent="renderContent"
-              v-bind="$listeners"
             />
           </div>
         </div>
@@ -88,11 +83,11 @@
               <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">
@@ -104,7 +99,7 @@
                 <div class="linecontent">{{ treeData.name }}</div>
               </div>
               <div class="lineboex">
-                <div class="linetitle">{{'直推代数'}}</div>
+                <div class="linetitle">{{ '直推代数' }}</div>
                 <div class="linecontent">{{ treeData.level }}</div>
               </div>
               <div class="lineboex">
@@ -117,15 +112,15 @@
                 :src="
                   'data:image/png;base64,' + treeData.settleCountryUrl2Base64
                 "
-              />
-              <div>{{'结算国家'}}</div>
+              >
+              <div>{{ '结算国家' }}</div>
             </div>
           </div>
           <div class="bottomrender">
             <div class="flexbox">
               <div class="thetitle">{{ '类型' }}</div>
               <div class="linecontent">人数</div>
-              <div class="linecontent">{{ '业绩' }}({{isLocals()}})</div>
+              <div class="linecontent">{{ '业绩' }}({{ isLocals() }})</div>
             </div>
             <div class="flexbox">
               <div class="thetitle">直推</div>
@@ -135,7 +130,7 @@
             <div class="flexbox">
               <div class="thetitle">{{ '团队' }}</div>
               <div class="linecontent">{{ data.teamNumber }}</div>
-              <div class="linecontent">{{ data.teamHistoryPerformancePv  }}</div>
+              <div class="linecontent">{{ data.teamHistoryPerformancePv }}</div>
             </div>
           </div>
         </div>
@@ -146,10 +141,10 @@
         </div>
       </div>
     </el-dialog>
-    <div class="copyContent" ref="copyContent" v-show="false">
+    <div v-show="false" ref="copyContent" class="copyContent">
       <div>{{ '会员编号' }}：{{ treeData.memberCode }}</div>
       <div>{{ '会员姓名' }}：{{ treeData.name }}</div>
-      <div>{{'直推代数'}}：{{ treeData.level }}</div>
+      <div>{{ '直推代数' }}：{{ treeData.level }}</div>
       <div>{{ '支付日期' }}：{{ treeData.payDate }}</div>
       <div>{{ '类型' }}&nbsp;&nbsp;直推&nbsp;&nbsp;团队</div>
       <div>
@@ -158,8 +153,8 @@
         }}
       </div>
       <div>
-        {{ '业绩' }}({{isLocals()}})&nbsp;&nbsp;{{ treeData.teamNumber }}&nbsp;&nbsp;{{
-          treeData.teamHistoryPerformancePv 
+        {{ '业绩' }}({{ isLocals() }})&nbsp;&nbsp;{{ treeData.teamNumber }}&nbsp;&nbsp;{{
+          treeData.teamHistoryPerformancePv
         }}
       </div>
 
@@ -168,44 +163,44 @@
 </template>
 
 <script>
-import html2canvas from "html2canvas";
-import topBar from "@/components/topBar";
+import html2canvas from 'html2canvas'
+import topBar from '@/components/topBar'
 import {
   getTjFramework,
   getMemberSettlePeriod,
-  getUrlBase,
-} from "@/api/archityecture";
-import {isLocals} from "../../../utils/numberToCurrency";
+  getUrlBase
+} from '@/api/archityecture'
+import { isLocals } from '../../../utils/numberToCurrency'
 export default {
-  name: "Tjjg3",
+  name: 'Tjjg3',
   components: {
-    topBar,
+    topBar
   },
   data() {
     return {
-      moren: "tjjg3",
+      moren: 'tjjg3',
       topList: [
         {
           name: '方案一',
-          path: "tjjg",
+          path: 'tjjg'
         },
         {
           name: '方案二',
-          path: "tjjg2",
+          path: 'tjjg2'
         },
         {
           name: '方案三',
-          path: "tjjg3",
+          path: 'tjjg3'
         },
         {
           name: '方案四',
-          path: "tjjg4",
-        },
+          path: 'tjjg4'
+        }
       ],
       queryParams: {
-        memberSettlePeriodId: "", //期数
-        memberCode: "", //会员编号
-        level: "", //代数
+        memberSettlePeriodId: '', // 期数
+        memberCode: '', // 会员编号
+        level: '' // 代数
       },
       basicSwitch: false,
       basicInfo: { id: null, label: null },
@@ -214,100 +209,100 @@ export default {
       ifShow: false,
       memberSettlePeriodList: [],
       tzList: [
-        { value: 0, label: "是" },
-        { value: 1, label: "否" },
+        { value: 0, label: '是' },
+        { value: 1, label: '否' }
       ],
-      cantz: 1, //0不可拖拽,1可拖拽
-      scale: 1,
-    };
+      cantz: 1, // 0不可拖拽,1可拖拽
+      scale: 1
+    }
   },
   created() {
-    this.getSearch();
-    this.getAvarerInfo();
+    this.getSearch()
+    this.getAvarerInfo()
   },
   methods: {
     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))
       }
     },
-    //拖拽移动
+    // 拖拽移动
     move(e) {
       if (this.cantz == 0) {
-        return;
+        return
       }
-      const odiv = e.currentTarget; // 获取元素
+      const odiv = e.currentTarget // 获取元素
 
       // 算出鼠标相对元素的位置
-      const disX = e.clientX - odiv.offsetLeft;
-      const disY = e.clientY - odiv.offsetTop;
+      const disX = e.clientX - odiv.offsetLeft
+      const disY = e.clientY - odiv.offsetTop
       document.onmousemove = (e) => {
         // 鼠标按下并移动的事件
         // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
-        const left = e.clientX - disX;
-        const top = e.clientY - disY;
+        const left = e.clientX - disX
+        const top = e.clientY - disY
 
         // 绑定元素位置到positionX和positionY上面
-        this.positionX = top;
-        this.positionY = left;
+        this.positionX = top
+        this.positionY = left
 
         // 移动当前元素
-        odiv.style.left = left + "px";
-        odiv.style.top = top + "px";
-      };
+        odiv.style.left = left + 'px'
+        odiv.style.top = top + 'px'
+      }
       document.onmouseup = () => {
-        document.onmousemove = null;
-        document.onmouseup = null;
-      };
+        document.onmousemove = null
+        document.onmouseup = null
+      }
     },
     isLocals,
     copyText() {
-      const copyContent = this.$refs.copyContent;
-      const textLines = Array.from(copyContent.querySelectorAll("div")).map(
+      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();
+      )
+      const text = textLines.join('\n')
+      const tempInput = document.createElement('textarea')
+      tempInput.value = text
+      document.body.appendChild(tempInput)
+      tempInput.select()
       try {
-        document.execCommand("copy");
+        document.execCommand('copy')
         this.$message({
           message: '复制成功',
-          type: "success",
-        });
+          type: 'success'
+        })
       } catch (error) {
         this.$message({
-          message: "复制失败",
-          type: "warning",
-        });
+          message: '复制失败',
+          type: 'warning'
+        })
       }
-      tempInput.remove();
-      window.getSelection().removeAllRanges();
+      tempInput.remove()
+      window.getSelection().removeAllRanges()
     },
-    //复制图片
+    // 复制图片
     async downloadImage() {
-      const element = this.$refs.htmlContent;
+      const element = this.$refs.htmlContent
       // 使用html2canvas将节点生成为图片
-      const canvas = await html2canvas(element);
-      const image = canvas.toDataURL("image/png");
+      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")
-            ),
-          }),
-        ]);
+            'image/png': await new Promise((resolve) =>
+              canvas.toBlob(resolve, 'image/png')
+            )
+          })
+        ])
         this.$message({
           message: '复制成功',
-          type: "success",
-        });
+          type: 'success'
+        })
       } catch (error) {
         // this.$message({
         //   message: "复制失败",
@@ -315,59 +310,59 @@ export default {
         // });
       }
       // 下载图片到本地
-      const link = document.createElement("a");
-      link.href = image;
-      link.download = "image.png";
-      link.click();
+      const link = document.createElement('a')
+      link.href = image
+      link.download = 'image.png'
+      link.click()
     },
     getAvarerInfo() {
       getMemberSettlePeriod().then((res) => {
-        this.memberSettlePeriodList = res.data;
+        this.memberSettlePeriodList = res.data
         this.memberSettlePeriodList.forEach((ele) => {
           if (ele.isThisDay == 0) {
-            this.queryParams.memberSettlePeriodId = ele.pkId;
+            this.queryParams.memberSettlePeriodId = ele.pkId
           }
-        });
-      });
+        })
+      })
     },
-    //返回
+    // 返回
     goback() {
-      this.queryParams.memberCode = this.data.parentMemberCode;
-      this.getSearch();
+      this.queryParams.memberCode = this.data.parentMemberCode
+      this.getSearch()
     },
-    //鼠标移入
+    // 鼠标移入
     onMouseover(e, data) {
-      this.basicInfo = data;
-      this.basicSwitch = true;
+      this.basicInfo = data
+      this.basicSwitch = true
     },
-    //鼠标移出
+    // 鼠标移出
     onMouseout(e, data) {
-      this.basicSwitch = false;
+      this.basicSwitch = false
     },
-    //渲染节点
+    // 渲染节点
     renderContent(h, data) {
       return (
-        <div class="xrBox">
-          <div class="neibox" on-click={() => this.showPover(data)}>
-            <div class="topbox">
+        <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">
+            <div class='centerbox'>
+              <div class='cflexbox'>
                 <img src={data.countryUrl}></img>
-                <div class="matitle">{data.memberCode}</div>
+                <div class='matitle'>{data.memberCode}</div>
               </div>
-              <div class="cflexbox">
+              <div class='cflexbox'>
                 <img src={data.settleCountryUrl2}></img>
-                <div class="matitle">{data.name}</div>
+                <div class='matitle'>{data.name}</div>
               </div>
             </div>
-            <div class="footerbox">
+            <div class='footerbox'>
               {/* 阻止冒泡事件 */}
               <div
-                class="ftopbtn"
+                class='ftopbtn'
                 on-click={() => {
-                  event.stopPropagation(), this.goTop(data);
+                  event.stopPropagation(), this.goTop(data)
                 }}
               >
                 {'置顶'}
@@ -375,80 +370,80 @@ export default {
             </div>
           </div>
         </div>
-      );
+      )
     },
     showPover(row) {
       getUrlBase({
         countryUrl2: row.countryUrl2,
         settleCountryUrl2: row.settleCountryUrl2,
-        avatarUrl: row.avatarUrl,
+        avatarUrl: row.avatarUrl
       }).then((res) => {
-        this.treeData = row;
-        this.treeData.countryUrl2Base64 = res.countryUrl2Base64;
-        this.treeData.settleCountryUrl2Base64 = res.settleCountryUrl2Base64;
-        this.treeData.avatarUrlBase64 = res.avatarUrlBase64;
+        this.treeData = row
+        this.treeData.countryUrl2Base64 = res.countryUrl2Base64
+        this.treeData.settleCountryUrl2Base64 = res.settleCountryUrl2Base64
+        this.treeData.avatarUrlBase64 = res.avatarUrlBase64
 
-        this.ifShow = true;
-      });
+        this.ifShow = true
+      })
     },
-    //置顶
+    // 置顶
     goTop(row) {
-      this.queryParams.memberCode = row.memberCode;
-      this.getSearch();
+      this.queryParams.memberCode = row.memberCode
+      this.getSearch()
     },
-    //点击节点
+    // 点击节点
     NodeClick(e, data) {},
-    //默认展开
+    // 默认展开
     toggleExpand(data, val) {
       if (Array.isArray(data)) {
         data.forEach((item) => {
-          this.$set(item, "expand", val);
+          this.$set(item, 'expand', val)
           if (item.children) {
-            this.toggleExpand(item.children, val);
+            this.toggleExpand(item.children, val)
           }
-        });
+        })
       } else {
-        this.$set(data, "expand", val);
+        this.$set(data, 'expand', val)
         if (data.children) {
-          this.toggleExpand(data.children, val);
+          this.toggleExpand(data.children, val)
         }
       }
     },
     collapse(list) {
       list.forEach((child) => {
         if (child.expand) {
-          child.expand = false;
+          child.expand = false
         }
-        child.children && this.collapse(child.children);
-      });
+        child.children && this.collapse(child.children)
+      })
     },
-    //展开
+    // 展开
     onExpand(e, data) {
-      if ("expand" in data) {
-        data.expand = !data.expand;
+      if ('expand' in data) {
+        data.expand = !data.expand
         if (!data.expand && data.children) {
-          this.collapse(data.children);
+          this.collapse(data.children)
         }
       } else {
-        this.$set(data, "expand", true);
+        this.$set(data, 'expand', true)
       }
     },
     getSearch() {
       getTjFramework(this.queryParams).then((res) => {
-        this.data = res.data[0];
-        this.toggleExpand(this.data, true);
-      });
+        this.data = res.data[0]
+        this.toggleExpand(this.data, true)
+      })
     },
     reChongzhi() {
       this.queryParams = {
-        memberSettlePeriodId: "", //期数
-        memberCode: "", //会员编号
-        level: "", //代数
-      };
-      this.getSearch();
-    },
-  },
-};
+        memberSettlePeriodId: '', // 期数
+        memberCode: '', // 会员编号
+        level: '' // 代数
+      }
+      this.getSearch()
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -556,6 +551,7 @@ export default {
 ::v-deep .org-tree-container {
   display: block;
   background: rgba(1, 1, 1, 0) !important;
+  overflow-x: auto;
 }
 ::v-deep .rendercontent {
   .toprender {

src/views/framework/recommend/tjjg4.vue

@@ -2,51 +2,47 @@
   <div class="page">
     <topBar
       v-if="topList.length > 0"
-      :topList="topList"
+      :top-list="topList"
       :moren="moren"
-    ></topBar>
+    />
     <div class="thetopbox">
       <el-form ref="form" :model="queryParams" label-width="100px">
         <el-row>
           <el-col :span="4">
             <el-form-item :label="'会员编号'" prop="memberCode">
               <el-input
-                clearable
                 v-model="queryParams.memberCode"
-              ></el-input></el-form-item
-          ></el-col>
+                clearable
+              /></el-form-item></el-col>
           <el-col :span="4">
             <el-form-item :label="'结算期数'" prop="memberSettlePeriodId">
               <el-select
+                v-model="queryParams.memberSettlePeriodId"
                 clearable
                 :placeholder="'请选择'"
-                v-model="queryParams.memberSettlePeriodId"
               >
                 <el-option
                   v-for="item in memberSettlePeriodList"
                   :key="item.pkId"
                   :label="item.settleDate"
                   :value="item.pkId"
-                ></el-option> </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-input
-                clearable
                 v-model="queryParams.level"
-              ></el-input></el-form-item
-          ></el-col>
+                clearable
+              /></el-form-item></el-col>
           <el-col :span="4">
             <el-form-item :label="'是否固定'" prop="cantz">
-              <el-select clearable :placeholder="'请选择'" v-model="cantz">
+              <el-select v-model="cantz" clearable :placeholder="'请选择'">
                 <el-option
                   v-for="(item, index) in tzList"
                   :key="index"
                   :label="item.label"
                   :value="item.value"
-                ></el-option>
-              </el-select> </el-form-item
-          ></el-col>
+                />
+              </el-select> </el-form-item></el-col>
           <el-col :span="4" style="margin-left: 30px">
             <div class="searchbox">
               <el-button class="searchbtn" @click="getSearch"> {{ '搜索' }}</el-button>
@@ -54,23 +50,22 @@
               <el-button @click="goback"> {{ '返回' }}</el-button>
             </div>
           </el-col>
-        </el-row></el-form
-      >
+        </el-row></el-form>
     </div>
     <div class="theorgtree">
       <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
-              ref="orgTree"
+              :render-content="renderContent"
+              v-bind="$listeners"
               @on-expand="onExpand"
               @on-node-click="NodeClick"
               @on-node-mouseover="onMouseover"
               @on-node-mouseout="onMouseout"
-              :renderContent="renderContent"
-              v-bind="$listeners"
             />
           </div>
         </div>
@@ -88,11 +83,11 @@
               <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">
@@ -104,7 +99,7 @@
                 <div class="linecontent">{{ treeData.name }}</div>
               </div>
               <div class="lineboex">
-                <div class="linetitle">{{'直推代数'}}</div>
+                <div class="linetitle">{{ '直推代数' }}</div>
                 <div class="linecontent">{{ treeData.level }}</div>
               </div>
               <div class="lineboex">
@@ -117,8 +112,8 @@
                 :src="
                   'data:image/png;base64,' + treeData.settleCountryUrl2Base64
                 "
-              />
-              <div>{{'结算国家'}}</div>
+              >
+              <div>{{ '结算国家' }}</div>
             </div>
           </div>
           <div class="bottomrender">
@@ -135,7 +130,7 @@
             <div class="flexbox">
               <div class="thetitle">{{ '团队' }}</div>
               <div class="linecontent">{{ data.teamNumber }}</div>
-              <div class="linecontent">{{ data.teamHistoryPerformancePv  }}</div>
+              <div class="linecontent">{{ data.teamHistoryPerformancePv }}</div>
             </div>
           </div>
         </div>
@@ -146,10 +141,10 @@
         </div>
       </div>
     </el-dialog>
-    <div class="copyContent" ref="copyContent" v-show="false">
+    <div v-show="false" ref="copyContent" class="copyContent">
       <div>{{ '会员编号' }}：{{ treeData.memberCode }}</div>
       <div>{{ '会员姓名' }}：{{ treeData.name }}</div>
-      <div>{{'直推代数'}}：{{ treeData.level }}</div>
+      <div>{{ '直推代数' }}：{{ treeData.level }}</div>
       <div>{{ '支付日期' }}：{{ treeData.payDate }}</div>
       <div>{{ '类型' }}&nbsp;&nbsp;直推&nbsp;&nbsp;团队</div>
       <div>
@@ -158,53 +153,53 @@
         }}
       </div>
       <div>
-        {{ '业绩'}}({{ isLocals() }})&nbsp;&nbsp;{{
+        {{ '业绩' }}({{ isLocals() }})&nbsp;&nbsp;{{
           treeData.teamNumber
-        }}&nbsp;&nbsp;{{ treeData.teamHistoryPerformancePv  }}
+        }}&nbsp;&nbsp;{{ treeData.teamHistoryPerformancePv }}
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import html2canvas from "html2canvas";
-import topBar from "@/components/topBar";
+import html2canvas from 'html2canvas'
+import topBar from '@/components/topBar'
 import {
   getTjFramework,
   getMemberSettlePeriod,
-  getUrlBase,
-} from "@/api/archityecture";
-import { isLocals } from "../../../utils/numberToCurrency";
+  getUrlBase
+} from '@/api/archityecture'
+import { isLocals } from '../../../utils/numberToCurrency'
 export default {
-  name: "Tjjg4",
+  name: 'Tjjg4',
   components: {
-    topBar,
+    topBar
   },
   data() {
     return {
-      moren: "tjjg4",
+      moren: 'tjjg4',
       topList: [
         {
           name: '方案一',
-          path: "tjjg",
+          path: 'tjjg'
         },
         {
           name: '方案二',
-          path: "tjjg2",
+          path: 'tjjg2'
         },
         {
           name: '方案三',
-          path: "tjjg3",
+          path: 'tjjg3'
         },
         {
           name: '方案四',
-          path: "tjjg4",
-        },
+          path: 'tjjg4'
+        }
       ],
       queryParams: {
-        memberSettlePeriodId: "", //期数
-        memberCode: "", //会员编号
-        level: "", //代数
+        memberSettlePeriodId: '', // 期数
+        memberCode: '', // 会员编号
+        level: '' // 代数
       },
       basicSwitch: false,
       basicInfo: { id: null, label: null },
@@ -213,99 +208,99 @@ export default {
       ifShow: false,
       memberSettlePeriodList: [],
       tzList: [
-        { value: 0, label: "是" },
-        { value: 1, label: "否" },
+        { value: 0, label: '是' },
+        { value: 1, label: '否' }
       ],
-      cantz: 1, //0不可拖拽,1可拖拽
-      scale: 1,
-    };
+      cantz: 1, // 0不可拖拽,1可拖拽
+      scale: 1
+    }
   },
   created() {
-    this.getSearch();
-    this.getAvarerInfo();
+    this.getSearch()
+    this.getAvarerInfo()
   },
   methods: {
-    //拖拽移动
+    // 拖拽移动
     move(e) {
       if (this.cantz == 0) {
-        return;
+        return
       }
-      const odiv = e.currentTarget; // 获取元素
+      const odiv = e.currentTarget // 获取元素
 
       // 算出鼠标相对元素的位置
-      const disX = e.clientX - odiv.offsetLeft;
-      const disY = e.clientY - odiv.offsetTop;
+      const disX = e.clientX - odiv.offsetLeft
+      const disY = e.clientY - odiv.offsetTop
       document.onmousemove = (e) => {
         // 鼠标按下并移动的事件
         // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
-        const left = e.clientX - disX;
-        const top = e.clientY - disY;
+        const left = e.clientX - disX
+        const top = e.clientY - disY
 
         // 绑定元素位置到positionX和positionY上面
-        this.positionX = top;
-        this.positionY = left;
+        this.positionX = top
+        this.positionY = left
 
         // 移动当前元素
-        odiv.style.left = left + "px";
-        odiv.style.top = top + "px";
-      };
+        odiv.style.left = left + 'px'
+        odiv.style.top = top + 'px'
+      }
       document.onmouseup = () => {
-        document.onmousemove = null;
-        document.onmouseup = null;
-      };
+        document.onmousemove = null
+        document.onmouseup = null
+      }
     },
     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))
       }
     },
     isLocals,
     copyText() {
-      const copyContent = this.$refs.copyContent;
-      const textLines = Array.from(copyContent.querySelectorAll("div")).map(
+      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();
+      )
+      const text = textLines.join('\n')
+      const tempInput = document.createElement('textarea')
+      tempInput.value = text
+      document.body.appendChild(tempInput)
+      tempInput.select()
       try {
-        document.execCommand("copy");
+        document.execCommand('copy')
         this.$message({
           message: '复制成功',
-          type: "success",
-        });
+          type: 'success'
+        })
       } catch (error) {
         this.$message({
-          message: "复制失败",
-          type: "warning",
-        });
+          message: '复制失败',
+          type: 'warning'
+        })
       }
-      tempInput.remove();
-      window.getSelection().removeAllRanges();
+      tempInput.remove()
+      window.getSelection().removeAllRanges()
     },
     async downloadImage() {
-      const element = this.$refs.htmlContent;
+      const element = this.$refs.htmlContent
       // 使用html2canvas将节点生成为图片
-      const canvas = await html2canvas(element);
-      const image = canvas.toDataURL("image/png");
+      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")
-            ),
-          }),
-        ]);
+            'image/png': await new Promise((resolve) =>
+              canvas.toBlob(resolve, 'image/png')
+            )
+          })
+        ])
         this.$message({
           message: '复制成功',
-          type: "success",
-        });
+          type: 'success'
+        })
       } catch (error) {
         // this.$message({
         //   message: "复制失败",
@@ -313,59 +308,59 @@ export default {
         // });
       }
       // 下载图片到本地
-      const link = document.createElement("a");
-      link.href = image;
-      link.download = "image.png";
-      link.click();
+      const link = document.createElement('a')
+      link.href = image
+      link.download = 'image.png'
+      link.click()
     },
     getAvarerInfo() {
       getMemberSettlePeriod().then((res) => {
-        this.memberSettlePeriodList = res.data;
+        this.memberSettlePeriodList = res.data
         this.memberSettlePeriodList.forEach((ele) => {
           if (ele.isThisDay == 0) {
-            this.queryParams.memberSettlePeriodId = ele.pkId;
+            this.queryParams.memberSettlePeriodId = ele.pkId
           }
-        });
-      });
+        })
+      })
     },
-    //返回
+    // 返回
     goback() {
-      this.queryParams.memberCode = this.data.parentMemberCode;
-      this.getSearch();
+      this.queryParams.memberCode = this.data.parentMemberCode
+      this.getSearch()
     },
-    //鼠标移入
+    // 鼠标移入
     onMouseover(e, data) {
-      this.basicInfo = data;
-      this.basicSwitch = true;
+      this.basicInfo = data
+      this.basicSwitch = true
     },
-    //鼠标移出
+    // 鼠标移出
     onMouseout(e, data) {
-      this.basicSwitch = false;
+      this.basicSwitch = false
     },
-    //渲染节点
+    // 渲染节点
     renderContent(h, data) {
       return (
-        <div class="xrBox">
-          <div class="neibox" on-click={() => this.showPover(data)}>
-            <div class="topbox">
+        <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">
+            <div class='centerbox'>
+              <div class='cflexbox'>
                 <img src={data.countryUrl}></img>
-                <div class="matitle">{data.memberCode}</div>
+                <div class='matitle'>{data.memberCode}</div>
               </div>
-              <div class="cflexbox">
+              <div class='cflexbox'>
                 <img src={data.settleCountryUrl2}></img>
-                <div class="matitle">{data.name}</div>
+                <div class='matitle'>{data.name}</div>
               </div>
             </div>
-            <div class="footerbox">
+            <div class='footerbox'>
               {/* 阻止冒泡事件 */}
               <div
-                class="ftopbtn"
+                class='ftopbtn'
                 on-click={() => {
-                  event.stopPropagation(), this.goTop(data);
+                  event.stopPropagation(), this.goTop(data)
                 }}
               >
                 {'置顶'}
@@ -373,81 +368,81 @@ export default {
             </div>
           </div>
         </div>
-      );
+      )
     },
     showPover(row) {
       getUrlBase({
         countryUrl2: row.countryUrl2,
         settleCountryUrl2: row.settleCountryUrl2,
-        avatarUrl: row.avatarUrl,
+        avatarUrl: row.avatarUrl
       }).then((res) => {
-        this.treeData = row;
-        this.treeData.countryUrl2Base64 = res.countryUrl2Base64;
-        this.treeData.settleCountryUrl2Base64 = res.settleCountryUrl2Base64;
-        this.treeData.avatarUrlBase64 = res.avatarUrlBase64;
+        this.treeData = row
+        this.treeData.countryUrl2Base64 = res.countryUrl2Base64
+        this.treeData.settleCountryUrl2Base64 = res.settleCountryUrl2Base64
+        this.treeData.avatarUrlBase64 = res.avatarUrlBase64
 
-        this.ifShow = true;
-      });
+        this.ifShow = true
+      })
     },
-    //置顶
+    // 置顶
     goTop(row) {
-      this.queryParams.memberCode = row.memberCode;
-      this.getSearch();
+      this.queryParams.memberCode = row.memberCode
+      this.getSearch()
     },
-    //点击节点
+    // 点击节点
     NodeClick(e, data) {},
-    //默认展开
+    // 默认展开
     toggleExpand(data, val) {
       if (Array.isArray(data)) {
         data.forEach((item) => {
-          this.$set(item, "expand", val);
+          this.$set(item, 'expand', val)
           if (item.children) {
-            this.toggleExpand(item.children, val);
+            this.toggleExpand(item.children, val)
           }
-        });
+        })
       } else {
-        this.$set(data, "expand", val);
+        this.$set(data, 'expand', val)
         if (data.children) {
-          this.toggleExpand(data.children, val);
+          this.toggleExpand(data.children, val)
         }
       }
     },
     collapse(list) {
       list.forEach((child) => {
         if (child.expand) {
-          child.expand = false;
+          child.expand = false
         }
-        child.children && this.collapse(child.children);
-      });
+        child.children && this.collapse(child.children)
+      })
     },
-    //展开
+    // 展开
     onExpand(e, data) {
-      if ("expand" in data) {
-        data.expand = !data.expand;
+      if ('expand' in data) {
+        data.expand = !data.expand
         if (!data.expand && data.children) {
-          this.collapse(data.children);
+          this.collapse(data.children)
         }
       } else {
-        this.$set(data, "expand", true);
+        this.$set(data, 'expand', true)
       }
     },
     getSearch() {
       getTjFramework(this.queryParams).then((res) => {
-        this.data = res.data[0];
-        //默认是否展开
-        this.toggleExpand(this.data, false);
-      });
+        this.data = res.data[0]
+        // 默认是否展开
+        this.toggleExpand(this.data, false)
+      })
     },
     reChongzhi() {
       this.queryParams = {
-        memberSettlePeriodId: "", //期数
-        memberCode: "", //会员编号
-        level: "", //代数
-      };
-      this.getSearch();
-    },
-  },
-};
+        memberSettlePeriodId: '', // 期数
+        memberCode: '', // 会员编号
+        level: '' // 代数
+      }
+      this.getSearch()
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -555,6 +550,7 @@ export default {
 }
 ::v-deep .org-tree-container {
   display: block;
+  overflow-x: auto;
 }
 ::v-deep .rendercontent {
   .toprender {