313 lines
8.4 KiB
Vue
313 lines
8.4 KiB
Vue
<template>
|
|
<div class="box">
|
|
<div class="left">
|
|
<img src="../../assets/img/标题/回路名称.png" class="title" />
|
|
<ul class="list">
|
|
<li
|
|
v-for="item in list"
|
|
:class="res == item ? 'active' : ''"
|
|
@click="(res = item), sendMessageToCSharp(item)"
|
|
>
|
|
{{ item }}
|
|
</li>
|
|
</ul>
|
|
<div class="tpt">
|
|
<div class="imgBox">
|
|
<img src="../../assets/img/小标题栏.png" class="img" />
|
|
<p>拓扑图</p>
|
|
</div>
|
|
<div id="tpt">
|
|
<el-image
|
|
v-for="item in arr"
|
|
:src="item.url"
|
|
:preview-src-list="item.srcList"
|
|
>
|
|
</el-image>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img src="../../assets/img/pdsbg.png" alt="" class="bgt">
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Viewer from "viewerjs";
|
|
import { pdsJs } from "../../utils/pds";
|
|
export default {
|
|
data() {
|
|
return {
|
|
arr: [
|
|
// {
|
|
// url: require("../../assets/tpt/二线生料电力室.png"),
|
|
// srcList: [require("../../assets/tpt/二线生料电力室.png")],
|
|
// },
|
|
// {
|
|
// url: require("../../assets/tpt/二线窑头电力室1.png"),
|
|
// srcList: [require("../../assets/tpt/二线窑头电力室1.png")],
|
|
// },
|
|
// {
|
|
// url: require("../../assets/tpt/二线窑头电力室2.png"),
|
|
// srcList: [require("../../assets/tpt/二线窑头电力室2.png")],
|
|
// },
|
|
// {
|
|
// url: require("../../assets/tpt/矿山电力室.png"),
|
|
// srcList: [require("../../assets/tpt/矿山电力室.png")],
|
|
// },
|
|
// {
|
|
// url: require("../../assets/tpt/水泥磨电力室.png"),
|
|
// srcList: [require("../../assets/tpt/水泥磨电力室.png")],
|
|
// },
|
|
// {
|
|
// url: require("../../assets/tpt/万吨仓电力室.png"),
|
|
// srcList: [require("../../assets/tpt/万吨仓电力室.png")],
|
|
// },
|
|
// {
|
|
// url: require("../../assets/tpt/窑尾电力室.png"),
|
|
// srcList: [require("../../assets/tpt/窑尾电力室.png")],
|
|
// },
|
|
// {
|
|
// url: require("../../assets/tpt/一线生料电力室.png"),
|
|
// srcList: [require("../../assets/tpt/一线生料电力室.png")],
|
|
// },
|
|
// {
|
|
// url: require("../../assets/tpt/一线窑头电力室1.png"),
|
|
// srcList: [require("../../assets/tpt/一线窑头电力室1.png")],
|
|
// },
|
|
// {
|
|
// url: require("../../assets/tpt/一线窑头电力室2.png"),
|
|
// srcList: [require("../../assets/tpt/一线窑头电力室2.png")],
|
|
// },
|
|
// {
|
|
// url: require("../../assets/tpt/一线原煤电力室.png"),
|
|
// srcList: [require("../../assets/tpt/一线原煤电力室.png")],
|
|
// },
|
|
// {
|
|
// url: require("../../assets/tpt/余热发电电力室.png"),
|
|
// srcList: [require("../../assets/tpt/余热发电电力室.png")],
|
|
// },
|
|
// {
|
|
// url: require("../../assets/tpt/原材料电力室.png"),
|
|
// srcList: [require("../../assets/tpt/原材料电力室.png")],
|
|
// },
|
|
// {
|
|
// url: require("../../assets/tpt/总降电力室.png"),
|
|
// srcList: [require("../../assets/tpt/总降电力室.png")],
|
|
// },
|
|
],
|
|
list: [
|
|
// "6.3KV#1破碎出线",
|
|
// "6.3KV#1窑头出线",
|
|
// "6.3KV#1原料#1出线",
|
|
// "6.3KV#1原料#2出线",
|
|
// "6.3KV#2窑头出线",
|
|
// "6.3KV#2原料#1出线",
|
|
// "6.3KV#2原料#2出线",
|
|
// "6.3KV#1发电机出线(安热线)",
|
|
// "6.3KV#主变1进线",
|
|
// "6.3KV#主变2进线",
|
|
],
|
|
res: "",
|
|
};
|
|
},
|
|
created() {
|
|
this.getList(this.$route.query.type);
|
|
this.changeArr(this.$route.query.type);
|
|
},
|
|
methods: {
|
|
initViewer() {
|
|
this.viewer = new Viewer(this.$el, {
|
|
inline: false,
|
|
button: true,
|
|
navbar: true,
|
|
title: false,
|
|
toolbar: true,
|
|
tooltip: true,
|
|
movable: false,
|
|
zoomable: true,
|
|
rotatable: false,
|
|
scalable: true,
|
|
transition: true,
|
|
fullscreen: true,
|
|
keyboard: true,
|
|
url(image) {
|
|
console.log(image.src);
|
|
return image.src;
|
|
},
|
|
ready() {
|
|
console.log("Viewer is ready");
|
|
},
|
|
});
|
|
},
|
|
//根据三维传参拿到回路名称列表
|
|
getList(name) {
|
|
var list = [];
|
|
pdsJs.forEach((item) => {
|
|
if (item.name == name) {
|
|
list = item.list;
|
|
}
|
|
});
|
|
this.list = list;
|
|
},
|
|
sendMessageToCSharp(name) {
|
|
let that = this;
|
|
window.vuplex.postMessage({
|
|
type: that.$route.query.type,
|
|
name: name,
|
|
});
|
|
},
|
|
changeArr(name) {
|
|
if (name == "总降电力室") {
|
|
this.arr[0] = {
|
|
url: require("../../assets/tpt/二线生料电力室.png"),
|
|
srcList: [require("../../assets/tpt/二线生料电力室.png")],
|
|
};
|
|
} else if (name == "矿山电力室") {
|
|
this.arr[0] = {
|
|
url: require("../../assets/tpt/矿山电力室.png"),
|
|
srcList: [require("../../assets/tpt/矿山电力室.png")],
|
|
};
|
|
} else if (name == "原材料电力室") {
|
|
this.arr[0] = {
|
|
url: require("../../assets/tpt/原材料电力室.png"),
|
|
srcList: [require("../../assets/tpt/原材料电力室.png")],
|
|
};
|
|
} else if (name == "一线生料磨电力室") {
|
|
this.arr[0] = {
|
|
url: require("../../assets/tpt/一线生料电力室.png"),
|
|
srcList: [require("../../assets/tpt/一线生料电力室.png")],
|
|
};
|
|
} else if (name == "二线生料磨电力室") {
|
|
this.arr[0] = {
|
|
url: require("../../assets/tpt/二线生料电力室.png"),
|
|
srcList: [require("../../assets/tpt/二线生料电力室.png")],
|
|
};
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
this.initViewer();
|
|
},
|
|
beforeDestroy() {
|
|
if (this.viewer) {
|
|
this.viewer.destroy();
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="less">
|
|
.box {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-top: 400px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
background-color: transparent;
|
|
background-image: url(../../assets/img/左遮罩.png);
|
|
justify-content: space-between;
|
|
|
|
.left {
|
|
width: 1237px;
|
|
height: 2500px;
|
|
margin-left: 61px;
|
|
background-image: url("../../assets/img/侧边.png");
|
|
padding-left: 59px;
|
|
padding-right: 45px;
|
|
box-sizing: border-box;
|
|
|
|
.title {
|
|
margin-top: 15px;
|
|
margin-left: 60px;
|
|
}
|
|
|
|
.list {
|
|
margin-top: 50px;
|
|
list-style-type: none;
|
|
color: #fff;
|
|
font-size: 30px;
|
|
max-height: 1300px;
|
|
min-height: 600px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
li {
|
|
width: 1128px;
|
|
height: 103px;
|
|
background-color: #123c63;
|
|
text-align: left;
|
|
line-height: 103px;
|
|
text-indent: 50px;
|
|
margin: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.active {
|
|
color: #00fcff;
|
|
}
|
|
}
|
|
|
|
.tpt {
|
|
position: relative;
|
|
margin-top: 56px;
|
|
.data {
|
|
position: absolute;
|
|
font-size: 20px;
|
|
font-family: "DOUYU";
|
|
color: #ffffff;
|
|
line-height: 18px;
|
|
display: flex;
|
|
right: 0;
|
|
top: 120px;
|
|
z-index: 1;
|
|
cursor: pointer;
|
|
span {
|
|
width: 122px;
|
|
height: 38px;
|
|
margin: 10px;
|
|
display: block;
|
|
line-height: 38px;
|
|
text-align: center;
|
|
}
|
|
.active {
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(33, 76, 124, 0.3) 20%,
|
|
rgba(152, 207, 230, 0.3) 100%,
|
|
rgba(33, 76, 124, 0.3) 20%
|
|
);
|
|
}
|
|
}
|
|
.imgBox {
|
|
height: 93px;
|
|
width: 1156px;
|
|
p {
|
|
position: absolute;
|
|
color: #fff;
|
|
top: 20px;
|
|
left: 50px;
|
|
font-size: 30px;
|
|
font-family: "MicrosoftYaHei";
|
|
}
|
|
}
|
|
#tpt {
|
|
width: 1155px;
|
|
height: 500px;
|
|
margin-top: 50px;
|
|
/deep/ .el-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.bgt {
|
|
// width: 1113px;
|
|
// height: 2055px;
|
|
width: 317px;
|
|
height: 485px;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
// border: 2px solid #20d6fe;
|
|
transform: translate(50%, -50%);
|
|
}
|
|
</style>
|