|
@@ -0,0 +1,276 @@
|
|
|
+<template>
|
|
|
+ <div class="svg-map">
|
|
|
+ <svg
|
|
|
+ version="1.1"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
|
+ x="0px"
|
|
|
+ y="0px"
|
|
|
+ viewBox="0 0 1955 940"
|
|
|
+ :style="
|
|
|
+ 'enable-background: new 0 0 866 359; left: ' +
|
|
|
+ svgLeft +
|
|
|
+ '; top: ' +
|
|
|
+ svgTop +
|
|
|
+ ';'
|
|
|
+ "
|
|
|
+ xml:space="preserve"
|
|
|
+ :width="svgWidth"
|
|
|
+ :height="svgHeight"
|
|
|
+ >
|
|
|
+ <defs>
|
|
|
+ <g id="nx-map-line">
|
|
|
+ <line
|
|
|
+ class="nx-map-line"
|
|
|
+ x1="25"
|
|
|
+ y1="25"
|
|
|
+ x2="25"
|
|
|
+ y2="80"
|
|
|
+ stroke="#edbf03"
|
|
|
+ stroke-width="1"
|
|
|
+ />
|
|
|
+ <circle
|
|
|
+ class="nx-map-up-circle"
|
|
|
+ cx="25"
|
|
|
+ cy="25"
|
|
|
+ r="2"
|
|
|
+ fill="#edbf03"
|
|
|
+ />
|
|
|
+ </g>
|
|
|
+ <g id="nx-map-circle">
|
|
|
+ <circle
|
|
|
+ class="nx-map-down-circle-1"
|
|
|
+ cx="25"
|
|
|
+ cy="80"
|
|
|
+ r="3"
|
|
|
+ fill="#edbf03"
|
|
|
+ />
|
|
|
+ <circle
|
|
|
+ class="nx-map-down-circle-2"
|
|
|
+ :class="{ 'nx-map-down-circle-loop': c1 }"
|
|
|
+ cx="25"
|
|
|
+ cy="80"
|
|
|
+ r="9"
|
|
|
+ stroke="#edbf03"
|
|
|
+ stroke-width="1"
|
|
|
+ fill="none"
|
|
|
+ />
|
|
|
+ <circle
|
|
|
+ class="nx-map-down-circle-3"
|
|
|
+ :class="{ 'nx-map-down-circle-loop': c2 }"
|
|
|
+ cx="25"
|
|
|
+ cy="80"
|
|
|
+ r="16"
|
|
|
+ opacity="0.6"
|
|
|
+ stroke="#edbf03"
|
|
|
+ stroke-width="1"
|
|
|
+ fill="none"
|
|
|
+ />
|
|
|
+ </g>
|
|
|
+ </defs>
|
|
|
+ <g>
|
|
|
+ <image
|
|
|
+ style="overflow: visible"
|
|
|
+ width="2050"
|
|
|
+ height="1220"
|
|
|
+ class="map-base"
|
|
|
+ xlink:href="./img/dmt_sy1.png"
|
|
|
+ transform="matrix(1 0 0 1 0 -100)"
|
|
|
+ ></image>
|
|
|
+ <g
|
|
|
+ :class="item.name != '升压站' ? 'item-label-hover' : ''"
|
|
|
+ v-for="(item, index) in dataList"
|
|
|
+ :key="index"
|
|
|
+ @click="handleClick(item.id, item.name)"
|
|
|
+ >
|
|
|
+ <image
|
|
|
+ v-if="item.name != '升压站'"
|
|
|
+ data-v-28794fe1=""
|
|
|
+ width="41"
|
|
|
+ height="34"
|
|
|
+ :x="Number(item.x) - 10"
|
|
|
+ :y="Number(item.y) + 10"
|
|
|
+ xlink:href="@/assets\png\sun.png"
|
|
|
+ class="pillar"
|
|
|
+ ></image>
|
|
|
+ <image
|
|
|
+ v-if="item.name == '升压站'"
|
|
|
+ data-v-28794fe1=""
|
|
|
+ width="75"
|
|
|
+ height="54"
|
|
|
+ :x="Number(item.x) + 20"
|
|
|
+ :y="Number(item.y) + 10"
|
|
|
+ xlink:href="@/assets/png/booster-station.png"
|
|
|
+ ></image>
|
|
|
+ <text
|
|
|
+ v-if="item.name != '升压站'"
|
|
|
+ class="mapKey"
|
|
|
+ :x="Number(item.x) - 10"
|
|
|
+ :y="Number(item.y) + 60"
|
|
|
+ fill="#ffffff"
|
|
|
+ font-size="14"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </text>
|
|
|
+ <text
|
|
|
+ v-else
|
|
|
+ class="mapKey"
|
|
|
+ :x="Number(item.x) + 60"
|
|
|
+ :y="Number(item.y) + 70"
|
|
|
+ fill="#ffffff"
|
|
|
+ font-size="14"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </text>
|
|
|
+ </g>
|
|
|
+ </g>
|
|
|
+ </svg>
|
|
|
+ <Wtllist ref="dialog" :showname="showname" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import Wtllist from "./zhenqudialog.vue";
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ windturbineList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ Wtllist,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dataList: [
|
|
|
+ {
|
|
|
+ name: "升压站",
|
|
|
+ x: "1760",
|
|
|
+ y: "360",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "N13方阵",
|
|
|
+ x: "1415",
|
|
|
+ y: "195",
|
|
|
+ type: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "N14方阵",
|
|
|
+ x: "1430",
|
|
|
+ y: "325",
|
|
|
+ type: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "N15方阵",
|
|
|
+ x: "1440",
|
|
|
+ y: "465",
|
|
|
+ type: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "N01方阵",
|
|
|
+ x: "1215",
|
|
|
+ y: "215",
|
|
|
+ type: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "N05方阵",
|
|
|
+ x: "1215",
|
|
|
+ y: "325",
|
|
|
+ type: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "N10方阵",
|
|
|
+ x: "1220",
|
|
|
+ y: "465",
|
|
|
+ type: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "N12方阵",
|
|
|
+ x: "1135",
|
|
|
+ y: "555",
|
|
|
+ type: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "N04方阵",
|
|
|
+ x: "1005",
|
|
|
+ y: "315",
|
|
|
+ type: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "N09方阵",
|
|
|
+ x: "995",
|
|
|
+ y: "455",
|
|
|
+ type: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "N03方阵",
|
|
|
+ x: "785",
|
|
|
+ y: "315",
|
|
|
+ type: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "N08方阵",
|
|
|
+ x: "765",
|
|
|
+ y: "455",
|
|
|
+ type: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "N02方阵",
|
|
|
+ x: "580",
|
|
|
+ y: "310",
|
|
|
+ type: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "N07方阵",
|
|
|
+ x: "545",
|
|
|
+ y: "455",
|
|
|
+ type: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "N11方阵",
|
|
|
+ x: "605",
|
|
|
+ y: "540",
|
|
|
+ type: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "N06方阵",
|
|
|
+ x: "325",
|
|
|
+ y: "450",
|
|
|
+ type: 3,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ list: [],
|
|
|
+ showname: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.getData();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getData() {
|
|
|
+ this.dataList.forEach((item) => {
|
|
|
+ this.windturbineList.forEach((i, num) => {
|
|
|
+ if (item.name == i.name) {
|
|
|
+ item["id"] = i.id;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleClick(id, name) {
|
|
|
+ this.showname = name;
|
|
|
+ this.$refs.dialog.openDialog(id);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.item-label-hover {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.isshow {
|
|
|
+ display: none;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+</style>
|