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

Merge branch 'master' of http://git.umayle.com:2023/liulonglong/shuinichang_

This commit is contained in:
unknown 2023-12-13 15:34:39 +08:00
parent 9940a8e20e 79d1df99e8
commit d282824afc
6 changed files with 118 additions and 186 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>

8
src/utils/pds.js
View File

@ -4,10 +4,11 @@ export let pdsJs = [
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发电机出线(安热线)",
@ -21,7 +22,7 @@ export let pdsJs = [
"6.3KV#3窑尾出线",
"6.3KV#3窑头出线",
"6.3KV#2水泥磨出线",
"6.3KV#2发电机出线"
"6.3KV#2发电机出线",
],
},
{
@ -68,7 +69,6 @@ export let pdsJs = [
"原材料变压器",
"1#后排风机",
"1#变压器",
"2#变压器",
"生料磨主电机",
"1#生料磨高温风机",
@ -270,7 +270,7 @@ export let pdsJs = [
"与窑头电力室联络电源",
"侧式悬臂堆料机电源",
"521FN05VF01离心通风机变频柜",
"照明电源",
"侧式悬臂堆料机备用柜",
"1#桥式取料机电源",

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

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

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

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

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

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