|
@@ -15,7 +15,6 @@
|
|
<img style="width: 80px;height: 80px;border: 1px dashed gray;" src="../../../assets/image/goose.png"
|
|
<img style="width: 80px;height: 80px;border: 1px dashed gray;" src="../../../assets/image/goose.png"
|
|
alt="">
|
|
alt="">
|
|
<p>GOOSE通信参数</p>
|
|
<p>GOOSE通信参数</p>
|
|
-
|
|
|
|
</div>
|
|
</div>
|
|
<div class="mainDiv" id="mainTwo">
|
|
<div class="mainDiv" id="mainTwo">
|
|
<img style="width: 80px;height: 80px;border: 1px dashed gray;" src="../../../assets/image/goose.png"
|
|
<img style="width: 80px;height: 80px;border: 1px dashed gray;" src="../../../assets/image/goose.png"
|
|
@@ -46,7 +45,7 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div id="rightBox" >
|
|
|
|
|
|
+ <div id="rightBox">
|
|
<!-- 右左 -->
|
|
<!-- 右左 -->
|
|
<div id="topRight">
|
|
<div id="topRight">
|
|
<div class="tightDiv" id="ditOne">
|
|
<div class="tightDiv" id="ditOne">
|
|
@@ -93,7 +92,7 @@
|
|
<div id="upFile">
|
|
<div id="upFile">
|
|
<img style="width: 80px;height: 80px;border: 1px dashed gray;" src="../../../assets/image/squer.png"
|
|
<img style="width: 80px;height: 80px;border: 1px dashed gray;" src="../../../assets/image/squer.png"
|
|
alt="">
|
|
alt="">
|
|
- <p class="" style="">上传文件名称</p>
|
|
|
|
|
|
+ <p class="" style="">{{ antherName }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -124,14 +123,26 @@ export default {
|
|
mustVal: {
|
|
mustVal: {
|
|
type: Boolean,
|
|
type: Boolean,
|
|
required: true
|
|
required: true
|
|
|
|
+ },
|
|
|
|
+ arrName: {
|
|
|
|
+ type: String,
|
|
|
|
+ required: true
|
|
|
|
+ },
|
|
|
|
+ upName: {
|
|
|
|
+ type: String,
|
|
|
|
+ required: true
|
|
}
|
|
}
|
|
},
|
|
},
|
|
setup(props, { emit }) {
|
|
setup(props, { emit }) {
|
|
let leaderLines = [];//控制线条显示
|
|
let leaderLines = [];//控制线条显示
|
|
let iedName = ref('')
|
|
let iedName = ref('')
|
|
- watch(() => props.backName, (newVal) => {
|
|
|
|
|
|
+ let antherName = ref('')
|
|
|
|
+ watch(() => props.arrName, (newVal) => {
|
|
iedName.value = newVal
|
|
iedName.value = newVal
|
|
})
|
|
})
|
|
|
|
+ watch(() => props.upName, (newVal) => {
|
|
|
|
+ antherName.value = newVal
|
|
|
|
+ })
|
|
// 判断增删改角标
|
|
// 判断增删改角标
|
|
function checkType(type) {
|
|
function checkType(type) {
|
|
if (type == 'zeng') {
|
|
if (type == 'zeng') {
|
|
@@ -143,6 +154,8 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
|
+ iedName.value = props.arrName
|
|
|
|
+ antherName.value = props.upName
|
|
let goose = document.getElementById('goose')//左盒子开始元素
|
|
let goose = document.getElementById('goose')//左盒子开始元素
|
|
let mainOne = document.getElementById('mainOne')//左盒子中部上半区元素
|
|
let mainOne = document.getElementById('mainOne')//左盒子中部上半区元素
|
|
let mainTwo = document.getElementById('mainTwo')//左盒子中部中间元素
|
|
let mainTwo = document.getElementById('mainTwo')//左盒子中部中间元素
|
|
@@ -166,7 +179,7 @@ export default {
|
|
leaderLines.push(new LeaderLine(goose, mainOne, { color: 'gray', size: 2, path: "grid" }))//左连中
|
|
leaderLines.push(new LeaderLine(goose, mainOne, { color: 'gray', size: 2, path: "grid" }))//左连中
|
|
leaderLines.push(new LeaderLine(goose, mainTwo, { color: 'gray', size: 2, path: "grid" }))//左连中
|
|
leaderLines.push(new LeaderLine(goose, mainTwo, { color: 'gray', size: 2, path: "grid" }))//左连中
|
|
leaderLines.push(new LeaderLine(goose, mainThree, { color: 'gray', size: 2, path: "grid" }))//左连中
|
|
leaderLines.push(new LeaderLine(goose, mainThree, { color: 'gray', size: 2, path: "grid" }))//左连中
|
|
- leaderLines.push(new LeaderLine(mainTwo, botOne, { color: 'orange', size: 2, path: "grid", endLabel: "装置IP",startSocket: "center", }))//中连右
|
|
|
|
|
|
+ leaderLines.push(new LeaderLine(mainTwo, botOne, { color: 'orange', size: 2, path: "grid", endLabel: "装置IP", startSocket: "center", }))//中连右
|
|
leaderLines.push(new LeaderLine(mainTwo, botTwo, { color: 'orange', size: 2, path: "grid", endLabel: "掩码", startLabel: "修改" }))//中连右
|
|
leaderLines.push(new LeaderLine(mainTwo, botTwo, { color: 'orange', size: 2, path: "grid", endLabel: "掩码", startLabel: "修改" }))//中连右
|
|
leaderLines.push(new LeaderLine(mainTwo, botThree, { color: 'orange', size: 2, path: "grid", endLabel: '网关' }))//中连右
|
|
leaderLines.push(new LeaderLine(mainTwo, botThree, { color: 'orange', size: 2, path: "grid", endLabel: '网关' }))//中连右
|
|
// 右部分连线
|
|
// 右部分连线
|
|
@@ -180,26 +193,6 @@ export default {
|
|
leaderLines.push(new LeaderLine(fitThree, ditFour, { color: 'red', size: 2, path: "grid" }))//中连左
|
|
leaderLines.push(new LeaderLine(fitThree, ditFour, { color: 'red', size: 2, path: "grid" }))//中连左
|
|
leaderLines.push(new LeaderLine(mainThree, ditFour, { color: 'red', size: 2, path: "grid", startLabel: "删除", endLabel: "MAC地址" }))//中连左
|
|
leaderLines.push(new LeaderLine(mainThree, ditFour, { color: 'red', size: 2, path: "grid", startLabel: "删除", endLabel: "MAC地址" }))//中连左
|
|
leaderLines.push(new LeaderLine(mainThree, ditFive, { color: 'red', size: 2, path: "grid", endLabel: "VLAN-IP" }))//中连左
|
|
leaderLines.push(new LeaderLine(mainThree, ditFive, { color: 'red', size: 2, path: "grid", endLabel: "VLAN-IP" }))//中连左
|
|
- // 子元素连线
|
|
|
|
- // leaderLines.push(new LeaderLine(botOne, ditOne, {
|
|
|
|
- // color: "orange",//连接线颜色
|
|
|
|
- // size: 10,//连接线宽度
|
|
|
|
- // path: "grid",//连接线样式
|
|
|
|
- // startSocket: "center",//开始链接元素位置
|
|
|
|
- // endSocket: "center",//结束链接元素位置
|
|
|
|
- // dash: {
|
|
|
|
- // // 绘制线的长度 'auto'=size*2
|
|
|
|
- // len: 1,
|
|
|
|
- // // 绘制线之间的间隙 'auto'=size
|
|
|
|
- // gap: 6,
|
|
|
|
- // // 线条滚动 true 是(或者{duration: 1000, timing: 'linear'},详见动画选项), false 否(默认)
|
|
|
|
- // animation: {
|
|
|
|
- // duration: 800,//动画速度
|
|
|
|
- // timing: "linear",
|
|
|
|
- // },
|
|
|
|
- // },//动画开启
|
|
|
|
- // endPlug:'behind',
|
|
|
|
- // }))
|
|
|
|
// 公共连线
|
|
// 公共连线
|
|
// 连线开始点样式
|
|
// 连线开始点样式
|
|
// disc 圆形 , square 方形 , arrow1 箭头1 , arrow2 箭头2 , arrow3 箭头3 ,
|
|
// disc 圆形 , square 方形 , arrow1 箭头1 , arrow2 箭头2 , arrow3 箭头3 ,
|
|
@@ -237,6 +230,7 @@ export default {
|
|
return {
|
|
return {
|
|
iedName,
|
|
iedName,
|
|
checkType,
|
|
checkType,
|
|
|
|
+ antherName,
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -249,9 +243,12 @@ h2 {
|
|
padding: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
-p,h2{
|
|
|
|
|
|
+
|
|
|
|
+p,
|
|
|
|
+h2 {
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.bigBox {
|
|
.bigBox {
|
|
width: 99%;
|
|
width: 99%;
|
|
height: 96%;
|
|
height: 96%;
|
|
@@ -421,5 +418,4 @@ p,h2{
|
|
position: absolute;
|
|
position: absolute;
|
|
top: -5px;
|
|
top: -5px;
|
|
right: 0px;
|
|
right: 0px;
|
|
-}
|
|
|
|
-</style>
|
|
|
|
|
|
+}</style>
|