|
|
@@ -12,7 +12,8 @@
|
|
|
<button @click="detailsModal = true">测试打开模态框</button>
|
|
|
<!-- 详细信息 -->
|
|
|
<div>
|
|
|
- <el-dialog :visible.sync="detailsModal" @opened="openDialog" @close="closeDialog" width="98%" top="1vh" :height="ceshi">
|
|
|
+ <el-dialog :visible.sync="detailsModal" @opened="openDialog" @close="closeDialog" width="98%"
|
|
|
+ top="1vh" :height="ceshi">
|
|
|
<div class="detailsTittle">
|
|
|
<span>xxx-详细信息</span>
|
|
|
</div>
|
|
|
@@ -38,10 +39,10 @@
|
|
|
</p>
|
|
|
</template>
|
|
|
</div>
|
|
|
- <!-- 关联关系 -->
|
|
|
- <AssociationVue v-if="insideOrOutside == '1'" :relation="thisRelation" ref="association" @changeRelation="changeRelation" @getLineArr = "getLineArr"></AssociationVue>
|
|
|
+ <AssociationVue v-if="false" :relation="thisRelation" ref="association"
|
|
|
+ @getLineArr="getLineArr"></AssociationVue>
|
|
|
<!-- 输入输出控制块 -->
|
|
|
- <div v-if="insideOrOutside == '2'">
|
|
|
+ <div v-if="insideOrOutside">
|
|
|
<!-- 导航栏 -->
|
|
|
<div>
|
|
|
<!-- 导航栏 -->
|
|
|
@@ -56,6 +57,10 @@
|
|
|
</div>
|
|
|
<!-- 内容栏 -->
|
|
|
<div class="informationBox">
|
|
|
+ <!-- 关联图 -->
|
|
|
+ <div class="mashionBox" v-if="meshBox">
|
|
|
+
|
|
|
+ </div>
|
|
|
<!-- sv发送盒子 -->
|
|
|
<div class="svgoBox" v-if="svgoBox">
|
|
|
<!-- 上层表格 -->
|
|
|
@@ -305,6 +310,90 @@
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- goose接收盒子 -->
|
|
|
+ <div class="svgoBox" v-if="gooseout">
|
|
|
+ <!-- 上层表格 -->
|
|
|
+ <div class="svgoTop">
|
|
|
+ <el-table :data="gooseoutlist"
|
|
|
+ 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>
|
|
|
@@ -327,8 +416,8 @@ import { forGround } from "@/api/basic/basic"
|
|
|
import AssociationVue from './components/Association.vue'
|
|
|
import { svgo, svout, gooseSun, gooseOut, allinPic, svgoSon } from "@/api/inandout/inandout"
|
|
|
export default {
|
|
|
- components:{AssociationVue},
|
|
|
- name:'Dashboard',
|
|
|
+ components: { AssociationVue },
|
|
|
+ name: 'Dashboard',
|
|
|
data() {
|
|
|
return {
|
|
|
detailsModal: false,
|
|
|
@@ -369,7 +458,7 @@ export default {
|
|
|
ceshi: "500px",
|
|
|
modelLeftList: [],//模态框内列表
|
|
|
stationCid: "",
|
|
|
- insideOrOutside: '1',//控制tab切换变量
|
|
|
+ insideOrOutside: false,//输入输出控制块盒子
|
|
|
inOrOutList: [
|
|
|
{
|
|
|
name: "关联图",
|
|
|
@@ -392,9 +481,9 @@ export default {
|
|
|
class: "gooseout"
|
|
|
}
|
|
|
],
|
|
|
- lineArr : [], //leaderline数据
|
|
|
- relationList:{},//终端列表
|
|
|
- thisRelation:{}, //当前选中终端
|
|
|
+ lineArr: [], //leaderline数据
|
|
|
+ relationList: {},//终端列表
|
|
|
+ thisRelation: {}, //当前选中终端
|
|
|
iedName: "",
|
|
|
svgoList: [],//sv发送列表
|
|
|
svgoListson: [],//sv发送子列表
|
|
|
@@ -411,10 +500,10 @@ export default {
|
|
|
goosegoson: [],//goose发送子端
|
|
|
gooseoutson: [],//goose接收子端
|
|
|
ifout: "",//判断是否为sv接收
|
|
|
+ meshBox: false,//关联图显示与否
|
|
|
+ meshList: {},//关联图数据
|
|
|
};
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
+ },
|
|
|
|
|
|
|
|
|
mounted() {
|
|
|
@@ -428,20 +517,17 @@ export default {
|
|
|
methods: {
|
|
|
goUrl(item, index) {
|
|
|
this.selectedIndex = index;
|
|
|
- // console.log(item,'item1');
|
|
|
- // 根据index进行切换，减少变量定义
|
|
|
- this.insideOrOutside = index+1
|
|
|
- // if(item.name == "输入输出控制块"){
|
|
|
- // this.insideOrOutside = true
|
|
|
- // }else{
|
|
|
- // this.insideOrOutside = false
|
|
|
- // }
|
|
|
+ if (item.name == "输入输出控制块") {
|
|
|
+ this.insideOrOutside = true
|
|
|
+ } else {
|
|
|
+ this.insideOrOutside = false
|
|
|
+ }
|
|
|
// 执行你的跳转逻辑
|
|
|
},
|
|
|
// 拿到首页左侧站点
|
|
|
async forMesTo() {
|
|
|
let res = await forGround({ pid: "0" })
|
|
|
- this.modelLeftList = res.data
|
|
|
+ // this.modelLeftList = res.data
|
|
|
},
|
|
|
// 根据站点id拿到站点信息
|
|
|
async getAllIedLink() {
|
|
|
@@ -460,43 +546,21 @@ export default {
|
|
|
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 })
|
|
|
+ let gos = await gooseOut({ scd_id: this.stationCid, ied_name: this.iedName })
|
|
|
+ let mesh = await allinPic({ scd_id: this.stationCid, ied_name: this.iedName, reset: 1 })
|
|
|
+ // sv接收
|
|
|
this.svgoList = res.data.SampledValueControl
|
|
|
this.goosegoson = resp.data
|
|
|
+ // goose接收
|
|
|
this.goosegolist = res.data.GSEControl
|
|
|
+ // goose发送
|
|
|
+ this.gooseoutlist = gos.data
|
|
|
+ // 关联图
|
|
|
+ this.meshList = mesh.data
|
|
|
},
|
|
|
// 输入与输出控制块切换盒子
|
|
|
boxChange(row, num) {
|
|
|
this.selectedIndexOne = num
|
|
|
-
|
|
|
- },
|
|
|
- // 获取终端信息列表
|
|
|
- async getRelationlist(){
|
|
|
- let res = await getiedmse({scd_id:'8000003'})
|
|
|
- console.log('getRelationlist-res = ',res);
|
|
|
- this.relationList = res.data
|
|
|
- this.thisRelation = this.relationList['CE1101']
|
|
|
- console.log('thisRelation = ',this.thisRelation);
|
|
|
- },
|
|
|
- // 切换显示关联关系的终端
|
|
|
- changeRelation(name){
|
|
|
- this.thisRelation = this.relationList[name]
|
|
|
- },
|
|
|
- // 拿到子组件的leaderline数据
|
|
|
- getLineArr(arr){
|
|
|
- this.lineArr = arr
|
|
|
- },
|
|
|
- // 打开dialog时画leaderline
|
|
|
- openDialog(){
|
|
|
- this.$refs.association.setLeaderline()
|
|
|
- },
|
|
|
- // 关闭dialog时删除leaderline
|
|
|
- closeDialog(){
|
|
|
- this.lineArr.forEach((item) => {
|
|
|
- item.remove();
|
|
|
- });
|
|
|
- this.lineArr = [];
|
|
|
- // 将组件内的数据同时清空
|
|
|
- this.$refs.association.lineArr = []
|
|
|
if (row.name === "SV发送") {
|
|
|
this.ifout = ''
|
|
|
this.svgoListson = []
|
|
|
@@ -518,23 +582,85 @@ export default {
|
|
|
} else {
|
|
|
this.goosego = false
|
|
|
}
|
|
|
+ if (row.name == 'GOOSE接收') {
|
|
|
+ this.ifout = ''
|
|
|
+ this.svgoListson = []
|
|
|
+ this.gooseout = true
|
|
|
+ } else {
|
|
|
+ this.gooseout = false
|
|
|
+ }
|
|
|
+ if (row.name == '关联图') {
|
|
|
+ this.ifout = ''
|
|
|
+ this.svgoListson = []
|
|
|
+ this.meshBox = true
|
|
|
+ } else {
|
|
|
+ this.meshBox = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取终端信息列表
|
|
|
+ async getRelationlist() {
|
|
|
+ let res = await getiedmse({ scd_id: '8000003' })
|
|
|
+ console.log('getRelationlist-res = ', res);
|
|
|
+ this.relationList = res.data
|
|
|
+ this.thisRelation = this.relationList['CE1101']
|
|
|
+ console.log('thisRelation = ', this.thisRelation);
|
|
|
+ },
|
|
|
+ // 切换显示关联关系的终端
|
|
|
+ changeRelation(name) {
|
|
|
+ this.thisRelation = this.relationList[name]
|
|
|
+ },
|
|
|
+ // 拿到子组件的leaderline数据
|
|
|
+ getLineArr(arr) {
|
|
|
+ this.lineArr = arr
|
|
|
+ },
|
|
|
+ // 打开dialog时画leaderline
|
|
|
+ openDialog() {
|
|
|
+ this.$refs.association.setLeaderline()
|
|
|
+ },
|
|
|
+ // 关闭dialog时删除leaderline
|
|
|
+ closeDialog() {
|
|
|
+ this.lineArr.forEach((item) => {
|
|
|
+ item.remove();
|
|
|
+ });
|
|
|
+ this.lineArr = [];
|
|
|
+ // 将组件内的数据同时清空
|
|
|
+ this.$refs.association.lineArr = []
|
|
|
+
|
|
|
+ },
|
|
|
+ // 获取终端信息列表
|
|
|
+ async getRelationlist() {
|
|
|
+ let res = await getiedmse({ scd_id: '8000003' })
|
|
|
+ this.relationList = res.data
|
|
|
+ this.thisRelation = this.relationList['CE1101']
|
|
|
+ },
|
|
|
+ // 拿到子组件的leaderline数据
|
|
|
+ getLineArr(arr) {
|
|
|
+ this.lineArr = arr
|
|
|
+ },
|
|
|
+ // 打开dialog时画leaderline
|
|
|
+ openDialog() {
|
|
|
+ // this.$refs.association.setLeaderline()
|
|
|
+ },
|
|
|
+ // 关闭dialog时删除leaderline
|
|
|
+ closeDialog() {
|
|
|
+ this.lineArr.forEach((item) => {
|
|
|
+ item.remove();
|
|
|
+ });
|
|
|
},
|
|
|
// 表格一行点击事件
|
|
|
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');
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
liyangzheng