big-model-web/src/views/workflow/index.vue

<template>
  <div class="workflow">
    <TeleportContainer />
    <div class="workflow-chart">
      <workflowChart :data="state.workflowData" ref="ref_workflow" />
    </div>
    <div class="operations">
      <div>
        <div
          class="__hover-bg"
          @click="WorkflowStore.$patch((s: any) => (s.envVars.show = true))"
        >
          <SvgIcon name="env" />
        </div>
      </div>
      <a-button type="primary" @click="getJsonData">保存配置</a-button>
    </div>
    <div class="panel">
      <workflowPanel />
      <envVarsPanel />
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, provide, reactive, ref } from 'vue'
import workflowChart from './chart/index.vue'
import workflowPanel from './chart/panel-index.vue'
import envVarsPanel from './instance/component/vars/evn-index.vue'
import { getTeleport } from '@antv/x6-vue-shape'
import { data0, data1 } from './mockJson'
import { useWorkflowStore } from '@/stores'
import {
  workflowDraftDetail,
  workflowDraftSave,
} from '@/api/modules/workflow/chart'

const TeleportContainer = getTeleport()
const WorkflowStore = useWorkflowStore()
const emit = defineEmits([])
const props = defineProps({
  ID: {},
})
const { proxy }: any = getCurrentInstance()
const state: any = reactive({
  workflowData: null,
})
const ref_workflow = ref()

const getJsonData = () => {
  const data = ref_workflow.value.toJSON()
  const offset = WorkflowStore.graph.translate()
  const res: any = {
    envVars: WorkflowStore.envVars.vars,
    graph: {
      nodes: [],
      edges: [],
      viewport: {
        zoom: WorkflowStore.graph.zoom(),
        x: offset.tx,
        y: offset.ty,
      },
    },
  }
  JSON.parse(JSON.stringify(data.cells)).forEach((cell: any) => {
    if (cell.shape === 'workflow-node') {
      const node: any = {
        id: cell.id,
        x: cell.position.x,
        y: cell.position.y,
        data: cell.data.workflowData,
      }
      delete node.data.edgeSource
      delete node.data.inVars
      res.graph.nodes.push(node)
    } else if (cell.shape === 'edge') {
      const edge: any = {
        target: cell.target.cell,
        source: cell.source.cell,
      }
      if (!cell.source.port.includes('end')) {
        edge.port = cell.source.port
      }
      res.graph.edges.push(edge)
    }
  })
  console.log(res)
}
const initData = () => {
  workflowDraftDetail(props.ID)
  const d = data0
  WorkflowStore.$patch((s: any) => (s.envVars.vars = d.envVars || []))
  state.workflowData = d.graph
}
onMounted(() => {
  initData()
})
</script>

<style lang="scss" scoped>
.workflow {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  position: relative;
  .workflow-chart {
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .operations {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    > div {
      display: flex;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.95);
      box-shadow: 0 0px 8px rgba(0, 0, 0, 0.1);
      border-radius: 6px;
      padding: 4px;
      > div {
        min-width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .panel {
    z-index: 2;
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 10px;
    height: calc(100% - 10px - 32px - 10px);
  }
}
</style>