Skip to content

T
topology-ui
提交 7076c62b authored 作者: jianglw's avatar jianglw
浏览文件
操作

最新

上级 75abcf91
隐藏空白字符变更
内嵌 并排
正在显示 包含 390 行增加 和 88162 行删除
lib/demo.html deleted 100644 → 0
浏览文件 @ 75abcf91
<meta charset="utf-8">
<title>topology demo</title>
<script src="./topology.umd.js"></script>
<link rel="stylesheet" href="./topology.css">
<script>
console.log(topology)
</script>
lib/package.json deleted 100644 → 0
浏览文件 @ 75abcf91
{
"name": "topology-work",
"version": "0.0.3",
"main": "topology.umd.js",
"publishConfig":{
"registry":"http://192.168.2.103:8081/repository/npm-hosted/"
}
}
\ No newline at end of file
lib/topology.common.js deleted 100644 → 0
浏览文件 @ 75abcf91
This source diff could not be displayed because it is too large. You can view the blob instead.
lib/topology.css deleted 100644 → 0
浏览文件 @ 75abcf91
.ant-form-vertical .ant-form-item{padding-bottom:8px;margin:8px}.a-form-item{margin-bottom:10px}.m-colorPicker .box[data-v-29accc04]{position:absolute;width:190px;left:0;background:#fff;border:1px solid #cacaca;visibility:hidden;border-radius:2px;margin-top:2px;padding:3px;padding-bottom:5px;box-shadow:0 0 5px #cacaca;opacity:0;transition:all .3s ease;box-sizing:content-box}.icon-body[data-v-2a8ce4d1]{width:100%;padding:10px}.icon-body .icon-list[data-v-2a8ce4d1]{height:200px;overflow-y:scroll}.icon-body .icon-list div[data-v-2a8ce4d1]{height:30px;line-height:30px;margin-bottom:-5px;cursor:pointer;width:33%;float:left}.icon-body .icon-list span[data-v-2a8ce4d1]{display:inline-block;vertical-align:-.15em;fill:currentColor;overflow:hidden}.a-tabs__header{padding:0;position:relative;margin:0 0 1px}.a-tabs__item{padding:0 8px;height:40px;box-sizing:border-box;line-height:40px;display:inline-block;list-style:none;font-size:14px;font-weight:500;color:#2f3032;position:relative}.a-tabs__nav{white-space:nowrap;position:relative;transition:transform .3s;float:left;z-index:2;margin:0 7%}.ant-tabs-nav .ant-tabs-tab{margin:0 0 0 0;padding:10px 9px}.ant-form-vertical .ant-form-item{padding-bottom:1px;margin:2px 6px}.ant-page-header{padding:0 10px}.ant-page-header-heading-title{font-size:13px}.el-tabs__header{padding:0;position:relative;margin:0 0 1px}.el-tabs__item{padding:0 8px;height:40px;box-sizing:border-box;line-height:40px;display:inline-block;list-style:none;font-size:14px;font-weight:500;color:#2f3032;position:relative}.el-tabs__nav{white-space:nowrap;position:relative;transition:transform .3s;float:left;z-index:2;margin:0 7%}aside{padding:0 0;margin-bottom:20px;border-radius:2px;line-height:32px;font-size:16px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;color:#2b3d4f;-webkit-font-smoothing:antialiased}.home{width:100%;height:100%}.canvas{height:100vh;width:100%}::-webkit-scrollbar{width:5px;height:5px;background-color:#fff}::-webkit-scrollbar-track{box-shadow:inset 0 0 6px transparent;background-color:#ccc}::-webkit-scrollbar-thumb{box-shadow:inset 0 0 6px transparent;background-color:#726868;border-radius:10px}.ant-form-item{box-sizing:border-box;margin:0;padding:0;color:#000;font-size:14px;font-variant:tabular-nums;line-height:1.5;list-style:none;font-feature-settings:"tnum";margin-bottom:5px;vertical-align:top}.ant-input-group{line-height:.5}.ant-divider-horizontal{display:block;clear:both;width:100%;min-width:100%;height:1px;margin:12px 0}.full{flex:1;width:auto;position:relative;overflow:auto;background:#fff}.ant-layout-header{height:45px;padding:0 50px;line-height:45px;background:#1a90ff}.ant-collapse{background-color:#fff}.ant-collapse .ant-collapse-item .ant-collapse-header{color:#000}.ant-tabs .ant-tabs-small-bar .ant-tabs-tab{padding:10px 5px;margin:0 3px 0 0;font-size:13px}.ant-collapse .ant-collapse-item .ant-collapse-header{line-height:8px;font-size:10px}.ant-tabs-bar{margin:0 0 3px 0}.ant-card-grid{padding:0;width:23%;text-align:center}.ant-layout-sider-children{border:1px solid #c4c4c4;border-radius:5px;height:100%;margin-top:-.1px;padding-top:.1px}.div-scoll{width:100%;height:90vh;overflow-x:hidden;overflow-y:scroll}image-slot{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background:#f5f7fa;color:#909298;font-size:30px}.tools{position:absolute;left:0;top:0;right:0;display:flex}.tools>div{flex-grow:1}.tools button{margin:12px 16px}.steps-content{margin-top:16px;border:1px dashed #e9e9e9;border-radius:6px;background-color:#fafafa;min-height:62vh}.steps-action{margin-top:24px}.el-col{margin-bottom:10px}
\ No newline at end of file
lib/topology.umd.js deleted 100644 → 0
浏览文件 @ 75abcf91
This source diff could not be displayed because it is too large. You can view the blob instead.
lib/topology.umd.min.js deleted 100644 → 0
浏览文件 @ 75abcf91
This source diff could not be displayed because it is too large. You can view the blob instead.
src/components/topology/LineView.vue
浏览文件 @ 7076c62b
......@@ -15,10 +15,14 @@
<a-col :span="12"
><a-input-number
v-model.number="line.from.x"
:precision="0"
@change="uploadLine"
/></a-col>
<a-col :span="12"
><a-input-number
:precision="0"
v-model.number="line.from.y"
@change="uploadLine"
/></a-col>
......@@ -31,10 +35,14 @@
<a-col :span="12"
><a-input-number
v-model.number="line.to.x"
:precision="0"
@change="uploadLine"
/></a-col>
<a-col :span="12"
><a-input-number
:precision="0"
v-model.number="line.to.y"
@change="uploadLine"
/></a-col>
......@@ -107,6 +115,8 @@
<a-form-item label="起点箭头大小">
<a-input-number
v-model.number="line.fromArrowSize"
:precision="0"
@change="uploadLine"
/>
</a-form-item>
......@@ -115,6 +125,8 @@
<a-form-item label="终点箭头大小">
<a-input-number
v-model.number="line.toArrowSize"
:precision="0"
@change="uploadLine"
/>
</a-form-item>
......@@ -160,17 +172,22 @@
<a-col :span="12">
<a-form-item label="线条宽度">
<a-input v-model.number="line.lineWidth" @change="uploadLine">
</a-input>
<a-input-number
:precision="0"
v-model="line.lineWidth"
@change="uploadLine"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="边线宽度">
<a-input
v-model.number="line.borderWidth"
<a-input-number
:precision="0"
v-model="line.borderWidth"
@change="uploadLine"
>
</a-input>
/>
</a-form-item>
</a-col>
<a-col :span="12">
......@@ -211,15 +228,19 @@
v-for="(item, index) of line.controlPoints"
:key="index"
>
<a-form-item :label="'控制点' + (index+1)">
<a-form-item :label="'控制点' + (index + 1)">
x
<a-input-number
v-model.number="item.x"
:precision="0"
@change="uploadLine"
/>
y
<a-input-number
v-model.number="item.y"
:precision="0"
@change="uploadLine"
/>
</a-form-item>
......@@ -237,6 +258,8 @@
<a-form-item label="大小">
<a-input-number
v-model.number="line.fontSize"
:precision="0"
@change="uploadLine"
/>
</a-form-item>
......@@ -311,6 +334,8 @@
<a-form-item label="行高">
<a-input-number
v-model.number="line.lineHeight"
:precision="0"
@change="uploadLine"
/>
</a-form-item>
......@@ -319,6 +344,8 @@
<a-form-item label="最大行数">
<a-input-number
v-model.number="line.textMaxLine"
:precision="0"
@change="uploadLine"
/>
</a-form-item>
......@@ -327,6 +354,8 @@
<a-form-item label="水平偏移（px）">
<a-input-number
v-model.number="line.textOffsetX"
:precision="0"
@change="uploadLine"
/>
</a-form-item>
......@@ -335,6 +364,8 @@
<a-form-item label="垂直偏移（px）">
<a-input-number
v-model.number="line.textOffsetY"
:precision="0"
@change="uploadLine"
/>
</a-form-item>
......@@ -777,7 +808,7 @@ export default {
},
enterTage() {
this.line.tags.push(this.tag);
this.tag=""
this.tag = "";
},
lineStartPlay() {
this.line.initAnimate();
......@@ -825,7 +856,7 @@ export default {
};
</script>
<style lang="scss">
.ant-tabs-nav .ant-tabs-tab{
.ant-tabs-nav .ant-tabs-tab {
margin: 0 0 0 0;
padding: 10px 9px;
}
......
src/components/topology/NodeView.vue
浏览文件 @ 7076c62b
......@@ -13,6 +13,7 @@
<a-form-item label="X (px)">
<a-input-number
v-model="node.rect.x"
:precision="0"
@change="updateNode"
/>
</a-form-item>
......@@ -21,6 +22,7 @@
<a-form-item label="Y (px)">
<a-input-number
v-model="node.rect.y"
:precision="0"
@change="updateNode"
/>
</a-form-item>
......@@ -29,6 +31,7 @@
<a-form-item label="宽 (px)">
<a-input-number
v-model="node.rect.width"
:precision="0"
@change="updateNode"
/>
</a-form-item>
......@@ -37,6 +40,7 @@
<a-form-item label="高 (px)">
<a-input-number
v-model="node.rect.height"
:precision="0"
@change="updateNode"
/>
</a-form-item>
......@@ -45,6 +49,7 @@
<a-form-item label="圆角">
<a-input-number
v-model.number="node.borderRadius"
:precision="0"
@change="updateNode"
/>
</a-form-item>
......@@ -53,6 +58,7 @@
<a-form-item label="旋转 °">
<a-input-number
v-model.number="node.rotate"
:precision="0"
@change="updateNode"
/>
</a-form-item>
......@@ -61,6 +67,7 @@
<a-form-item label="内边距-左">
<a-input-number
v-model.number="node.paddingLeft"
:precision="0"
@change="updateNode"
/>
</a-form-item>
......@@ -69,6 +76,7 @@
<a-form-item label="内边距-右">
<a-input-number
v-model.number="node.paddingRight"
:precision="0"
@change="updateNode"
/>
</a-form-item>
......@@ -77,6 +85,7 @@
<a-form-item label="内边距-上">
<a-input-number
v-model.number="node.paddingTop"
:precision="0"
@change="updateNode"
/>
</a-form-item>
......@@ -85,6 +94,7 @@
<a-form-item label="内边距-下">
<a-input-number
v-model.number="node.paddingBottom"
:precision="0"
@change="updateNode"
/>
</a-form-item>
......@@ -124,6 +134,7 @@
<a-form-item label="线条宽度 (px)">
<a-input-number
v-model.number="node.lineWidth"
:precision="0"
@change="updateNode"
/>
</a-form-item>
......@@ -168,6 +179,7 @@
<a-form-item label="角度">
<a-input-number
v-model.number="node.gradientAngle"
:precision="0"
@change="updateNode"
>
</a-input-number>
......@@ -218,8 +230,9 @@
<a-form-item label="透明度(0 - 1)">
<a-input-number
v-model.number="node.globalAlpha"
:precision="0"
@change="updateNode"
style="width:100%;"
style="width: 100%"
/>
</a-form-item>
</a-col>
......@@ -235,6 +248,7 @@
<a-col :span="12" style="padding-left: 2px; padding-right: 2px">
<a-form-item label="大小">
<a-input-number
:precision="0"
v-model.number="node.fontSize"
@change="updateNode"
/>
......@@ -297,6 +311,7 @@
<a-form-item label="行高">
<a-input-number
v-model.number="node.lineHeight"
:precision="0"
@change="updateNode"
/>
</a-form-item>
......@@ -305,6 +320,7 @@
<a-form-item label="最大行数">
<a-input-number
v-model.number="node.textMaxLine"
:precision="0"
@change="updateNode"
/>
</a-form-item>
......@@ -313,6 +329,7 @@
<a-form-item label="水平偏移（px）">
<a-input-number
v-model.number="node.textOffsetX"
:precision="0"
@change="updateNode"
/>
</a-form-item>
......@@ -321,6 +338,7 @@
<a-form-item label="垂直偏移（px）">
<a-input-number
v-model.number="node.textOffsetY"
:precision="0"
@change="updateNode"
/>
</a-form-item>
......@@ -391,6 +409,7 @@
:wrapper-col="{ span: 15 }"
>
<a-input-number
:precision="0"
v-model.number="node.imageWidth"
@change="updateNode"
/>
......@@ -402,6 +421,7 @@
>
<a-input-number
v-model.number="node.imageHeight"
:precision="0"
@change="updateNode"
/>
</a-form-item>
......@@ -483,6 +503,7 @@
>
<a-input-number
v-model.number="iconSize"
:precision="0"
@change="updateNodeIconSize"
/>
</a-form-item>
......@@ -829,7 +850,11 @@
<a-tab-pane key="5" tab="结构">
<div class="div-scoll">
<a-directory-tree
v-if="node instanceof Object" default-expand-all multiple style="text-align: left">
v-if="node instanceof Object"
default-expand-all
multiple
style="text-align: left"
>
<a-tree-node
key="0-0"
:title="'[节点]' + '-' + node.name + '-' + node.text"
......@@ -837,7 +862,10 @@
</a-tree-node>
</a-directory-tree>
<a-directory-tree
v-if="node instanceof Array" default-expand-all multiple style="text-align: left"
v-if="node instanceof Array"
default-expand-all
multiple
style="text-align: left"
>
<a-tree-node key="0-0" title="parent 0">
<a-tree-node key="0-0-0" title="leaf 0-0" is-leaf />
......@@ -867,22 +895,6 @@ export default {
type: Object,
},
},
// watch: {
// // node:{
// // deep: true,
// // handler(n,v){
// // }
// // },
// data: {
// handler(n, v) {
// if (n.data) {
// this.data = n.data;
// }
// },
// deep: true,
// },
// },
components: {
AddEvent,
AddWheres,
......@@ -905,7 +917,6 @@ export default {
iconColor: this.node.iconColor ? this.node.iconColor : "#fff",
play: true,
};
// \uea68|ltys
},
methods: {
selected(item) {
......@@ -979,7 +990,7 @@ export default {
},
enterTage() {
this.node.tags.push(this.tag);
this.tag=""
this.tag = "";
},
nodeStartPlay() {
this.node.initAnimate();
......@@ -1077,7 +1088,7 @@ export default {
z-index: 2;
margin: 0 7%;
}
.ant-tabs-nav .ant-tabs-tab{
.ant-tabs-nav .ant-tabs-tab {
margin: 0 0 0 0;
padding: 10px 9px;
}
......
src/components/topology/PensView.vue
浏览文件 @ 7076c62b
......@@ -79,8 +79,9 @@
<template slot="title">
<span>等距分布，两端对齐，节点之间的间隔都相等</span>
</template>
<i class="t-icon t-horizontal-between"
@click="clickSpaceBetween(50)"
<i
class="t-icon t-horizontal-between"
@click="clickSpaceBetween(50)"
></i>
</a-tooltip>
</a-col>
......@@ -95,7 +96,10 @@
<a-col :span="24" style="padding-left: 2px; padding-right: 2px">
<a-form-item label="线条">
<!-- <a-input v-model="node.dash" /> -->
<a-select v-model="node.dash" @change="updateNode('dash',node.dash)">
<a-select
v-model="node.dash"
@change="updateNode('dash', node.dash)"
>
<a-select-option
v-for="item of lineOther"
:key="item.type"
......@@ -110,7 +114,7 @@
<a-form-item label="线条颜色">
<el-color-picker
v-model="node.strokeStyle"
@change="updateNode('strokeStyle',node.strokeStyle)"
@change="updateNode('strokeStyle', node.strokeStyle)"
></el-color-picker>
</a-form-item>
</a-col>
......@@ -118,13 +122,18 @@
<a-form-item label="线条宽度 (px)">
<a-input-number
v-model.number="node.lineWidth"
@change="updateNode('lineWidth',node.lineWidth)"
:precision="0"
@change="updateNode('lineWidth', node.lineWidth)"
/>
</a-form-item>
</a-col>
<a-col :span="24" style="padding-left: 2px; padding-right: 2px">
<a-form-item label="背景">
<a-select v-model="node.bkType" @change="updateNode('bkType',node.bkType)">
<a-select
v-model="node.bkType"
@change="updateNode('bkType', node.bkType)"
>
<a-select-option :value="0">纯色背景</a-select-option>
<a-select-option :value="1">线性渐变</a-select-option>
<a-select-option :value="2">径向渐变</a-select-option>
......@@ -136,7 +145,7 @@
<a-form-item label="背景颜色">
<el-color-picker
v-model="node.fillStyle"
@change="updateNode('fillStyle',node.fillStyle)"
@change="updateNode('fillStyle', node.fillStyle)"
></el-color-picker>
</a-form-item>
</a-col>
......@@ -146,7 +155,9 @@
<a-form-item label="开始颜色">
<el-color-picker
v-model="node.gradientFromColor"
@change="updateNode('gradientFromColor',node.gradientFromColor)"
@change="
updateNode('gradientFromColor', node.gradientFromColor)
"
></el-color-picker>
</a-form-item>
</a-col>
......@@ -154,7 +165,9 @@
<a-form-item label="结束颜色">
<el-color-picker
v-model="node.gradientToColor"
@change="updateNode('gradientToColor',node.gradientToColor)"
@change="
updateNode('gradientToColor', node.gradientToColor)
"
></el-color-picker>
</a-form-item>
</a-col>
......@@ -162,7 +175,9 @@
<a-form-item label="角度">
<a-input-number
v-model.number="node.gradientAngle"
@change="updateNode('gradientAngle',node.gradientAngle)"
:precision="0"
@change="updateNode('gradientAngle', node.gradientAngle)"
>
</a-input-number>
</a-form-item>
......@@ -180,7 +195,9 @@
</a-input> -->
<el-color-picker
v-model="node.gradientFromColor"
@change="updateNode('gradientFromColor',node.gradientFromColor)"
@change="
updateNode('gradientFromColor', node.gradientFromColor)
"
></el-color-picker>
</a-form-item>
</a-col>
......@@ -195,7 +212,9 @@
</a-input> -->
<el-color-picker
v-model="node.gradientToColor"
@change="updateNode('gradientToColor',node.gradientToColor)"
@change="
updateNode('gradientToColor', node.gradientToColor)
"
></el-color-picker>
</a-form-item>
</a-col>
......@@ -203,7 +222,11 @@
<a-form-item label="半径">
<a-input-number
v-model.number="node.gradientRadius"
@change="updateNode('gradientRadius',node.gradientRadius)"
:precision="0"
@change="
updateNode('gradientRadius', node.gradientRadius)
"
/>
</a-form-item>
</a-col>
......@@ -212,7 +235,9 @@
<a-form-item label="透明度（0 - 1）">
<a-input-number
v-model.number="node.globalAlpha"
@change="updateNode('globalAlpha',node.globalAlpha)"
:precision="0"
@change="updateNode('globalAlpha', node.globalAlpha)"
/>
</a-form-item>
</a-col>
......@@ -228,13 +253,18 @@
<a-form-item label="大小">
<a-input-number
v-model.number="node.fontSize"
@change="updateNode('fontSize',node.fontSize)"
:precision="0"
@change="updateNode('fontSize', node.fontSize)"
/>
</a-form-item>
</a-col>
<a-col :span="12" style="padding-left: 2px; padding-right: 2px">
<a-form-item label="倾斜">
<a-select v-model="node.fontStyle" @change="updateNode('fontStyle',node.fontStyle)">
<a-select
v-model="node.fontStyle"
@change="updateNode('fontStyle', node.fontStyle)"
>
<a-select-option :value="'normal'">正常</a-select-option>
<a-select-option :value="'italic'">倾斜</a-select-option>
</a-select>
......@@ -244,7 +274,7 @@
<a-form-item label="颜色">
<el-color-picker
v-model="node.fontColor"
@change="updateNode('fontColor',node.fontColor)"
@change="updateNode('fontColor', node.fontColor)"
></el-color-picker>
</a-form-item>
</a-col>
......@@ -252,14 +282,17 @@
<a-form-item label="背景">
<el-color-picker
v-model="node.textBackground"
@change="updateNode('textBackground',node.textBackground)"
@change="updateNode('textBackground', node.textBackground)"
></el-color-picker>
</a-form-item>
</a-col>
<a-col :span="12" style="padding-left: 2px; padding-right: 2px">
<a-form-item label="加粗">
<a-select v-model="node.fontWeight" @change="updateNode('fontWeight',node.fontWeight)">
<a-select
v-model="node.fontWeight"
@change="updateNode('fontWeight', node.fontWeight)"
>
<a-select-option :value="'normal'">正常</a-select-option>
<a-select-option :value="'bold'">加粗</a-select-option>
</a-select>
......@@ -267,7 +300,10 @@
</a-col>
<a-col :span="12" style="padding-left: 2px; padding-right: 2px">
<a-form-item label="水平对齐">
<a-select v-model="node.textAlign" @change="updateNode('textAlign',node.textAlign)">
<a-select
v-model="node.textAlign"
@change="updateNode('textAlign', node.textAlign)"
>
<a-select-option :value="'left'">左对齐</a-select-option>
<a-select-option :value="'center'">居中</a-select-option>
<a-select-option :value="'right'">右对齐</a-select-option>
......@@ -276,7 +312,10 @@
</a-col>
<a-col :span="12" style="padding-left: 2px; padding-right: 2px">
<a-form-item label="垂直对齐">
<a-select v-model="node.textBaseline" @change="updateNode('textBaseline',node.textBaseline)">
<a-select
v-model="node.textBaseline"
@change="updateNode('textBaseline', node.textBaseline)"
>
<a-select-option :value="'top'">顶部对齐</a-select-option>
<a-select-option :value="'middle'">居中</a-select-option>
<a-select-option :value="'bottom'"
......@@ -289,31 +328,39 @@
<a-form-item label="行高">
<a-input-number
v-model.number="node.lineHeight"
@change="updateNode('lineHeight',node.lineHeight)"
:precision="0"
@change="updateNode('lineHeight', node.lineHeight)"
/>
</a-form-item>
</a-col>
<a-col :span="12" style="padding-left: 2px; padding-right: 2px">
<a-form-item label="最大行数">
<a-input-number
:precision="0"
v-model.number="node.textMaxLine"
@change="updateNode('textMaxLine',node.textMaxLine)"
@change="updateNode('textMaxLine', node.textMaxLine)"
/>
</a-form-item>
</a-col>
<a-col :span="12" style="padding-left: 2px; padding-right: 2px">
<a-form-item label="水平偏移（px）">
<a-input-number
:precision="0"
v-model.number="node.textOffsetX"
@change="updateNode('textOffsetX',node.textOffsetX)"
@change="updateNode('textOffsetX', node.textOffsetX)"
/>
</a-form-item>
</a-col>
<a-col :span="12" style="padding-left: 2px; padding-right: 2px">
<a-form-item label="垂直偏移（px）">
<a-input-number
:precision="0"
v-model.number="node.textOffsetY"
@change="updateNode('textOffsetY',node.textOffsetY)"
@change="updateNode('textOffsetY', node.textOffsetY)"
/>
</a-form-item>
</a-col>
......@@ -323,57 +370,80 @@
</a-tab-pane>
<a-tab-pane key="2" tab="布局">
<a-page-header
style="border: 1px solid rgb(235, 237, 240)"
title="排版"
/>
<a-form :layout="'horizontal'">
<a-form-item
label="最大宽度"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 15 }"
>
<a-input-number v-model.number="params.maxWidth" />
</a-form-item>
<a-form-item
label="节点宽度"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 15 }"
>
<a-input-number v-model.number="params.nodeWidth" />
</a-form-item>
<a-form-item
label="节点高度"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 15 }"
>
<a-input-number v-model.number="params.nodeHeight" />
</a-form-item>
<a-form-item
label="水平个数"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 15 }"
>
<a-input-number v-model.number="params.maxCount" />
</a-form-item>
<a-form-item
label="水平间距"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 15 }"
>
<a-input-number v-model.number="params.spaceWidth" />
</a-form-item>
<a-form-item
label="垂直间距"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 15 }"
>
<a-input-number v-model.number="params.spaceHeight" />
</a-form-item>
<a-form-item style="text-align: center">
<a-button type="primary" @click="typeSetting">开始排版</a-button>
</a-form-item>
</a-form>
style="border: 1px solid rgb(235, 237, 240)"
title="排版"
/>
<a-form :layout="'horizontal'">
<a-form-item
label="最大宽度"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 15 }"
>
<a-input-number
:precision="0"
v-model.number="params.maxWidth"
/>
</a-form-item>
<a-form-item
label="节点宽度"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 15 }"
>
<a-input-number
:precision="0"
v-model.number="params.nodeWidth"
/>
</a-form-item>
<a-form-item
label="节点高度"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 15 }"
>
<a-input-number
:precision="0"
v-model.number="params.nodeHeight"
/>
</a-form-item>
<a-form-item
label="水平个数"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 15 }"
>
<a-input-number
:precision="0"
v-model.number="params.maxCount"
/>
</a-form-item>
<a-form-item
label="水平间距"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 15 }"
>
<a-input-number
:precision="0"
v-model.number="params.spaceWidth"
/>
</a-form-item>
<a-form-item
label="垂直间距"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 15 }"
>
<a-input-number
:precision="0"
v-model.number="params.spaceHeight"
/>
</a-form-item>
<a-form-item style="text-align: center">
<a-button type="primary" @click="typeSetting">开始排版</a-button>
</a-form-item>
</a-form>
</a-tab-pane>
<a-tab-pane key="3" tab="结构">
<div class="div-scoll">
......@@ -395,7 +465,7 @@
</div>
</template>
<script>
import { getRect } from '@topology/core';
import { getRect } from "@topology/core";
import { lineOther } from "@/utils/topology/topologysetting.js";
export default {
props: {
......@@ -415,30 +485,29 @@ export default {
spaceHeight: 30,
},
lineOther,
node:{
dash:0,
strokeStyle:"",
lineWidth:1,
bkType:0,
fillStyle:"",
gradientFromColor:"",
gradientToColor:"",
gradientAngle:0,
gradientRadius:0,
globalAlpha:0,
fontSize:12,
fontStyle:"normal",
fontColor:"",
textBackground:"",
fontWeight:"normal",
textAlign:"center",
textBaseline:"middle",
lineHeight:0,
textMaxLine:0,
textOffsetX:0,
textOffsetY:0
}
node: {
dash: 0,
strokeStyle: "",
lineWidth: 1,
bkType: 0,
fillStyle: "",
gradientFromColor: "",
gradientToColor: "",
gradientAngle: 0,
gradientRadius: 0,
globalAlpha: 0,
fontSize: 12,
fontStyle: "normal",
fontColor: "",
textBackground: "",
fontWeight: "normal",
textAlign: "center",
textBaseline: "middle",
lineHeight: 0,
textMaxLine: 0,
textOffsetX: 0,
textOffsetY: 0,
},
};
},
methods: {
......@@ -452,18 +521,18 @@ export default {
return "";
},
clickAlignment(type) {
let rect=getRect(this.pens);
this.$emit("no",rect,type);
let rect = getRect(this.pens);
this.$emit("no", rect, type);
},
typeSetting() {
this.$emit("ok",this.params)
this.$emit("ok", this.params);
},
clickSpaceBetween() {
this.$emit("spaceB", this.params);
},
clickSpaceBetween(){
this.$emit("spaceB",this.params)
updateNode(name, val) {
this.$emit("updateSub", name, val);
},
updateNode(name,val){
this.$emit("updateSub",name,val)
}
},
};
</script>
......
src/components/topology/PreviewToImg.vue
浏览文件 @ 7076c62b
......@@ -47,21 +47,15 @@ export default {
created() {
registerChart();
},
destroyed(){
if(this.canvas){
this.canvas.destroy();
}
},
mounted() {
this.init();
},
methods: {
onBack() {
// this.$router.push({
// path: "/workspace",
// });
},
onSizeWindow() {
this.canvas.fitView(20);
},
onSizeOri() {
// this.canvas.open(this.$store.state.canvas.topologyData);
},
init() {
this.canvas = new Topology("topology-hrhx");
this.canvasData.locked = 2;
......
src/components/topology/SpaceView.vue
浏览文件 @ 7076c62b
......@@ -220,19 +220,18 @@
</div>
</template>
<script>
import pick from "lodash.pick";
import InputColor from "@/components/topology/color/InputColor";
const formItemLayout = {
labelCol: { span: 8 },
wrapperCol: { span: 15 },
};
export default {
props: {
canvas: {
type: Object,
require: true,
},
},
// props: {
// canvas: {
// type: Object,
// require: true,
// },
// },
components: {
InputColor,
},
......
src/views/configuration/ParamsConfig.vue
浏览文件 @ 7076c62b
......@@ -33,100 +33,122 @@
<el-row>
<el-col :span="24">
<el-card v-loading="loading">
<el-row :gutter="20">
<!-- <el-row :gutter="20">
<el-col
:span="6"
v-for="(item, index) of topologyList"
:key="index"
>
<el-card :body-style="{ padding: '0px' }">
<div @click="previeData(item)">
<preview-to-img
:canvasData="changeJson(item.data)"
:width="'100%'"
:height="'20vh'"
:title="'点击预览'"
></preview-to-img>
</div>
<div style="padding: 14px">
<el-row>
<el-col :span="19">
<el-tooltip
class="item"
effect="dark"
:content="item.name"
placement="top-start"
>
<span>{{ splitName(item.name) }}</span>
</el-tooltip>
</el-col>
<el-col :span="4">
<span>
<el-tooltip
class="item"
effect="dark"
content="显示/隐藏"
placement="top-start"
>
<!-- v-hasPermi="['topology:index:showhide']" -->
<el-switch
v-model="item.switchIt"
active-value="1"
inactive-value="0"
@change="handleSwitchItChange(item)"
></el-switch>
</el-tooltip>
</span>
</el-col>
</el-row>
<div class="bottom clearfix">
<!-- <time class="time">2021-04-29 00:00:00</time> -->
<!-- v-hasPermi="['topology:index:edit']" -->
<el-button
size="mini"
type="text"
icon="el-icon-s-tools"
@click="uploadTopology(item)"
>修改组态</el-button
>
<!-- v-hasPermi="['topology:params:set']" -->
<el-button
size="mini"
type="text"
icon="el-icon-s-tools"
@click="handleAdd(item)"
>采集参数设置</el-button
>
<!-- v-hasPermi="['topology:index:delete']" -->
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="removeTopology(item.id)"
>删除</el-button
>
<!-- v-hasPermi="['topology:params:set']" -->
<el-button
size="mini"
type="text"
icon="el-icon-s-tools"
@click="handleMutual(item)"
>交互参数设置</el-button
>
<!-- v-hasPermi="['topology:index:deleteTopologyHandle']" -->
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="removeTopologyHandle(item.id)"
>清空原有配置</el-button
>
</div>
</div>
</el-card>
</el-col>
</el-row>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="init()"
/> -->
<el-table :data="topologyList" border style="width: 100%">
<el-table-column
fixed
prop="id"
label="ID"
width="80px"
header-align="center"
align="center"
>
</el-table-column>
<el-table-column
fixed
prop="name"
label="名称"
header-align="center"
align="center"
>
<template slot-scope="scope">
<el-tooltip
class="item"
effect="dark"
content="点击预览"
placement="top-start"
>
<a @click="previeData(scope.row)">{{
splitName(scope.row.name)
}}</a>
</el-tooltip>
</template>
</el-table-column>
<el-table-column
fixed
prop="switchIt"
label="显示/隐藏"
header-align="center"
align="center"
>
<template slot-scope="scope">
<el-tooltip
class="item"
effect="dark"
content="显示/隐藏"
placement="top-start"
>
<el-switch
v-model="scope.row.switchIt"
active-value="1"
inactive-value="0"
@change="handleSwitchItChange(scope.row)"
></el-switch>
</el-tooltip>
</template>
</el-table-column>
<el-table-column
fixed
label="操作"
header-align="center"
align="center"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-s-tools"
@click="uploadTopology(scope.row)"
>修改组态</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-s-tools"
@click="handleAdd(scope.row)"
>采集参数设置</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-s-tools"
@click="handleMutual(scope.row)"
>交互参数设置</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="removeTopologyHandle(scope.row.id)"
>清空原有配置</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="removeTopology(scope.row.id)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
......
src/views/topology/Preview.vue
浏览文件 @ 7076c62b
......@@ -22,7 +22,6 @@
</template>
<script>
import { Topology } from "@topology/core";
export const Data = "";
import { getTopologyId } from "@/api/topology.js";
import { urlParse } from "@/utils/ruoyi";
export default {
......@@ -39,23 +38,23 @@ export default {
mounted() {
this.init();
let that = this;
window.onresize = () => {
setTimeout(function () {
that.onSizeWindow();
}, 100);
};
// window.onresize = () => {
// setTimeout(function () {
// that.onSizeWindow();
// }, 100);
// };
},
destroyed() {
this.canvas.destroy();
window.onresize = null;
// window.onresize = null;
},
methods: {
onBack() {
this.$router.go(-1);
},
onSizeWindow() {
this.canvas.fitView(20);
this.canvas.centerView(30);
this.canvas.fitView(10);
this.canvas.centerView(10);
},
onSizeOri() {
this.canvas.open(this.topologyData);
......
src/views/topology/Workspace.vue
浏览文件 @ 7076c62b
......@@ -198,7 +198,6 @@
<div>
<space-view
v-if="opt == 'space'"
:canvas="canvas.data"
ref="space"
@ok="uploadCanvasData"
></space-view>
......@@ -315,7 +314,6 @@ export default {
destroyed() {
document.removeEventListener("keydown", this.saveContent);
this.canvas.destroy();
},
computed: {
scalecom: {
......@@ -339,11 +337,11 @@ export default {
},
methods: {
initSpace() {
this.opt = "space";
let that = this;
this.$nextTick(() => {
that.$refs.space.init(this.canvas);
});
this.opt = "space";
let that = this;
this.$nextTick(() => {
that.$refs.space.init(this.canvas);
});
},
allowDrop(event) {
event.preventDefault();
......@@ -469,7 +467,7 @@ export default {
this.$nextTick(() => {
that.$refs.space.init(this.canvas);
});
this.canvas.closeSocket();
// this.canvas.closeSocket();
this.canvas.closeMqtt();
}
},
......@@ -480,7 +478,7 @@ export default {
this.canvas = new Topology("topology-hrhx", {
rotateCursor: "./rotate.cur",
on: (event, data) => {
this.optionsSet(event, data, this.canvas);
this.optionsSet(event, data);
},
});
// this.onSvgICON();
......@@ -663,7 +661,7 @@ export default {
this.$route.query.id = "";
});
},
optionsSet(event, data, canvas) {
optionsSet(event, data) {
switch (event) {
case "opened":
this.initSpace();
......@@ -699,6 +697,8 @@ export default {
case "delete":
this.initSpace();
break;
default:
break;
}
},
},
......
vue.config.js
浏览文件 @ 7076c62b
......@@ -27,7 +27,7 @@ module.exports = {
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8081`,
target: `http://localhost:7777`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
......
yarn.lock
浏览文件 @ 7076c62b
......@@ -1806,7 +1806,7 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
dependencies:
color-convert "^2.0.1"
ant-design-vue@^1.7.4:
ant-design-vue@^1.7.8:
version "1.7.8"
resolved "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-1.7.8.tgz#1abbf86b68a4f5b1000bea0487b8031dc0001661"
integrity sha512-F1hmiS9vwbyfuFvlamdW5l9bHKqRlj9wHaGDIE41NZMWXyWy8qL0UFa/+I0Wl8gQWZCqODW5pN6Yfoyn85At3A==
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论