liulonglong
/
shuinichang_
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

1

This commit is contained in:
lll 2023-12-13 15:02:04 +08:00
parent 727304652b
commit ddb092cb6b
7 changed files with 120 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/pds/关闭.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

61
src/components/tpt.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<div>
<div class="outside-element" @click="handleOutsideClick"></div>
<div class="tpt11" v-if="tptFlag">
<img
src="../assets/pds/关闭.png"
alt=""
class="closeBtn"
@click="tptFlag = false"
/>
<img :src="url" alt="" />
</div>
</div>
</template>
<script>
export default {
props: ["url"],
data() {
return {
tptFlag: false,
};
},
methods: {
close() {
this.tptFlag = false;
},
open() {
this.tptFlag = true;
},
handleOutsideClick(event) {
if (!event.target.classList.contains("tpt11")) {
this.tptFlag = false;
}
},
},
};
</script>
<style scoped lang="less">
.tpt11 {
width: 30%;
height: 30%;
background-color: #a4f325;
position: fixed;
left: 50%;
top: 30%;
transform: translateX(-50%);
z-index: 200;
.closeBtn {
cursor: pointer;
position: absolute;
right: 10px;
width: 54px;
height: 54px;
}
}
.outside-element {
width: 100%;
height: 100%;
position: fixed;
}
</style>

4
src/utils/pds.js
View File

@ -4,6 +4,7 @@ export let pdsJs = [
list: [ list: [
"6.3KV#1破碎出线", "6.3KV#1破碎出线",
"6.3KV#1窑头出线", "6.3KV#1窑头出线",
"6.3KV#1原料#1出线", "6.3KV#1原料#1出线",
"6.3KV#1原料#2出线", "6.3KV#1原料#2出线",
"6.3KV#2窑头出线", "6.3KV#2窑头出线",
@ -21,7 +22,7 @@ export let pdsJs = [
"6.3KV#3窑尾出线", "6.3KV#3窑尾出线",
"6.3KV#3窑头出线", "6.3KV#3窑头出线",
"6.3KV#2水泥磨出线", "6.3KV#2水泥磨出线",
"6.3KV#2发电机出线" "6.3KV#2发电机出线",
], ],
}, },
{ {
@ -68,7 +69,6 @@ export let pdsJs = [
"原材料变压器", "原材料变压器",
"1#后排风机", "1#后排风机",
"1#变压器", "1#变压器",
"2#变压器", "2#变压器",
"生料磨主电机", "生料磨主电机",
"1#生料磨高温风机", "1#生料磨高温风机",

4
src/views/Zhou/FHGL.vue
View File

@ -392,7 +392,7 @@ export default {
"kw" + "kw" +
"}" "}"
); );
}else if(params.name=="二级"){ } else if (params.name == "二级") {
return ( return (
"{name|" + "{name|" +
params.name + params.name +
@ -407,7 +407,7 @@ export default {
"kw" + "kw" +
"}" "}"
); );
}else{ } else {
return ( return (
"{name|" + "{name|" +
params.name + params.name +

54
src/views/lll/NYJCD.vue
View File

@ -55,7 +55,7 @@
水泥磨系统 水泥磨系统
</div> </div>
</div> </div>
<tpt ref="tpt" :url="url"></tpt>
<div class="left" v-show="flag"> <div class="left" v-show="flag">
<img src="../../assets/img/标题/能源监测-电.png" class="title" /> <img src="../../assets/img/标题/能源监测-电.png" class="title" />
<div class="qcssdh"> <div class="qcssdh">
@ -100,12 +100,7 @@
<p>总降拓扑图</p> <p>总降拓扑图</p>
</div> </div>
<div class="imgBox1"> <div class="imgBox1">
<el-image <img :src="url" alt="" srcset="" @click="$refs.tpt.open()" />
v-for="item in arr"
:src="item.url"
:preview-src-list="item.srcList"
>
</el-image>
</div> </div>
</div> </div>
</div> </div>
@ -178,7 +173,7 @@
<script> <script>
import { RouterView } from "vue-router"; import { RouterView } from "vue-router";
import * as echarts from "echarts"; import * as echarts from "echarts";
import Viewer from "viewerjs"; import tpt from "../../components/tpt.vue";
export default { export default {
data() { data() {
return { return {
@ -355,39 +350,10 @@ export default {
value: "3.27", value: "3.27",
}, },
], ],
arr: [ url: require("../../assets/tpt/总降电力室.png"),
{
url: require("../../assets/tpt/总降电力室.png"),
srcList: [require("../../assets/tpt/总降电力室.png")],
},
],
}; };
}, },
methods: { 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");
},
});
},
defineEcharts(dom, option) { defineEcharts(dom, option) {
var chartDom = document.getElementById(dom); var chartDom = document.getElementById(dom);
var myChart = this.$echarts.init(chartDom); var myChart = this.$echarts.init(chartDom);
@ -430,7 +396,6 @@ export default {
() => {} () => {}
); );
}, },
//余热发电 3d //余热发电 3d
yrfd() { yrfd() {
let xaxisData = ["1月", "2月", "3月", "4月", "5月"]; let xaxisData = ["1月", "2月", "3月", "4月", "5月"];
@ -720,18 +685,13 @@ export default {
mounted() { mounted() {
let dom = document.querySelector(".area1"); let dom = document.querySelector(".area1");
dom.style.pointerEvents = "none"; dom.style.pointerEvents = "none";
this.initViewer();
this.defineEcharts("qcssdh", this.option1); this.defineEcharts("qcssdh", this.option1);
// this.defineEcharts("yrfd", this.option2); // this.defineEcharts("yrfd", this.option2);
this.yrfd(); this.yrfd();
this.defineEcharts("ljfdl", this.option3); this.defineEcharts("ljfdl", this.option3);
}, },
beforeDestroy() {
if (this.viewer) { components: { RouterView, tpt },
this.viewer.destroy();
}
},
components: { RouterView },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@ -824,6 +784,8 @@ export default {
padding-left: 59px; padding-left: 59px;
padding-right: 45px; padding-right: 45px;
box-sizing: border-box; box-sizing: border-box;
position: fixed;
left: 0;
.title { .title {
margin-top: 15px; margin-top: 15px;

13
src/views/lll/NYJCS.vue
View File

@ -46,6 +46,7 @@
<div id="nysl"></div> <div id="nysl"></div>
</div> </div>
</div> </div>
<tpt ref="tpt" :url="url"></tpt>
<div class="right"> <div class="right">
<div class="ystj"> <div class="ystj">
<div class="imgBox"> <div class="imgBox">
@ -124,7 +125,7 @@
</div> </div>
<div class="chartBox"> <div class="chartBox">
<div id="tpt"> <div id="tpt">
<img src="" alt="" /> <img :src="url" alt="" @click="$refs.tpt.open()" />
</div> </div>
</div> </div>
</div> </div>
@ -142,6 +143,7 @@
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import tpt from "../../components/tpt.vue";
export default { export default {
data() { data() {
return { return {
@ -409,6 +411,7 @@ export default {
date4: "19.19", date4: "19.19",
}, },
], ],
url: require("../../assets/tpt/一线生料电力室.png"),
}; };
}, },
methods: { methods: {
@ -689,6 +692,9 @@ export default {
this.defineEcharts("nysl", this.option3); this.defineEcharts("nysl", this.option3);
this.defineEcharts("nhfx", this.option4); this.defineEcharts("nhfx", this.option4);
}, },
components: {
tpt,
},
}; };
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@ -925,6 +931,7 @@ export default {
} }
} }
} }
.right { .right {
width: 1237px; width: 1237px;
height: 2500px; height: 2500px;
@ -1090,6 +1097,10 @@ export default {
color: #56f671; color: #56f671;
} }
} }
img {
width: 100%;
height: 100%;
}
} }
} }
.nhfx { .nhfx {

168
src/views/lll/PDS.vue
View File

@ -17,17 +17,12 @@
<p>拓扑图</p> <p>拓扑图</p>
</div> </div>
<div id="tpt"> <div id="tpt">
<el-image <img :src="url" alt="" @click="openImage" />
v-for="item in arr"
:src="item.url"
:preview-src-list="item.srcList"
>
</el-image>
</div> </div>
</div> </div>
</div> </div>
<img src="../../assets/pds/中间.png" v-show="falg" alt="" class="bgt" /> <img src="../../assets/pds/中间.png" v-show="falg" alt="" class="bgt" />
<tpt ref="tpt" :url="url"></tpt>
<div class="boxLeft" v-if="falg"> <div class="boxLeft" v-if="falg">
<div class="title">1号配电箱</div> <div class="title">1号配电箱</div>
<div class="container"> <div class="container">
@ -126,13 +121,13 @@
</div> </div>
</template> </template>
<script> <script>
import Viewer from "viewerjs";
import { pdsJs } from "../../utils/pds"; import { pdsJs } from "../../utils/pds";
import * as echarts from "echarts"; import * as echarts from "echarts";
import tpt from "../../components/tpt.vue";
export default { export default {
data() { data() {
return { return {
arr: [], url: "",
list: [], list: [],
res: "", res: "",
falg: true, falg: true,
@ -363,30 +358,6 @@ export default {
}, },
}, },
methods: { 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) { getList(name) {
var list = []; var list = [];
@ -406,125 +377,59 @@ export default {
}); });
}, },
changeArr(name) { changeArr(name) {
// var url = require("../../assets/tpt/" + name + ".png"); // this.url = require("../../assets/tpt/总降电力室.png");
// this.arr[0] = { // this.url = require(`../../assets/tpt/${name}.png`);
// url: url,
// srcList: [url],
// };
if (name == "总降电力室") { if (name == "总降电力室") {
this.arr[0] = { this.url = require("../../assets/tpt/总降电力室.png");
url: require("../../assets/tpt/总降电力室.png"),
srcList: [require("../../assets/tpt/总降电力室.png")],
};
} else if (name == "矿山电力室") { } else if (name == "矿山电力室") {
this.arr[0] = { this.url = require("../../assets/tpt/矿山电力室.png");
url: require("../../assets/tpt/矿山电力室.png"),
srcList: [require("../../assets/tpt/矿山电力室.png")],
};
} else if (name == "原材料电力室") { } else if (name == "原材料电力室") {
this.arr[0] = { this.url = require("../../assets/tpt/原材料电力室.png");
url: require("../../assets/tpt/原材料电力室.png"),
srcList: [require("../../assets/tpt/原材料电力室.png")],
};
} else if (name == "一线生料磨电力室") { } else if (name == "一线生料磨电力室") {
this.arr[0] = { this.url = require("../../assets/tpt/一线生料电力室.png");
url: require("../../assets/tpt/一线生料电力室.png"),
srcList: [require("../../assets/tpt/一线生料电力室.png")],
};
} else if (name == "二线生料磨电力室") { } else if (name == "二线生料磨电力室") {
this.arr[0] = { this.url = require("../../assets/tpt/二线生料电力室.png");
url: require("../../assets/tpt/二线生料电力室.png"),
srcList: [require("../../assets/tpt/二线生料电力室.png")],
};
} else if (name == "窑尾电力室") { } else if (name == "窑尾电力室") {
this.arr[0] = { this.url = require("../../assets/tpt/窑尾电力室.png");
url: require("../../assets/tpt/窑尾电力室.png"),
srcList: [require("../../assets/tpt/窑尾电力室.png")],
};
} else if (name == "一线窑头电力室1") { } else if (name == "一线窑头电力室1") {
this.arr[0] = { this.url = require("../../assets/tpt/一线窑头电力室1.png");
url: require("../../assets/tpt/一线窑头电力室1.png"),
srcList: [require("../../assets/tpt/一线窑头电力室1.png")],
};
} else if (name == "一线窑头电力室2") { } else if (name == "一线窑头电力室2") {
this.arr[0] = { this.url = require("../../assets/tpt/一线窑头电力室2.png");
url: require("../../assets/tpt/一线窑头电力室2.png"),
srcList: [require("../../assets/tpt/一线窑头电力室2.png")],
};
} else if (name == "二线窑头电力室1") { } else if (name == "二线窑头电力室1") {
this.arr[0] = { this.url = require("../../assets/tpt/二线窑头电力室1.png");
url: require("../../assets/tpt/二线窑头电力室1.png"),
srcList: [require("../../assets/tpt/二线窑头电力室1.png")],
};
} else if (name == "二线窑头电力室2") { } else if (name == "二线窑头电力室2") {
this.arr[0] = { this.url = require("../../assets/tpt/二线窑头电力室2.png");
url: require("../../assets/tpt/二线窑头电力室2.png"),
srcList: [require("../../assets/tpt/二线窑头电力室2.png")],
};
} else if (name == "一线原煤电力室") { } else if (name == "一线原煤电力室") {
this.arr[0] = { this.url = require("../../assets/tpt/一线原煤电力室.png");
url: require("../../assets/tpt/一线原煤电力室.png"),
srcList: [require("../../assets/tpt/一线原煤电力室.png")],
};
} else if (name == "水泥磨电力室") { } else if (name == "水泥磨电力室") {
this.arr[0] = { this.url = require("../../assets/tpt/水泥磨电力室.png");
url: require("../../assets/tpt/水泥磨电力室.png"),
srcList: [require("../../assets/tpt/水泥磨电力室.png")],
};
} else if (name == "万吨仓电力室") { } else if (name == "万吨仓电力室") {
this.arr[0] = { this.url = require("../../assets/tpt/万吨仓电力室.png");
url: require("../../assets/tpt/万吨仓电力室.png"),
srcList: [require("../../assets/tpt/万吨仓电力室.png")],
};
} else if (name == "余热发电电力室") { } else if (name == "余热发电电力室") {
this.arr[0] = { this.url = require("../../assets/tpt/余热发电电力室.png");
url: require("../../assets/tpt/余热发电电力室.png"),
srcList: [require("../../assets/tpt/余热发电电力室.png")],
};
} }
//以下暂无拓扑图 //以下暂无拓扑图
// else if (name == "三号线熟料配电室") { // else if (name == "三号线熟料配电室") {
// this.arr[0] = { // this.url =require("../../assets/tpt/三号线熟料配电室.png")
// url: require("../../assets/tpt/三号线熟料配电室.png"),
// srcList: [require("../../assets/tpt/三号线熟料配电室.png")],
// };
// } else if (name == "三号线窑头配电室") { // } else if (name == "三号线窑头配电室") {
// this.arr[0] = { // this.url = require("../../assets/tpt/三号线窑头配电室.png")
// url: require("../../assets/tpt/三号线窑头配电室.png"),
// srcList: [require("../../assets/tpt/三号线窑头配电室.png")],
// };
// } else if (name == "三号线窑尾配电室") { // } else if (name == "三号线窑尾配电室") {
// this.arr[0] = { // this.url =require("../../assets/tpt/三号线窑尾配电室.png")
// url: require("../../assets/tpt/三号线窑尾配电室.png"),
// srcList: [require("../../assets/tpt/三号线窑尾配电室.png")],
// };
// } else if (name == "三号线生料配电室") { // } else if (name == "三号线生料配电室") {
// this.arr[0] = { // this.url = require("../../assets/tpt/三号线生料配电室.png")
// url: require("../../assets/tpt/三号线生料配电室.png"),
// srcList: [require("../../assets/tpt/三号线生料配电室.png")],
// };
// } else if (name == "辅料处理配电室") { // } else if (name == "辅料处理配电室") {
// this.arr[0] = { // this.url = require("../../assets/tpt/辅料处理配电室.png")
// url: require("../../assets/tpt/辅料处理配电室.png"),
// srcList: [require("../../assets/tpt/辅料处理配电室.png")],
// };
// } else if (name == "原料配料配电室") { // } else if (name == "原料配料配电室") {
// this.arr[0] = { // this.url =require("../../assets/tpt/原料配料配电室.png")
// url: require("../../assets/tpt/原料配料配电室.png"),
// srcList: [require("../../assets/tpt/原料配料配电室.png")],
// };
// } else if (name == "石灰石破碎配电室") { // } else if (name == "石灰石破碎配电室") {
// this.arr[0] = { // this.url = require("../../assets/tpt/石灰石破碎配电室.png")
// url: require("../../assets/tpt/石灰石破碎配电室.png"),
// srcList: [require("../../assets/tpt/石灰石破碎配电室.png")],
// };
// } else if (name == "石灰石输送控制室1、2") { // } else if (name == "石灰石输送控制室1、2") {
// this.arr[0] = { // this.url =require("../../assets/tpt/石灰石输送控制室1、2.png")
// url: require("../../assets/tpt/石灰石输送控制室1、2.png"),
// srcList: [require("../../assets/tpt/石灰石输送控制室1、2.png")],
// };
// } // }
}, },
openImage() {
this.$refs.tpt.open();
},
dldy() { dldy() {
var chartDom = document.getElementById("dldy"); var chartDom = document.getElementById("dldy");
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
@ -537,16 +442,13 @@ export default {
}, },
}, },
mounted() { mounted() {
this.initViewer();
this.dldy(); this.dldy();
this.ssfh(); this.ssfh();
}, },
beforeDestroy() { beforeDestroy() {
this.falg = false; this.falg = false;
if (this.viewer) {
this.viewer.destroy();
}
}, },
components: { tpt },
}; };
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@ -601,7 +503,6 @@ export default {
color: #00fcff; color: #00fcff;
} }
} }
.tpt { .tpt {
position: relative; position: relative;
margin-top: 56px; margin-top: 56px;
@ -649,7 +550,7 @@ export default {
width: 1155px; width: 1155px;
height: 500px; height: 500px;
margin-top: 50px; margin-top: 50px;
/deep/ .el-image { /deep/ img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -658,14 +559,11 @@ export default {
} }
} }
.bgt { .bgt {
// width: 1113px;
// height: 2055px;
width: 1525px; width: 1525px;
height: 480px; height: 480px;
position: absolute; position: absolute;
left: 45%; left: 45%;
top: 60%; top: 60%;
// border: 2px solid #20d6fe;
} }
.head { .head {
position: relative; position: relative;