优化可配置爬虫前端界面

frontend/src/components/Config/ConfigList.vue

@@ -493,6 +493,7 @@ export default {
         },
         series: [
           {
+            animation: false,
             type: 'graph',
             layout: 'force',
             symbolSize: 50,
@@ -515,7 +516,7 @@ export default {
             force: {
               initLayout: 'force',
               repulsion: 100,
-              gravity: 0.01,
+              gravity: 0.00001,
               edgeLength: 200
             },
             // draggable: true,
@@ -529,7 +530,29 @@ export default {
               }
             }
           }
-        ]
+        ],
+        tooltip: {
+          // formatter: '{b0}: {c0}<br />{b1}: {c1}',
+          formatter: (params) => {
+            if (!params.data.fields) return
+
+            let str = ''
+            str += `<label>${this.$t('Stage')}: ${params.name}</label><br><br>`
+            str += `<label>${this.$t('Fields')}: </label><br>`
+            str += '<ul style="list-style: none; padding: 0; margin: 0;">'
+            for (let i = 0; i < params.data.fields.length; i++) {
+              const f = params.data.fields[i]
+              str += `
+<li>
+<span style="display: inline-block; min-width: 50px; font-weight: bolder; text-align: right">${f.name}: </span>
+${f.css || f.xpath} ${f.attr ? ('(' + f.attr + ')') : ''} ${f.next_stage ? (' --> ' + '<span style="font-weight:bolder">' + f.next_stage + '</span>') : ''}
+</li>
+`
+            }
+            str += '</ul>'
+            return str
+          }
+        }
       }
       const el = document.querySelector('#process-chart')
       this.processChart = echarts.init(el)

frontend/src/components/TableView/FieldsTableView.vue

@@ -83,7 +83,7 @@
               <el-input v-model="scope.row.attr" :placeholder="$t('Attribute')"/>
             </template>
             <template v-else>
-              <span style="margin-left: 15px">
+              <span style="margin-left: 15px; color: lightgrey">
                 N/A
               </span>
             </template>
@@ -93,6 +93,8 @@
           <template slot-scope="scope">
             <el-select
               v-model="scope.row.next_stage"
+              :class="!scope.row.next_stage ? 'disabled' : ''"
+              @change="onChangeNextStage(scope.row)"
             >
               <el-option :label="$t('No Next Stage')" value=""/>
               <el-option v-for="n in stageNames" :key="n" :label="n" :value="n"/>
@@ -237,6 +239,13 @@ export default {
           }
         }
       }
+    },
+    onChangeNextStage (row) {
+      this.fields.forEach(f => {
+        if (f.name !== row.name) {
+          this.$set(f, 'next_stage', '')
+        }
+      })
     }
   }
 }
@@ -333,4 +342,8 @@ export default {
   .action-button-group >>> .el-checkbox__label {
     font-size: 12px;
   }
+
+  .el-table.edit >>> .el-select.disabled .el-input__inner {
+    color: lightgrey;
+  }
 </style>