From 4e8bd8a06b26d688e96b29e629f44900d6699c63 Mon Sep 17 00:00:00 2001 From: marvzhang Date: Wed, 27 Nov 2019 20:33:25 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8F=AF=E9=85=8D=E7=BD=AE=E7=88=AC=E8=99=AB?= =?UTF-8?q?=E5=8A=A0=E5=85=A5=E5=8F=AF=E8=A7=86=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Config/ConfigList.vue | 327 ++++++++++++------ 1 file changed, 220 insertions(+), 107 deletions(-) diff --git a/frontend/src/components/Config/ConfigList.vue b/frontend/src/components/Config/ConfigList.vue index e54469a0..1b03c335 100644 --- a/frontend/src/components/Config/ConfigList.vue +++ b/frontend/src/components/Config/ConfigList.vue @@ -40,57 +40,62 @@ /> - - - - - - + + + + + + + + + + - -
-
    -
  • - - -
    • -
  • - - - - -
    • -
  • - - - - -
    • -
  • - -
    + +
    +
      +
    • + + +
      • +
    • + + + + +
      • +
    • + + + + +
      • +
    • + +
      - + +
      +
      • +
    +
    + +
    +
    + {{$t('Run')}} + + {{$t('ExtractFields')}} + + {{$t('Preview')}} + {{$t('Save')}}
    -
    • -
-
+ + -
-
- {{$t('Run')}} - {{$t('Extract Fields')}} - - {{$t('Preview')}} - {{$t('Save')}} -
-
- - - - - + + + + + + + + +
+ + + + @@ -174,6 +190,7 @@ import { mapState } from 'vuex' +import echarts from 'echarts' import FieldsTableView from '../TableView/FieldsTableView' import CrawlConfirmDialog from '../Common/CrawlConfirmDialog' @@ -183,6 +200,13 @@ export default { CrawlConfirmDialog, FieldsTableView }, + watch: { + activeTab () { + setTimeout(() => { + this.renderProcessChart() + }, 0) + } + }, data () { return { crawlTypeList: [ @@ -203,7 +227,9 @@ export default { { name: 'is_attr', label: 'Is Attribute' }, { name: 'attr', label: 'Attribute' }, { name: 'next_stage', label: 'Next Stage' } - ] + ], + activeTab: 'stages', + processChart: undefined } }, computed: { @@ -259,6 +285,35 @@ export default { return 'invalid' } return '' + }, + stageNodes () { + const elChart = document.querySelector('#process-chart') + const totalWidth = Number(getComputedStyle(elChart).width.replace('px', '')) + const stages = Object.values(this.spiderForm.config.stages) + return stages.map((stage, i) => { + return { + name: stage.name, + // x: i * totalWidth / stages.length, + // y: 0, + ...stage + } + }) + }, + stageEdges () { + const edges = [] + const stages = Object.values(this.spiderForm.config.stages) + stages.forEach(stage => { + for (let i = 0; i < stage.fields.length; i++) { + const field = stage.fields[i] + if (field.next_stage) { + edges.push({ + source: stage.name, + target: field.next_stage + }) + } + } + }) + return edges } }, methods: { @@ -432,6 +487,59 @@ export default { fields: [newField] } this.$set(this.spiderForm.config, 'stages', stages) + }, + renderProcessChart () { + const option = { + title: { + text: this.$t('Stage Process') + }, + series: [ + { + type: 'graph', + layout: 'force', + symbolSize: 50, + roam: true, + label: { + normal: { + show: true + } + }, + edgeSymbol: ['circle', 'arrow'], + edgeSymbolSize: [4, 10], + edgeLabel: { + normal: { + textStyle: { + fontSize: 20 + } + } + }, + focusOneNodeAdjacency: true, + force: { + initLayout: 'force', + repulsion: 100, + gravity: 0.01, + edgeLength: 200 + }, + // draggable: true, + data: this.stageNodes, + links: this.stageEdges, + lineStyle: { + normal: { + opacity: 0.9, + width: 2, + curveness: 0 + } + } + } + ] + } + const el = document.querySelector('#process-chart') + this.processChart = echarts.init(el) + this.processChart.setOption(option) + this.processChart.resize() + }, + onTabClick (tab) { + this.activeTab = tab.name } }, created () { @@ -626,4 +734,9 @@ export default { .invalid >>> .el-input__inner { border: 1px solid red !important; } + + #process-chart { + width: 100%; + height: 480px; + }