From 72b04d283d96482aada792938b62abb35e895f3a Mon Sep 17 00:00:00 2001
From: xyc <jc_xiong@hotmail.com>
Date: 星期一, 04 三月 2024 08:50:33 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
web/src/views/modules/taskReliability/ConfigEdge/index.vue | 204 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 204 insertions(+), 0 deletions(-)
diff --git a/web/src/views/modules/taskReliability/ConfigEdge/index.vue b/web/src/views/modules/taskReliability/ConfigEdge/index.vue
new file mode 100644
index 0000000..593ebcf
--- /dev/null
+++ b/web/src/views/modules/taskReliability/ConfigEdge/index.vue
@@ -0,0 +1,204 @@
+<template>
+ <div style="position: absolute;top:6%;right:0;z-index:1000;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>
+<!-- <el-option value="normal">榛樿</el-option>-->
+<!-- <el-option value="smooth">骞虫粦</el-option>-->
+<!-- <el-option value="rounded">鍦嗗舰</el-option>-->
+<!-- <el-option value="jumpover">鎶樼嚎</el-option>-->
+ </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-row v-show="globalGridAttr.label!==''" :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-slider :min=0.1 :max=1 :step=0.1 v-model="globalGridAttr.distance" @change="onLabelDistanceChange"></el-slider>
+<!-- <el-input v-model="globalGridAttr.distance" style="width: 100%" @change="onLabelDistanceChange"/>-->
+ </el-col>
+ </el-row>
+<!-- <el-row v-show="globalGridAttr.label!==''" :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-slider :min=-360 :max=360 :step=1 v-model="globalGridAttr.angle" @change="onLabelAngleChange"></el-slider>-->
+<!-- </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
+ this.globalGridAttr.label = cell.getLabels()[0].attrs.text? cell.getLabels()[0].attrs.text.text:''
+ this.globalGridAttr.distance =cell.getLabels()[0].position.distance
+ // this.globalGridAttr.angle =cell.getLabels()[0].position.angle
+ console.log(cell.getLabels(),'cell.getLabels()')
+ // 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.5,
+ angle: 180,
+ options: {
+ keepGradient: true,
+ ensureLegibility: true
+ }
+ }
+ }
+ ])
+ },
+ onLabelDistanceChange(e){
+ const val = e
+ this.globalGridAttr.distance = val
+ console.log(val)
+ this.curCell.setLabels([
+ {
+ attrs: {
+ text: {
+ text: this.globalGridAttr.label,
+ },
+ },
+ position: {
+ distance: val,
+ angle: 180,
+ options: {
+ keepGradient: true,
+ ensureLegibility: true
+ }
+ },
+ }
+ ])
+ },
+ // onLabelAngleChange(e){
+ // const val = e
+ // // this.globalGridAttr.angle = val
+ // this.curCell.setLabels([
+ // {
+ // attrs: {
+ // text: {
+ // text: this.globalGridAttr.label,
+ // },
+ // },
+ // position: {
+ // distance:this.globalGridAttr.distance,
+ // options: {
+ // keepGradient: true
+ // }
+ // },
+ // }
+ // ])
+ // }
+ }
+}
+</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