3368 网络图缩放优化,复消增加参数和报单中心input不禁用

src/components/TreeChart/index.vue

@@ -10,13 +10,16 @@ import { CanvasRenderer } from "echarts/renderers";
 echarts.use([TooltipComponent, TreeChart, CanvasRenderer]);
 let myChart;
 let option;
+var treeNodePadding = 90; //节点间最小间隔
+var treeTopPadding = 120; //tree距顶端的距离
 export default {
   name: "TreeChart",
-  data(){
-    return{
-      centerLoca:[]
-    }
-  },  
+  data() {
+    return {
+      centerLoca: [],
+      fontSize:6,
+    };
+  },
   props: {
     treeData: {
       type: Object,
@@ -58,7 +61,7 @@ export default {
       const that = this;
       // console.log('$el:', this.$el)
       myChart = echarts.init(this.$el);
-      myChart.clear()
+      myChart.clear();
       option = {
         tooltip: {
           // 提示框浮层设置
@@ -192,7 +195,7 @@ export default {
             // 提示框浮层的文本样式
             color: "#333", // 文字颜色
             // fontWeight: 400, // 字体粗细
-            // fontSize: 14, // 字体大小
+            // fontSize: that.fontSize, // 字体大小
             // lineHeight: 20, // 行高
             // width: 60, // 文本显示宽度
             // 文字超出宽度是否截断或者换行；只有配置width时有效
@@ -225,12 +228,15 @@ export default {
             layout: "orthogonal", // 树图的布局，正交orthogonal和径向radial两种
             orient: "TB", // 树图中正交布局的方向，'LR','RL','TB','BT'，只有布局是正交时才生效
             edgeShape: "polyline", // 树图边的形状，有曲线curve和折线polyline两种，只有正交布局下生效
+            // edgeForkPosition:"10%",
             roam: true, // 是否开启鼠标缩放或平移，默认false
             zoom: 0.8,
             scaleLimit: {
               min: 0.5,
               max: 10,
             },
+            // center: ['400%', '60%'],
+            // center: [-50, 50],
             initialTreeDepth: -1, // 树图初始的展开层级（深度），根节点是0，不设置时全部展开
             // symbol: 'emptyCircle', // 标记的图形，默认是emptyCircle;circle,rect,roundRect,triangle,diamond,pin,arrow,none
             symbol: function (value, params) {
@@ -261,7 +267,7 @@ export default {
               position: "bottom", // 标签位置
               verticalAlign: "middle", // 文字垂直对齐方式，默认自动，top，middle，bottom
               align: "center", // 文字水平对齐方式，默认自动，left，right，center
-              // fontSize: 14, // 字体大小
+              fontSize: that.fontSize, // 字体大小
               color: "#333", // 字体颜色
               backgroundColor: "#F0F5FA", // 文字块的背景颜色
               borderColor: "#1890FF", // 文字块边框颜色
@@ -271,7 +277,7 @@ export default {
               padding: [5, 6], // 文字块内边距
               shadowColor: "rgba(0,121,221,0.6)", // 文字块的背景阴影颜色
               shadowBlur: 6, // 文字块的背景阴影长度
-              // width: 60,
+              width: 80,
               // 文字超出宽度是否截断或者换行；只有配置width时有效
               overflow: "truncate", // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
               ellipsis: "...",
@@ -282,14 +288,7 @@ export default {
                 // return params.data.REAL_NAME
               },
             },
-            labelLayout(params) {
-                return {
-                    // x: params.rect.x + 10,
-                    // y: params.rect.y + params.rect.height / 2,
-                    // verticalAlign: 'middle',
-                    // align: 'left'
-                }
-            },
+             
             lineStyle: {
               // 树图边的样式
               color: "rgba(0,0,0,.35)", // 树图边的颜色
@@ -361,26 +360,42 @@ export default {
           },
         ],
       };
-      myChart.resize();
-      option && myChart.setOption(option, true);
+      
+      // myChart.resize();
+      option && myChart.setOption(option, true); 
+     
       myChart.getZr().off("mousewheel");
       myChart.getZr().on("mousewheel", (param) => {
         let currentOption = myChart.getOption();
-        console.log(currentOption.series[0])
-        if(currentOption.center != null){
-          this.centerLoca = currentOption.center;
-        }
+        console.log(currentOption);
         if (currentOption.series[0]) {
           let zoom = currentOption.series[0].zoom;
+          // that.fontSize = 10 * zoom
           currentOption.textStyle.fontSize = 10 * zoom;
-          currentOption.series[0].label.width = 130 * zoom;
+          currentOption.series[0].label.fontSize = 8 * zoom;
+          currentOption.series[0].label.width = 105 * zoom;
           currentOption.series[0].label.distance = 18 * zoom;
           currentOption.series[0].leaves.distance = 18 * zoom;
-          
           option && myChart.setOption(currentOption);
         }
       });
     },
+  
+    resize() {
+      let elesArr = Array.from(
+        new Set(myChart._chartsViews[0]._data._graphicEls)
+      );
+      let dep = myChart._chartsViews[0]._data.tree.root.height; //获取树高
+      let layer_height = 100; //层级之间的高度
+      let currentHeight = layer_height * (dep + 1) || layer_height;
+      let newHeight = Math.max(currentHeight, layer_height);
+      this.chartHeight = newHeight + "px";
+      let layer_width = 300; // 兄弟节点之间的距离
+      let currentWidth = layer_width * (elesArr.length - 1) || layer_width;
+      let newWidth = Math.max(currentWidth, layer_width);
+      this.chartWidth = newWidth + "px";
+      this.myChart.resize();
+    },
   },
 };
 </script>

src/lang/en.js

@@ -369,7 +369,8 @@ export default {
     lgaName: 'Local Government Area',
     cityName: 'City',
     address: 'Detailed Address',
-    memberNotFound: 'Member Not Found'
+    memberNotFound: 'Member Not Found',
+    declarationCenterNumber:'Sponsor Code'
   },
 
   user: {

src/lang/zh.js

@@ -367,7 +367,10 @@ export default {
     lgaName: '行政区',
     cityName: '城市',
     address: '详细地址',
-    memberNotFound: '找不到这个用户'
+    memberNotFound: '找不到这个用户',
+    declarationCenterNumber:'报单中心编号'
+
+
   },
   user: {
     email: '电子邮箱',

src/views/shop/standard-products.vue

@@ -102,6 +102,12 @@
               </el-row>
             </div>
             <el-divider />
+            <el-form>
+              <el-form-item :label="$t('shop.declarationCenterNumber')">
+                <el-input v-model="recUserName"   />
+              </el-form-item>
+            </el-form>
+            
             <!-- 支付方式/账户余额 {{ cashCurrency }}:  -->
             <div class="" style="margin: 15px 0;">
               <el-row :gutter="20" type="flex" style="flex-wrap: wrap;">
@@ -321,7 +327,8 @@ export default {
               value: 'userOrder'
             }
           ]
-        }
+        },
+        
       },
       payStackScreenWidth: getScreenWidth() > 500 ? '450px' : getScreenWidth() + 'px',
 
@@ -344,7 +351,9 @@ export default {
         TAX_RATE: 0,
         taxAmount: 0
       },
-      imageStyle: 'margin-top: -50px;'
+      imageStyle: 'margin-top: -50px;',
+      recRealName:null,
+      recUserName:null,
     }
   },
   computed: {
@@ -573,7 +582,8 @@ export default {
           email: this.form.email,
           addressId: this.addressId,
           address: this.address,
-          payType: this.payType
+          payType: this.payType,
+          userName:this.recUserName
         }
         if (this.payType === 'pay_stack') {
           // PayStack支付

src/views/user/brand-ambassador.vue

@@ -184,15 +184,15 @@
 </template>
 
 <script>
-import {fetchBrandAmbassador, createBrandAmbassador, fetchFullInfo} from '@/api/user'
-import waves from '@/directive/waves'
-import {formatAmount, getScreenWidth} from "@/utils"
+import { deleteApproachOrder } from "@/api/shop"
+import { createBrandAmbassador, fetchBrandAmbassador, fetchFullInfo } from '@/api/user'
 import Pagination from '@/components/Pagination'
-import paystack from 'vue-paystack'
+import waves from '@/directive/waves'
+import region from "@/store/modules/region"
+import { getScreenWidth } from "@/utils"
 import tool from "@/utils/tool"
 import usersInfo from "@/utils/usersInfo"
-import {deleteApproachOrder} from "@/api/shop"
-import region from "@/store/modules/region"
+import paystack from 'vue-paystack'
 
 export default {
   name: 'brandAmbassador',

src/views/user/welcome-pack.vue

@@ -22,7 +22,7 @@
               </el-select>
             </el-form-item>
             <el-form-item :label="$t('user.stockistCode')">
-              <el-input v-model="form.decUserName" readonly />
+              <el-input v-model="form.decUserName" />
             </el-form-item>
 
             <el-form-item>