页面提示优化

src/views/user-path/add-funnel.vue

@@ -17,7 +17,9 @@
                                 placeholder="请输入漏斗名称" 
                                 style="width:430px;"
                                 @blur="validValue"></el-input>
+                                <span v-show="disabledSave" style="color: red; font-size: 12px;">请输入漏斗名称</span>
                             </el-form-item>
+                            
                         </el-col>
                         <el-col :span="3" style="padding:0;text-align:right;padding-right:15px;">
                             <el-button type="primary" size="small" @click="saveAddAndEdit">保存</el-button>
@@ -28,7 +30,7 @@
                     <p>请以用户逐步触发的事件为依据，构造漏斗、系统会自动计算整个过程的转化率。如果事件之间不连续，转化率为0！</p>
                 </div>
                 <div class="step-content" v-for="(item,index) in searchParam.actionModelList" :key="index">
-                    <span>步骤{{index + 1}}</span>
+                    <span class="st">步骤{{index + 1}}</span>
                     <el-form 
                     ref="form" 
                     class="step-form" 
@@ -37,7 +39,8 @@
                     style="width:100%;">
                         <el-col :span="11">
                             <el-form-item label="步骤名称">
-                                <el-input v-model="item.actionName" @blur="stepNameRepeat(item.actionName, index)" maxlength="30" placeholder="请输入步骤名称" style="width:250px;"></el-input>
+                                <el-input :class="{'red-b': item.nameCheck}" v-model="item.actionName" @blur="stepNameRepeat(item.actionName, index)" maxlength="30" placeholder="请输入步骤名称" style="width:250px;"></el-input>
+                                <span v-show="item.nameCheck" style="color: red; font-size: 12px;">名称重复，请重新输入</span>
                             </el-form-item>
                         </el-col>
                         <el-col :span="11">
@@ -56,7 +59,7 @@
                                 filterable 
                                 placeholder="请选择用户触发事件" 
                                 :class="{'red-b': item.unchecked}"
-                                @blur="selectValid(item)"
+                                @blur="selectValid(item, index)"
                                 @change="eventChange(item, index)"
                                 style="width:300px"
                                 >
@@ -68,6 +71,7 @@
                                     >
                                     </el-option>
                                 </el-select>
+                                <span v-show="item.unchecked" style="color: red; font-size: 12px;">{{tipText}}</span>
                             </el-form-item>
                         </el-col>
                     </el-form>
@@ -95,7 +99,8 @@ export default {
                     eventId: ''
                 }]
             },
-            eventSelect: []
+            eventSelect: [],
+            tipText: '名称重复，请重新输入'
         }
     },
     created() {
@@ -160,50 +165,46 @@ export default {
         },
         // 步骤名称不重复
         stepNameRepeat(val, index) {
-            let arr = [];
+            this.$set(this.searchParam.actionModelList[index], 'nameCheck', false);
             for(let i = 0; i < this.searchParam.actionModelList.length; i++) {
                 if(i != index) {
-                    arr.push(this.searchParam.actionModelList[i].actionName);
+                    if(val == this.searchParam.actionModelList[i].actionName) {
+                        this.$set(this.searchParam.actionModelList[index], 'nameCheck', true);
+                    }
                 }
             }
-            arr.forEach((item) => {
-                if(val == item) {
-                    this.$message.error('步骤名称重复');
-                    this.searchParam.actionModelList[index].actionName = '';
-                }
-            })
         },
-        // 触发事件不重复
+        // 触发事件选择时重复判断
         eventChange(item, index) {
-            let arr = [];
             for(let i = 0; i < this.searchParam.actionModelList.length; i++) {
                 if(index != i) {
                     if(item.eventId == this.searchParam.actionModelList[i].eventId) {
-                        this.$message.error('触发事件重复');
-                        this.searchParam.actionModelList[index].eventId = '';
+                        this.$set(this.searchParam.actionModelList[index], 'unchecked', true);
                     }
                 }
             }
         },
         // 触发事件是否为空样式
-        selectValid(item) {
+        selectValid(item, index) {
             if(item.eventId) {
-                this.$set(this.searchParam.actionModelList[i], 'unchecked', false);
+                this.$set(this.searchParam.actionModelList[index], 'unchecked', false);
             }
         },
         // 保存
         saveAddAndEdit() {
             if(!this.searchParam.name) {
-                this.$message.error('请输入漏斗名称');
                 this.disabledSave = true;
                 return;
             }
             for(let i = 0; i < this.searchParam.actionModelList.length; i++) {
                 if(!this.searchParam.actionModelList[i].eventId) {
-                    this.$message.error('触发事件不能为空');
+                    this.tipText = '触发事件不能为空';
                     this.$set(this.searchParam.actionModelList[i], 'unchecked', true);
                     return;
                 }
+                if(this.searchParam.actionModelList[i].nameCheck || this.searchParam.actionModelList[i].unchecked) {  // 有步骤名称重复
+                    return;
+                }
             }
             let req = this.searchParam;
             this.getData(
@@ -268,7 +269,7 @@ export default {
                 overflow: hidden;
                 margin: 30px 40px 0px;
                 border: 1px solid #EDEDEE;
-                span {
+                span.st {
                     float: left;
                     font-size: 14px;
                     color: #58ADE8;

src/views/user-path/funnel-data.vue

@@ -222,6 +222,18 @@ export default {
                 lineTop = 20;
                 lineLeft = 400;
                 lineHeight = 366;
+            }else if(len == 7) {
+                arrowTop = 50;
+                arrowH = 340;
+                lineTop = 10;
+                lineLeft = 400;
+                lineHeight = 406;
+            }else {
+                arrowTop = 40;
+                arrowH = 360;
+                lineTop = 10;
+                lineLeft = 400;
+                lineHeight = 436;
             }
             for (let i = 0; i < lineargroup.length; i++) {
                 let obj1 = {