fd_dwgz_zhyw_nx/src/views/WindSite/pages/components/sy-map.vue

<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-label-hover" v-for="(item, index) in dataList" :key="index">
            <svg data-v-28794fe1="" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                :x="String(Number(item.x)-45)" :y="String(Number(item.y)-60)" width="150" height="150" viewBox="0 0 220 392" enable-background="new 0 0 220 392"
                xml:space="preserve" class="windmill">
                <image v-if="item.name != '升压站'" data-v-28794fe1="" width="147" height="345" x="58" y="78" xlink:href="@/assets\png\sun.png" class="pillar"></image>
                <!-- 运行 -->
                <!-- <image v-if="item.type === 2 || item.type === 3" data-v-28794fe1="" width="200" height="460" xlink:href="@/assets\png\sun.png" class="turnCircle"></image> -->
                <!-- 受累 -->
                <!-- <image v-if="item.type === 12 || item.type === 13" data-v-28794fe1="" width="200" height="460" xlink:href="@/assets\png\sun.png"></image> -->
                <!-- 限电 -->
                <!-- <image v-if="item.type === 4 || item.type === 5" data-v-28794fe1="" width="200" height="460" xlink:href="@/assets\png\sun.png" class="turnCircle-slow"></image> -->
                <!-- 离线 -->
                <!-- <image v-if="item.type === 10 || item.type === 11" data-v-28794fe1="" width="200" height="460" xlink:href="@/assets\png\sun.png"></image> -->
                <!-- 待机 -->
                <!-- <image v-if="item.type === 0 || item.type === 1" data-v-28794fe1="" width="200" height="460" xlink:href="@/assets\png\sun.png"></image> -->
                <!-- 故障 -->
                <!-- <image v-if="item.type === 6 || item.type === 7" data-v-28794fe1="" width="200" height="460" xlink:href="@/assets\png\sun.png"></image> -->
                <!-- 检修 -->
                <!-- <image v-if="item.type === 8 || item.type === 9" data-v-28794fe1="" width="200" height="460" xlink:href="@/assets\png\sun.png"></image> -->
                <!-- 升压站 -->
                <image v-if="item.name == '升压站'" data-v-28794fe1="" width="200" height="460" xlink:href="@/assets/png/booster-station.png"></image>
            </svg>
            <!-- <text class="mapKey" :x="Number(item.x)+25" :y="Number(item.y) + 90" fill="#ffffff" font-size="14">{{ item.name }}</text> -->
            <text v-if="item.name != '升压站'" class="mapKey" :x="Number(item.x)+25" :y="Number(item.y) + 90" fill="#ffffff" font-size="14">{{ item.name }}</text>
            <text v-else class="mapKey" :x="Number(item.x)+10" :y="Number(item.y) + 80" fill="#ffffff" font-size="14">{{ item.name }}</text>
            <g class="isshow" v-if="item.name != '升压站'">
                <rect :x="Number(item.x) + 55" :y="Number(item.y) + 20" width="50" height="25" stroke="#46C55A35" fill="#000000" opacity="0.8" />
                <!-- <text class="mapValue" :x="Number(item.x) + 60" :y="Number(item.y) + 40" fill="#ffffff" font-size="14">{{ item.fs }}m/s</text> -->
                <text class="mapValue" :x="Number(item.x) + 60" :y="Number(item.y) + 35" fill="#ffffff" font-size="14">{{ item.gl }}kw</text>
            </g>
            </g>
        </g>
        <!-- <g>
            <svg :x="-20" :y="770" data-v-28794fe1="" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="150" viewBox="0 0 220 392" enable-background="new 0 0 220 392" xml:space="preserve" class="windmill">
            <image data-v-28794fe1="" width="147" height="345" x="58" y="78" xlink:href="@/assets/map/fan/yz.png" class="pillar"></image>
            <image data-v-28794fe1="" width="200" height="460" xlink:href="@/assets/map/fan/yp_green.png"></image>
            </svg>
            <text :x="43" :y="920" fill="#ffffff" font-size="14"> 运行 </text>
            <svg :x="40" :y="770" data-v-28794fe1="" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="150" viewBox="0 0 220 392" enable-background="new 0 0 220 392" xml:space="preserve" class="windmill">
            <image data-v-28794fe1="" width="147" height="345" x="58" y="78" xlink:href="@/assets/map/fan/yz.png" class="pillar"></image>
            <image data-v-28794fe1="" width="200" height="460" xlink:href="@/assets/map/fan/yp_white.png"></image>
            </svg>
            <text :x="107" :y="920" fill="#ffffff" font-size="14"> 受累 </text>
            <svg :x="100" :y="770" data-v-28794fe1="" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="150" viewBox="0 0 220 392" enable-background="new 0 0 220 392" xml:space="preserve" class="windmill">
            <image data-v-28794fe1="" width="147" height="345" x="58" y="78" xlink:href="@/assets/map/fan/yz.png" class="pillar"></image>
            <image data-v-28794fe1="" width="200" height="460" xlink:href="@/assets/map/fan/yp_purple.png"></image>
            </svg>
            <text :x="165" :y="920" fill="#ffffff" font-size="14"> 限电 </text>
            <svg :x="160" :y="770" data-v-28794fe1="" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="150" viewBox="0 0 220 392" enable-background="new 0 0 220 392" xml:space="preserve" class="windmill">
            <image data-v-28794fe1="" width="147" height="345" x="58" y="78" xlink:href="@/assets/map/fan/yz.png" class="pillar"></image>
            <image data-v-28794fe1="" width="200" height="460" xlink:href="@/assets/map/fan/yp_black.png"></image>
            </svg>
            <text :x="229" :y="920" fill="#ffffff" font-size="14"> 离线 </text>
            <svg :x="220" :y="770" data-v-28794fe1="" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="150" viewBox="0 0 220 392" enable-background="new 0 0 220 392" xml:space="preserve" class="windmill">
            <image data-v-28794fe1="" width="147" height="345" x="58" y="78" xlink:href="@/assets/map/fan/yz.png" class="pillar"></image>
            <image data-v-28794fe1="" width="200" height="460" xlink:href="@/assets/map/fan/yp_blue.png"></image>
            </svg>
            <text :x="288" :y="920" fill="#ffffff" font-size="14"> 待机 </text>
            <svg :x="280" :y="770" data-v-28794fe1="" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="150" viewBox="0 0 220 392" enable-background="new 0 0 220 392" xml:space="preserve" class="windmill">
            <image data-v-28794fe1="" width="147" height="345" x="58" y="78" xlink:href="@/assets/map/fan/yz.png" class="pillar"></image>
            <image data-v-28794fe1="" width="200" height="460" xlink:href="@/assets/map/fan/yp_red.png"></image>
            </svg>
            <text :x="347" :y="920" fill="#ffffff" font-size="14"> 故障 </text>
            <svg :x="340" :y="770" data-v-28794fe1="" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="150" viewBox="0 0 220 392" enable-background="new 0 0 220 392" xml:space="preserve" class="windmill">
            <image data-v-28794fe1="" width="147" height="345" x="58" y="78" xlink:href="@/assets/map/fan/yz.png" class="pillar"></image>
            <image data-v-28794fe1="" width="200" height="460" xlink:href="@/assets/map/fan/yp_orange.png"></image>
            </svg>
            <text :x="410" :y="920" fill="#ffffff" font-size="14"> 检修 </text>
        </g> -->
            <!-- <g>
                <image style="overflow: visible" width="2050" height="1110" class="map-base"
                    xlink:href=""
                    transform="matrix(1 0 0 1 0 -50)"></image>
                <g class="item-label-hover" v-for="(item, index) in dataList" :key="index">
                    <image v-if="item.type === 0 || item.type === 1" width="70" height="70" class="pillar" :x="item.x"
                        :y="item.y" xlink:href="../../../../assets/map/fan/green.png"></image>
                    <image v-if="item.type === 2 || item.type === 3" width="70" height="70" class="pillar" :x="item.x"
                        :y="item.y" xlink:href="../../../../assets/map/fan/blue.png"></image>
                    <image v-if="item.type === 6 || item.type === 7" width="70" height="70" class="pillar" :x="item.x"
                        :y="item.y" xlink:href="../../../../assets/map/fan/red.png"></image>
                    <image v-if="item.type === 12 || item.type === 13" width="70" height="70" class="pillar" :x="item.x"
                        :y="item.y" xlink:href="../../../../assets/map/fan/white.png"></image>
                    <image v-if="item.type === 8 || item.type === 9" width="70" height="70" class="pillar" :x="item.x"
                        :y="item.y" xlink:href="../../../../assets/map/fan/orange.png"></image>
                    <image v-if="item.type === 4 || item.type === 5" width="70" height="70" class="pillar" :x="item.x"
                        :y="item.y" xlink:href="../../../../assets/map/fan/purple.png"></image>
                    <image v-if="item.type === 10 || item.type === 11" width="70" height="70" class="pillar" :x="item.x"
                        :y="item.y" xlink:href="../../../../assets/map/fan/black.png"></image>
                    <text class="mapKey" :x="Number(item.x) + 26" :y="Number(item.y) + 90" fill="#ffffff"
                        font-size="14">
                        {{ item.name }}
                    </text>
                    <g class="isshow">
                        <rect :x="Number(item.x) + 55" :y="Number(item.y) + 20" width="70" height="50"
                            stroke="#46C55A35" fill="#000000" opacity="0.8" />
                        <text class="mapValue" :x="Number(item.x) + 60" :y="Number(item.y) + 40" fill="#ffffff"
                            font-size="14">{{ item.fs }}
                            m/s</text>
                        <text class="mapValue" :x="Number(item.x) + 60" :y="Number(item.y) + 60" fill="#ffffff"
                            font-size="14">{{ item.gl }}
                            kw</text>
                    </g>
                </g>
            </g> -->
        </svg>
    </div>
</template>
<script>
export default {
    props: {
        windturbineList: {
            type: Array,
            default: [],
        },
    },
    data() {
        return {
            dataList: [
                {
                    name: '升压站',
                    x: '1760',
                    y: '360',
                },
     {
     name: '#13',
     x: '1415',
     y: '195',
     type: 3,
},
{
     name: '#14',
     x: '1430',
     y: '325',
     type: 3,
},
{
     name: '#15',
     x: '1440',
     y: '465',
     type: 3,
},
{
     name: '#01',
     x: '1215',
     y: '215',
     type: 3,
},
{
     name: '#05',
     x: '1215',
     y: '325',
     type: 3,
},
{
     name: '#10',
     x: '1220',
     y: '465',
     type: 3,
},
{
     name: '#12',
     x: '1135',
     y: '555',
     type: 3,
},
{
     name: '#04',
     x: '1005',
     y: '315',
     type: 3,
},
{
     name: '#09',
     x: '995',
     y: '455',
     type: 3,
},
{
     name: '#03',
     x: '785',
     y: '315',
     type: 3,
},
{
     name: '#08',
     x: '765',
     y: '455',
     type: 3,
},
{
     name: '#02',
     x: '580',
     y: '310',
     type: 3,
},
{
     name: '#07',
     x: '545',
     y: '455',
     type: 3,
},
{
     name: '#11',
     x: '605',
     y: '540',
     type: 3,
},
{
     name: '#06',
     x: '325',
     y: '450',
     type: 3,
},

            ],
        };
    },
    mounted() {

    },
    methods: {
        dayaDeal(windturbineList) {
            windturbineList.push({
                fs: '',
                gl: '',
                wtCode: '升压站',
            })
            this.dataList.forEach(item => {
                let data = windturbineList.find(val => val.wtCode === item.name)
                item.type = data.fjzt
                item.fs = data.fs
                item.gl = data.gl
            })
        },
    },
}
</script>
<style lang="less" scoped>
.item-label-hover:hover .isshow {
    display: flex;
}

.isshow {
    display: none;
    color: #ffffff;
}
</style>