From d1ac67834e4bd2621809a9c778714bf575f80117 Mon Sep 17 00:00:00 2001
From: wente <329538422@qq.com>
Date: 星期三, 29 十一月 2023 16:16:15 +0800
Subject: [PATCH] 流程图

---
 web/src/views/modules/flowChart/flowChartEdge/index.vue |  143 +++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 143 insertions(+), 0 deletions(-)

diff --git a/web/src/views/modules/flowChart/flowChartEdge/index.vue b/web/src/views/modules/flowChart/flowChartEdge/index.vue
new file mode 100644
index 0000000..f80528c
--- /dev/null
+++ b/web/src/views/modules/flowChart/flowChartEdge/index.vue
@@ -0,0 +1,143 @@
+<template>
+  <div style="position: absolute;top:6%;right:0;background:#cccccc;width: 300px;" :style="'height:'+ left_p + 'px'">
+    <el-card style="height: 100%">
+      <el-tabs v-model="activeName" id="EdgeTabPane">
+        <el-tab-pane label="绾挎潯"  name="first">
+          <el-row :gutter="5" align="middle" style="margin-top:20px;">
+            <el-col :span=8 style="font-size: 16px;line-height: 38px">瀹藉害</el-col>
+            <el-col :span=16>
+              <el-slider :min=1 :max=20 :step=1 v-model="globalGridAttr.strokeWidth" @change="onStrokeWidthChange"></el-slider>
+            </el-col>
+          </el-row>
+          <el-row :gutter="5" align="middle" style="margin-top:20px;">
+            <el-col :span=8 style="font-size: 16px;line-height: 38px">棰滆壊</el-col>
+            <el-col :span=16>
+              <el-color-picker  v-model="globalGridAttr.stroke" style="width: 100%" @change="onStrokeChange"></el-color-picker>
+            </el-col>
+          </el-row>
+<!--          <el-row :gutter="5" align="middle" style="margin-top:20px;">-->
+<!--            <el-col :span=8 style="font-size: 16px;line-height: 32px">绫诲瀷</el-col>-->
+<!--            <el-col :span=16>-->
+<!--              <el-select style="width: 100%" v-model="globalGridAttr.connector" @change="onConnectorChange">-->
+<!--                <el-option-->
+<!--                  v-for="item in options"-->
+<!--                  :key="item.value"-->
+<!--                  :label="item.label"-->
+<!--                  :value="item.value">-->
+<!--                </el-option>-->
+<!--                &lt;!&ndash;              <el-option value="normal">榛樿</el-option>&ndash;&gt;-->
+<!--                &lt;!&ndash;              <el-option value="smooth">骞虫粦</el-option>&ndash;&gt;-->
+<!--                &lt;!&ndash;              <el-option value="rounded">鍦嗗舰</el-option>&ndash;&gt;-->
+<!--                &lt;!&ndash;              <el-option value="jumpover">鎶樼嚎</el-option>&ndash;&gt;-->
+<!--              </el-select>-->
+<!--            </el-col>-->
+<!--          </el-row>-->
+          <el-row :gutter="5" align="middle" style="margin-top:20px;">
+            <el-col :span=8 style="font-size: 16px;line-height: 32px">鏍囩</el-col>
+            <el-col :span=16>
+              <el-input v-model="globalGridAttr.label" style="width: 100%" @change="onLabelChange"/>
+            </el-col>
+          </el-row>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { Edge} from '@antv/x6';
+export default {
+  name: "index",
+  data(){
+    return{
+      left_p:document.documentElement.clientHeight*0.9,
+      activeName: 'first',
+      // globalGridAttr:{},
+      curCell:Edge,
+      options: [{
+        value: 'normal',
+        label: '榛樿'
+      }, {
+        value: 'smooth',
+        label: '骞虫粦杩炵嚎'
+      }]
+    }
+  },
+  props:{
+    id: {
+      type: String,
+    },
+    globalGridAttr:{
+      type: Object,
+    },
+    graph:{
+      type: String,
+    }
+  },
+  watch:{
+    'id'(val,oldVal){
+      const cell = this.graph.getCellById(this.id)
+      if(!cell || !cell.isEdge()){
+        return
+      }
+      this.curCell = cell
+      let connector = cell.getConnector() || {
+        name:'榛樿'
+      }
+      this.globalGridAttr.stroke = cell.attr('line/stroke')
+      this.globalGridAttr.strokeWidth = cell.attr('line/strokeWidth')
+      this.globalGridAttr.connector = connector.name
+      // console.log(cell.getLabels()[0],'cell.getLabels()[0]')
+      //  this.globalGridAttr.label = (cell.getLabels()[0].attrs).text.text||''
+    }
+  },
+  methods:{
+    onStrokeWidthChange(val) {
+
+      this.globalGridAttr.strokeWidth = val
+      this.curCell.attr('line/strokeWidth', val)
+    },
+
+    onStrokeChange(e) {
+      const val = e
+      this.globalGridAttr.stroke = val
+      this.curCell.attr('line/stroke', val)
+    },
+
+
+    onConnectorChange(val){
+      this.globalGridAttr.connector = val
+      this.curCell.setConnector(val)
+    },
+
+    onLabelChange(e) {
+      const val = e
+      this.globalGridAttr.label = val
+      this.curCell.setLabels([
+        {
+          attrs: {
+            text: {
+              text: val,
+            },
+          },
+          position: {
+            distance: 0.50,
+          },
+        }
+      ])
+    }
+  }
+}
+</script>
+
+<style >
+#EdgeTabPane .el-tabs__header.is-top .el-tabs__nav-scroll{
+  width: 100% !important;
+}
+#EdgeTabPane .el-tabs__nav.is-top{
+  -webkit-transform: translateX(35px) !important
+}
+#EdgeTabPane .el-color-picker__trigger{
+  width: 100%;
+}
+</style>

--
Gitblit v1.9.1