|
|
@@ -9,7 +9,6 @@
|
|
|
<el-header class="main-top">Header</el-header>
|
|
|
<el-main class="main-cont">
|
|
|
<div>
|
|
|
- home
|
|
|
<button @click="detailsModal = true">测试打开模态框</button>
|
|
|
<!-- 详细信息 -->
|
|
|
<div>
|
|
|
@@ -22,8 +21,9 @@
|
|
|
<el-input style="width: 300px;margin-top: 10px;" v-model="searchFast"
|
|
|
placeholder="快速查找"></el-input>
|
|
|
<template v-for="(item, index) in modelLeftList">
|
|
|
- <div class="leftMes" @click="insideBox(item)">
|
|
|
- <span class="leftMesSpan">{{ item.ied_name }}</span>
|
|
|
+ <div :class="['leftMes', { active1: selectedIndex2 === index }]"
|
|
|
+ @click="insideBox(item, index)">
|
|
|
+ <span>{{ item.ied_name }}</span>
|
|
|
<span>{{ item.desc }}</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -40,16 +40,269 @@
|
|
|
</div>
|
|
|
<!-- 输入输出控制块 -->
|
|
|
<div v-if="insideOrOutside">
|
|
|
- <!-- 导航栏 -->
|
|
|
<div>
|
|
|
+ <!-- 导航栏 -->
|
|
|
<div class="caseNavBox">
|
|
|
<template v-for="(item, index) in inOrOutList">
|
|
|
- <span :class="['insideCard', { sective: selectedIndexOne === index }]"
|
|
|
+ <span
|
|
|
+ :class="['insideCard', { sective: selectedIndexOne === index }]"
|
|
|
@click="boxChange(item, index)">
|
|
|
{{ item.name }}
|
|
|
</span>
|
|
|
</template>
|
|
|
</div>
|
|
|
+ <!-- 内容栏 -->
|
|
|
+ <div class="informationBox">
|
|
|
+ <!-- sv发送盒子 -->
|
|
|
+ <div class="svgoBox" v-if="svgoBox">
|
|
|
+ <!-- 上层表格 -->
|
|
|
+ <div class="svgoTop">
|
|
|
+ <el-table :data="svgoList"
|
|
|
+ style="width: 100%;margin: 0 auto;margin-top: 20px;"
|
|
|
+ :header-cell-style="{ background: ' #F3F5FA ', color: ' black ' }"
|
|
|
+ @row-click="sgList">
|
|
|
+ <el-table-column label="序号" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.$index + 1 }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="attr_name" label="控制块名称" width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="attr_dat_set" label="数据集"
|
|
|
+ width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ [scope.row.attr_dat_set] }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="APPID">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.address.APPID }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="MAC地址">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.address.MAC_Address }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="VLAN_ID">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.address.VLAN_ID }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <!-- 下层表格 -->
|
|
|
+ <p>MSV子端详情列表</p>
|
|
|
+ <div class="svgoSon">
|
|
|
+ <el-table :data="svgoListson"
|
|
|
+ style="width: 100%;margin: 0 auto;margin-top: 20px;"
|
|
|
+ :header-cell-style="{ background: ' #F3F5FA ', color: ' black ' }">
|
|
|
+ <el-table-column label="序号" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.$index + 1 }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="do_desc" label="内部子端描述" width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="attr_dat_set" label="内部子端地址"
|
|
|
+ width="220">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>
|
|
|
+ {{ scope.row.ld_inst }}/{{ scope.row.ld_inst
|
|
|
+ }}{{ scope.row.ln_class }}.{{
|
|
|
+ scope.row.do_name }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="外部IED名称">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>
|
|
|
+ {{
|
|
|
+ scope.row.out_ied_name && scope.row.out_ied_desc
|
|
|
+ ? scope.row.out_ied_name + '.' +
|
|
|
+ scope.row.out_ied_desc
|
|
|
+ : ''
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="外部端子描述">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.out_do_desc }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- sv接收盒子 -->
|
|
|
+ <div class="svgoBox" v-if="svoutBox">
|
|
|
+ <!-- 上层表格 -->
|
|
|
+ <div class="svgoTop">
|
|
|
+ <el-table :data="svoutList"
|
|
|
+ style="width: 100%;margin: 0 auto;margin-top: 20px;"
|
|
|
+ :header-cell-style="{ background: ' #F3F5FA ', color: ' black ' }"
|
|
|
+ @row-click="sgList">
|
|
|
+ <el-table-column label="序号" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.$index + 1 }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="attr_name" label="控制块名称" width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="attr_dat_set" label="数据集"
|
|
|
+ width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ [scope.row.attr_dat_set] }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="APPID">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.address.APPID }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="MAC地址">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.address.MAC_Address }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="VLAN_ID">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.address.VLAN_ID }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <!-- 下层表格 -->
|
|
|
+ <p>MSV子端详情列表</p>
|
|
|
+ <div class="svgoSon">
|
|
|
+ <el-table :data="svgoListson"
|
|
|
+ style="width: 100%;margin: 0 auto;margin-top: 20px;"
|
|
|
+ :header-cell-style="{ background: ' #F3F5FA ', color: ' black ' }">
|
|
|
+ <el-table-column label="序号" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.$index + 1 }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="do_desc" label="内部子端描述" width="240">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="attr_dat_set" label="内部子端地址"
|
|
|
+ width="200">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>
|
|
|
+ {{
|
|
|
+ scope.row.ld_inst && scope.row.ln_class
|
|
|
+ ? scope.row.ld_inst + '/' + scope.row.ld_inst +
|
|
|
+ scope.row.ln_class + '.' + scope.row.do_name
|
|
|
+ : ''
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="外部IED名称">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>
|
|
|
+ {{
|
|
|
+ scope.row.out_ied_name && scope.row.out_ied_desc
|
|
|
+ ? scope.row.out_ied_name + '.' +
|
|
|
+ scope.row.out_ied_desc
|
|
|
+ : ''
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="外部端子描述">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.out_do_desc }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- GOOSE发送盒子 -->
|
|
|
+ <div class="svgoBox" v-if="goosego">
|
|
|
+ <!-- 上层表格 -->
|
|
|
+ <div class="svgoTop">
|
|
|
+ <el-table :data="goosegolist"
|
|
|
+ style="width: 100%;margin: 0 auto;margin-top: 20px;"
|
|
|
+ :header-cell-style="{ background: ' #F3F5FA ', color: ' black ' }"
|
|
|
+ @row-click="sgList">
|
|
|
+ <el-table-column label="序号" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.$index + 1 }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="attr_name" label="控制块名称" width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="attr_dat_set" label="数据集"
|
|
|
+ width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ [scope.row.attr_dat_set] }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="APPID">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.address.APPID }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="MAC地址">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.address.MAC_Address }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="VLAN_ID">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.address.VLAN_ID }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <!-- 下层表格 -->
|
|
|
+ <p>MSV子端详情列表</p>
|
|
|
+ <div class="svgoSon">
|
|
|
+ <el-table :data="goosegoson"
|
|
|
+ style="width: 100%;margin: 0 auto;margin-top: 20px;"
|
|
|
+ :header-cell-style="{ background: ' #F3F5FA ', color: ' black ' }">
|
|
|
+ <el-table-column label="序号" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.$index + 1 }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="do_desc" label="内部子端描述" width="240">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="attr_dat_set" label="内部子端地址"
|
|
|
+ width="200">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>
|
|
|
+ {{
|
|
|
+ scope.row.ld_inst && scope.row.ln_class
|
|
|
+ ? scope.row.ld_inst + '/' + scope.row.ld_inst +
|
|
|
+ scope.row.ln_class + '.' + scope.row.do_name
|
|
|
+ : ''
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="外部IED名称">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>
|
|
|
+ {{
|
|
|
+ scope.row.out_ied_name && scope.row.out_ied_desc
|
|
|
+ ? scope.row.out_ied_name + '.' +
|
|
|
+ scope.row.out_ied_desc
|
|
|
+ : ''
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="外部端子描述">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.out_do_desc }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -68,6 +321,7 @@
|
|
|
<script>
|
|
|
import { getscdlist, getiedmse } from "@/api/ied/ied"
|
|
|
import { forGround } from "@/api/basic/basic"
|
|
|
+import { svgo, svout, gooseSun, gooseOut, allinPic, svgoSon } from "@/api/inandout/inandout"
|
|
|
export default {
|
|
|
name: 'ScdProjectIndex',
|
|
|
data() {
|
|
|
@@ -106,6 +360,7 @@ export default {
|
|
|
],
|
|
|
selectedIndex: 0,//选中的背景
|
|
|
selectedIndexOne: 0,//选中的背景1
|
|
|
+ selectedIndex2: 0,//选中的背景2
|
|
|
ceshi: "500px",
|
|
|
modelLeftList: [],//模态框内列表
|
|
|
stationCid: "",
|
|
|
@@ -131,7 +386,23 @@ export default {
|
|
|
name: "GOOSE接收",
|
|
|
class: "gooseout"
|
|
|
}
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ iedName: "",
|
|
|
+ svgoList: [],//sv发送列表
|
|
|
+ svgoListson: [],//sv发送子列表
|
|
|
+ svoutList: [],//sv接收列表
|
|
|
+ svoutListson: [],//sv接收子列表
|
|
|
+ goosegolist: [],//goose发送列表
|
|
|
+ gooseoutlist: [],//goose接收列表
|
|
|
+ svgoId: "",//sv发送上表格id
|
|
|
+ svoutId: "",//sv接收上表格id
|
|
|
+ svgoBox: false,//sv发送显示与否
|
|
|
+ svoutBox: false,//sv接收显示与否
|
|
|
+ goosego: false,//goose发送显示与否
|
|
|
+ gooseout: false,//goose接收显示与否
|
|
|
+ goosegoson: [],//goose发送子端
|
|
|
+ gooseoutson: [],//goose接收子端
|
|
|
+ ifout: "",//判断是否为sv接收
|
|
|
};
|
|
|
},
|
|
|
|
|
|
@@ -145,10 +416,10 @@ export default {
|
|
|
methods: {
|
|
|
goUrl(item, index) {
|
|
|
this.selectedIndex = index;
|
|
|
- console.log(item,'item1');
|
|
|
- if(item.name == "输入输出控制块"){
|
|
|
+ console.log(item, 'item1');
|
|
|
+ if (item.name == "输入输出控制块") {
|
|
|
this.insideOrOutside = true
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
this.insideOrOutside = false
|
|
|
}
|
|
|
// 执行你的跳转逻辑
|
|
|
@@ -170,12 +441,52 @@ export default {
|
|
|
this.modelLeftList = res.data
|
|
|
},
|
|
|
// 切换盒子
|
|
|
- insideBox(row) {
|
|
|
- console.log(row, 'row');
|
|
|
+ async insideBox(row, num) {
|
|
|
+ this.selectedIndex2 = num
|
|
|
+ this.iedName = row.ied_name
|
|
|
+ let res = await svgo({ scd_id: this.stationCid, ied_name: this.iedName })
|
|
|
+ let resp = await svout({ scd_id: this.stationCid, ied_name: this.iedName })
|
|
|
+ this.svgoList = res.data.SampledValueControl
|
|
|
+ this.goosegoson = resp.data
|
|
|
+ this.goosegolist = res.data.GSEControl
|
|
|
},
|
|
|
// 输入与输出控制块切换盒子
|
|
|
boxChange(row, num) {
|
|
|
this.selectedIndexOne = num
|
|
|
+ if (row.name === "SV发送") {
|
|
|
+ this.ifout = ''
|
|
|
+ this.svgoListson = []
|
|
|
+ this.svgoBox = true
|
|
|
+ } else {
|
|
|
+ this.svgoBox = false
|
|
|
+ }
|
|
|
+ if (row.name == 'SV接收') {
|
|
|
+ this.ifout = row.name
|
|
|
+ this.svgoListson = []
|
|
|
+ this.svoutBox = true
|
|
|
+ } else {
|
|
|
+ this.svoutBox = false
|
|
|
+ }
|
|
|
+ if (row.name == 'GOOSE发送') {
|
|
|
+ this.ifout = ''
|
|
|
+ this.svgoListson = []
|
|
|
+ this.goosego = true
|
|
|
+ } else {
|
|
|
+ this.goosego = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 表格一行点击事件
|
|
|
+ async sgList(row, event, column) {
|
|
|
+ this.svgoId = row.node_id
|
|
|
+ console.log(this.ifout, 'ifout');
|
|
|
+ if (this.ifout !== "SV接收") {
|
|
|
+ let res = await svgoSon({ scd_id: this.stationCid, ied_name: this.iedName, ctrlid: this.svgoId })
|
|
|
+ this.svgoListson = res.data
|
|
|
+ } else {
|
|
|
+ let res = await svout({ scd_id: this.stationCid, ied_name: this.iedName })
|
|
|
+ this.svgoListson = res.data
|
|
|
+ console.log(res, 'rrrrr');
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
@@ -195,10 +506,12 @@ p {
|
|
|
text-align: center;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
-.inBoxRight{
|
|
|
+
|
|
|
+.inBoxRight {
|
|
|
width: 1100px;
|
|
|
height: 550px;
|
|
|
}
|
|
|
+
|
|
|
.inDetailsBox {
|
|
|
margin-top: 10px;
|
|
|
display: flex;
|
|
|
@@ -223,6 +536,16 @@ p {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
+.active1 {
|
|
|
+ margin: 5px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: skyblue;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
/* 名称和信息 */
|
|
|
.leftMes:hover {
|
|
|
background-color: beige;
|
|
|
@@ -289,6 +612,7 @@ p {
|
|
|
padding-bottom: 28px;
|
|
|
}
|
|
|
|
|
|
+/* 内层关系 */
|
|
|
.insideCard {
|
|
|
display: inline-block;
|
|
|
width: 80px;
|
|
|
@@ -314,4 +638,23 @@ p {
|
|
|
text-align: center;
|
|
|
line-height: 20px;
|
|
|
}
|
|
|
+
|
|
|
+/* sv发送上层表格盒子 */
|
|
|
+.svgoTop {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ border: 1px solid #dbdbdb;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table tr {
|
|
|
+ background-color: #dbdbdb;
|
|
|
+}
|
|
|
+
|
|
|
+.svgoSon {
|
|
|
+ width: 100%;
|
|
|
+ height: 260px;
|
|
|
+ border: 1px solid #dbdbdb;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
</style>
|
liyangzheng