fd_dwgz_zhyw/src/views/Home/components/map/SX.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 866 359"
      xml:space="preserve"
      :width="svgWidth"
      :height="svgHeight"
    >
      <defs>
        <g id="nx-map-line">
          <line
            class="nx-map-line"
            x1="25"
            y1="35"
            x2="25"
            y2="55"
            stroke="#edbf03"
            stroke-width="1"
          />
          <circle
            class="nx-map-up-circle"
            cx="25"
            cy="35"
            r="2"
            fill="#edbf03"
          />
        </g>
        <g id="nx-map-line1">
          <line
            class="nx-map-line"
            x1="25"
            y1="35"
            x2="25"
            y2="45"
            stroke="#edbf03"
            stroke-width="1"
          />
          <circle
            class="nx-map-up-circle"
            cx="25"
            cy="35"
            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
          v-if="$store.state.themeName === 'dark'"
          style="overflow: visible"
          width="400"
          height="330"
          class="map-base"
          xlink:href="./map_sx_h.png"
          transform="matrix(1 0 0 1 180 0)"
        ></image>
        <image
          v-if="$store.state.themeName === 'light'"
          style="overflow: visible"
          width="400"
          height="330"
          class="map-base"
          xlink:href="./map_sx_b.png"
          transform="matrix(1 0 0 1 180 0)"
        ></image>
        <g>
          <g
            class="item-label-hover"
            v-if="
              showType === 'all' ||
              showType === 'fc' ||
              companyid == 'SXJ_KGDL_FLFD_ZGS0'
            "
          >
            <svg
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              x="415"
              y="-15"
              width="45"
              height="45"
              viewBox="0 0 220 392"
              enable-background="new 0 0 220 392"
              xml:space="preserve"
              class="windmill"
            >
              <image
                width="47"
                height="345"
                class="pillar"
                x="68"
                y="50"
                xlink:href="./pillars.png"
              ></image>
              <image
                width="200"
                height="165"
                class="fan"
                xlink:href="./fl_blue.png"
              ></image>
            </svg>
            <g
              :class="
                $store.state.themeName === 'light' ? 'isshow-light' : 'isshow'
              "
            >
              <rect
                x="441"
                y="-8"
                width="82"
                height="24"
                stroke="#46C55A35"
                fill="#000000"
                opacity="0.8"
              />
              <text
                class="mapKey"
                x="444"
                y="0"
                fill="#919697"
                font-size="8"
                @click.stop="
                  clickLabel(
                    'SXJ_KGDL_XWT_FDC_STA',
                    '13风电场',
                    penetrateType
                  )
                "
              >
                13风电场
              </text>
              <text
                x="492"
                y="0"
                fill="#05bb4c"
                font-size="8"
                @click.stop="
                  clickLabel(
                    'SXJ_KGDL_XWT_FDC_STA',
                    '13风电场',
                    penetrateType
                  )
                "
              >
                {{ sourceMap?.station?.SXJ_KGDL_XWT_FDC_STA?.zjts }}
              </text>
              <text
                class="mapKey"
                x="508"
                y="0"
                fill="#919697"
                font-size="8"
                @click.stop="
                  clickLabel(
                    'SXJ_KGDL_XWT_FDC_STA',
                    '13风电场',
                    penetrateType
                  )
                "
              >
                台
              </text>
              <text
                class="mapKey"
                x="444"
                y="12"
                fill="#919697"
                font-size="8"
                @click.stop="
                  clickLabel(
                    'SXJ_KGDL_DJY_FDC_STA',
                    '风电场2',
                    penetrateType
                  )
                "
              >
                风电场2
              </text>
              <text
                x="492"
                y="12"
                fill="#05bb4c"
                font-size="8"
                @click.stop="
                  clickLabel(
                    'SXJ_KGDL_DJY_FDC_STA',
                    '风电场2',
                    penetrateType
                  )
                "
              >
                {{ sourceMap?.station?.SXJ_KGDL_DJY_FDC_STA?.zjts }}
              </text>
              <text
                x="508"
                y="12"
                fill="#919697"
                font-size="8"
                @click.stop="
                  clickLabel(
                    'SXJ_KGDL_DJY_FDC_STA',
                    '风电场2',
                    penetrateType
                  )
                "
              >
                台
              </text>
            </g>
          </g>
          <g
            class="item-label-hover"
            v-if="
              showType === 'all' ||
              showType === 'fc' ||
              companyid == 'SXJ_KGDL_FLFD_ZGS0'
            "
          >
            <svg
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              x="368"
              y="45"
              width="45"
              height="45"
              viewBox="0 0 220 392"
              enable-background="new 0 0 220 392"
              xml:space="preserve"
              class="windmill"
            >
              <image
                width="47"
                height="345"
                class="pillar"
                x="68"
                y="50"
                xlink:href="./pillars.png"
              ></image>
              <image
                v-if="
                  sourceMap.YF_FDC_fczt === 3 && sourceMap.DJY_FDC_fczt === 3
                "
                width="200"
                height="165"
                xlink:href="./fl_white.png"
                transform="matrix(1 0 0 1 -20 40)"
              ></image>
              <image
                v-else
                width="200"
                height="165"
                class="fan"
                xlink:href="./fl_blue.png"
              ></image>
            </svg>
            <g
              :class="
                $store.state.themeName === 'light' ? 'isshow-light' : 'isshow'
              "
            >
              <rect
                x="310"
                y="64"
                width="75"
                height="15"
                stroke="#46C55A35"
                fill="#000000"
                opacity="0.8"
              />
              <g
                @click.stop="
                  clickLabel(
                    'SXJ_KGDL_NJL_FDC_STA',
                    '风电场3',
                    penetrateType
                  )
                "
              >
                <text
                  class="mapKey"
                  x="314"
                  y="75"
                  fill="#919697"
                  font-size="8"
                >
                  风电场3
                </text>
                <text x="352" y="75" fill="#05bb4c" font-size="8">
                  {{ sourceMap?.station?.SXJ_KGDL_NJL_FDC_STA?.zjts }}
                </text>
                <text x="372" y="75" fill="#919697" font-size="8">台</text>
              </g>
            </g>
          </g>
          <g
            class="item-label-hover"
            v-if="
              showType === 'all' ||
              showType === 'fc' ||
              companyid == 'SXJ_KGDL_FLFD_ZGS0'
            "
          >
            <svg
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              x="380"
              y="9"
              width="45"
              height="45"
              viewBox="0 0 220 392"
              enable-background="new 0 0 220 392"
              xml:space="preserve"
              class="windmill"
            >
              <image
                width="47"
                height="345"
                class="pillar"
                x="68"
                y="50"
                xlink:href="./pillars.png"
              ></image>
              <image
                v-if="
                  sourceMap.BHB_FDC_fczt === 3 && sourceMap.BHB3_FDC_fczt === 3
                "
                width="200"
                height="165"
                xlink:href="./fl_white.png"
                transform="matrix(1 0 0 1 -20 40)"
              ></image>
              <image
                v-else
                width="200"
                height="165"
                class="fan"
                xlink:href="./fl_blue.png"
              ></image>
            </svg>
            <g
              :class="
                $store.state.themeName === 'light' ? 'isshow-light' : 'isshow'
              "
            >
              <rect
                x="295"
                y="-6"
                width="100"
                height="36"
                stroke="#46C55A35"
                fill="#000000"
                opacity="0.8"
              />
              <g
                @click.stop="
                  clickLabel('SXJ_KGDL_YF_FDC_STA', '风电场4', penetrateType)
                "
              >
                <text class="mapKey" x="299" y="3" fill="#919697" font-size="8">
                  风电场4
                </text>
                <text x="355" y="3" fill="#05bb4c" font-size="8">
                  {{ sourceMap?.station?.SXJ_KGDL_YF_FDC_STA?.zjts }}
                </text>
                <text x="385" y="3" fill="#919697" font-size="8">台</text>
              </g>
              <g
                @click.stop="
                  clickLabel(
                    'SXJ_KGDL_BHB_FDC_STA',
                    '风电场5',
                    penetrateType
                  )
                "
              >
                <text
                  class="mapKey"
                  x="299"
                  y="14"
                  fill="#919697"
                  font-size="8"
                >
                  风电场5
                </text>
                <text x="360" y="14" fill="#05bb4c" font-size="8">
                  {{ sourceMap?.station?.SXJ_KGDL_BHB_FDC_STA?.zjts }}
                </text>
                <text x="385" y="14" fill="#919697" font-size="8">台</text>
              </g>
              <g
                @click.stop="
                  clickLabel(
                    'SXJ_KGDL_BHB3_FDC_STA',
                    '风电场6',
                    penetrateType
                  )
                "
              >
                <text
                  class="mapKey"
                  x="299"
                  y="26"
                  fill="#919697"
                  font-size="8"
                >
                  风电场6
                </text>
                <text x="368" y="26" fill="#05bb4c" font-size="8">
                  {{ sourceMap?.station?.SXJ_KGDL_BHB3_FDC_STA?.zjts }}
                </text>
                <text x="385" y="26" fill="#919697" font-size="8">台</text>
              </g>
            </g>
          </g>
          <g
            class="item-label-hover"
            v-if="
              showType === 'all' ||
              showType === 'fc' ||
              companyid == 'SXJ_KGDL_FLFD_ZGS0'
            "
          >
            <svg
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              x="390"
              y="110"
              width="45"
              height="45"
              viewBox="0 0 220 392"
              enable-background="new 0 0 220 392"
              xml:space="preserve"
              class="windmill"
            >
              <image
                width="47"
                height="345"
                class="pillar"
                x="68"
                y="50"
                xlink:href="./pillars.png"
              ></image>
              <image
                v-if="
                  sourceMap.PTZ_FDC_fczt === 3 &&
                  sourceMap.YTY_FDC_fczt === 3 &&
                  sourceMap.YTY_FDC_fczt === 3
                "
                width="200"
                height="165"
                xlink:href="./fl_white.png"
                transform="matrix(1 0 0 1 -20 40)"
              ></image>
              <image
                v-else
                width="200"
                height="165"
                class="fan"
                xlink:href="./fl_blue.png"
              ></image>
            </svg>
            <g
              :class="
                $store.state.themeName === 'light' ? 'isshow-light' : 'isshow'
              "
            >
              <rect
                x="420"
                y="110"
                width="80"
                height="46"
                stroke="#46C55A35"
                fill="#000000"
                opacity="0.8"
              />
              <text
                class="mapKey"
                x="423"
                y="135"
                fill="#919697"
                font-size="8"
                @click.stop="
                  clickLabel(
                    'SXJ_KGDL_PTZ_FDC_STA',
                    '风电场7',
                    penetrateType
                  )
                "
              >
                风电场7
              </text>
              <text
                x="468"
                y="135"
                fill="#05bb4c"
                font-size="8"
                @click.stop="
                  clickLabel(
                    'SXJ_KGDL_PTZ_FDC_STA',
                    '风电场7',
                    penetrateType
                  )
                "
              >
                {{ sourceMap?.station?.SXJ_KGDL_PTZ_FDC_STA?.zjts }}
              </text>
              <text
                x="485"
                y="135"
                fill="#919697"
                font-size="8"
                @click.stop="
                  clickLabel(
                    'SXJ_KGDL_PTZ_FDC_STA',
                    '风电场7',
                    penetrateType
                  )
                "
              >
                台
              </text>
              <text
                class="mapKey"
                x="423"
                y="120"
                fill="#919697"
                font-size="8"
                @click.stop="
                  clickLabel(
                    'SXJ_KGDL_YTY_FDC_STA',
                    '风电场8',
                    penetrateType
                  )
                "
              >
                风电场8
              </text>
              <text
                x="468"
                y="120"
                fill="#05bb4c"
                font-size="8"
                @click.stop="
                  clickLabel(
                    'SXJ_KGDL_YTY_FDC_STA',
                    '风电场8',
                    penetrateType
                  )
                "
              >
                {{ sourceMap?.station?.SXJ_KGDL_YTY_FDC_STA?.zjts }}
              </text>
              <text
                x="485"
                y="120"
                fill="#919697"
                font-size="8"
                @click.stop="
                  clickLabel(
                    'SXJ_KGDL_YTY_FDC_STA',
                    '风电场8',
                    penetrateType
                  )
                "
              >
                台
              </text>
              <text
                class="mapKey"
                x="423"
                y="150"
                fill="#919697"
                font-size="8"
                @click.stop="
                  clickLabel(
                    'SXJ_KGDL_YLZ_FDC_STA',
                    '风电场9',
                    penetrateType
                  )
                "
              >
                风电场9
              </text>
              <text
                x="468"
                y="150"
                fill="#05bb4c"
                font-size="8"
                @click.stop="
                  clickLabel(
                    'SXJ_KGDL_YLZ_FDC_STA',
                    '风电场9',
                    penetrateType
                  )
                "
              >
                {{ sourceMap?.station?.SXJ_KGDL_YLZ_FDC_STA?.zjts }}
              </text>
              <text
                x="485"
                y="150"
                fill="#919697"
                font-size="8"
                @click.stop="
                  clickLabel(
                    'SXJ_KGDL_YLZ_FDC_STA',
                    '风电场9',
                    penetrateType
                  )
                "
              >
                台
              </text>
            </g>
          </g>

          <g
            class="item-label-hover"
            v-if="
              showType === 'all' ||
              showType === 'fc' ||
              companyid == 'SXJ_KGDL_FLFD_ZGS0'
            "
            @click.stop="
              clickLabel('SXJ_KGDL_ZK_FDC_STA', '风电场10', penetrateType)
            "
          >
            <svg
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              x="365"
              y="115"
              width="45"
              height="45"
              viewBox="0 0 220 392"
              enable-background="new 0 0 220 392"
              xml:space="preserve"
              class="windmill"
            >
              <image
                width="47"
                height="345"
                class="pillar"
                x="68"
                y="50"
                xlink:href="./pillars.png"
              ></image>
              <image
                v-if="
                  sourceMap.PTZ_FDC_fczt === 3 &&
                  sourceMap.YTY_FDC_fczt === 3 &&
                  sourceMap.YTY_FDC_fczt === 3
                "
                width="200"
                height="165"
                xlink:href="./fl_white.png"
                transform="matrix(1 0 0 1 -20 40)"
              ></image>
              <image
                v-else
                width="200"
                height="165"
                class="fan"
                xlink:href="./fl_blue.png"
              ></image>
            </svg>
            <g
              :class="
                $store.state.themeName === 'light' ? 'isshow-light' : 'isshow'
              "
            >
              <rect
                x="310"
                y="130"
                width="80"
                height="12"
                stroke="#46C55A35"
                fill="#000000"
                opacity="0.8"
              />
              <text class="mapKey" x="313" y="139" fill="#919697" font-size="8">
                风电场10
              </text>
              <text x="355" y="139" fill="#05bb4c" font-size="8">
                {{ sourceMap?.station?.SXJ_KGDL_ZK_FDC_STA?.zjts }}
              </text>
              <text x="375" y="139" fill="#919697" font-size="8">台</text>
            </g>
          </g>
          <g
            class="item-label-hover"
            v-if="
              showType === 'all' ||
              showType === 'gf' ||
              companyid == 'SXJ_KGDL_GFFD_ZGS0'
            "
            @click.stop="
              clickLabel('SXJ_KGDL_TZ_GDC_STA', '光伏电站1', penetrateType)
            "
          >
            <image
              width="20"
              v-if="sourceMap.TZ_GDC_fczt === 3"
              height="20"
              x="495"
              y="10"
              xlink:href="./fow_white.png"
            ></image>
            <image
              width="20"
              v-else
              height="20"
              x="495"
              y="10"
              xlink:href="./fow_blue.png"
            ></image>
            <g
              :class="
                $store.state.themeName === 'light' ? 'isshow-light' : 'isshow'
              "
            >
              <rect
                x="460"
                y="0"
                width="160"
                height="12"
                stroke="#46C55A35"
                fill="#000000"
                opacity="0.8"
              />
              <text class="mapKey" x="463" y="9" fill="#919697" font-size="8">
                光伏电站1 集中式：
              </text>
              <text x="528" y="9" fill="#05bb4c" font-size="8">
                {{ sourceMap?.station?.SXJ_KGDL_TZ_GDC_STA?.jzzjts }}
              </text>
              <text x="545" y="9" fill="#919697" font-size="8">
                台 组串式：
              </text>
              <text x="585" y="9" fill="#05bb4c" font-size="8">
                {{ sourceMap?.station?.SXJ_KGDL_TZ_GDC_STA?.zczjts }}
              </text>
              <text x="600" y="9" fill="#919697" font-size="8">台</text>
            </g>
          </g>

          <g
            class="item-label-hover"
            v-if="
              showType === 'all' ||
              showType === 'gf' ||
              companyid == 'SXJ_KGDL_GFFD_ZGS0'
            "
            @click.stop="
              clickLabel('SXJ_KGDL_SY_GDC_STA', '光伏电站2', penetrateType)
            "
          >
            <image
              width="20"
              v-if="sourceMap.SY_GDC_fczt === 3"
              height="20"
              x="435"
              y="60"
              xlink:href="./fow_white.png"
            ></image>
            <image
              width="20"
              v-else
              height="20"
              x="435"
              y="60"
              xlink:href="./fow_blue.png"
            ></image>
            <g
              :class="
                $store.state.themeName === 'light' ? 'isshow-light' : 'isshow'
              "
            >
              <rect
                x="455"
                y="62"
                width="160"
                height="12"
                stroke="#46C55A35"
                fill="#000000"
                opacity="0.8"
              />
              <text class="mapKey" x="458" y="71" fill="#919697" font-size="8">
                光伏电站2 集中式:
              </text>
              <text x="520" y="71" fill="#05bb4c" font-size="8">
                {{ sourceMap?.station?.SXJ_KGDL_SY_GDC_STA?.jzzjts }}
              </text>
              <text x="540" y="71" fill="#919697" font-size="8">
                台 组串式:
              </text>
              <text x="580" y="71" fill="#05bb4c" font-size="8">
                {{ sourceMap?.station?.SXJ_KGDL_SY_GDC_STA?.zczjts }}
              </text>
              <text x="600" y="71" fill="#919697" font-size="8">台</text>
            </g>
          </g>

          <g
            class="item-label-hover"
            v-if="
              showType === 'all' ||
              showType === 'gf' ||
              companyid == 'SXJ_KGDL_GFFD_ZGS0'
            "
            @click.stop="
              clickLabel('SXJ_KGDL_HR_GDC_STA', '光伏电站3', penetrateType)
            "
          >
            <image
              width="20"
              v-if="sourceMap.HR_GDC_fczt === 3"
              height="20"
              x="455"
              y="25"
              xlink:href="./fow_white.png"
            ></image>
            <image
              width="20"
              v-else
              height="20"
              x="455"
              y="25"
              xlink:href="./fow_blue.png"
            ></image>
            <g
              :class="
                $store.state.themeName === 'light' ? 'isshow-light' : 'isshow'
              "
            >
              <rect
                x="475"
                y="27"
                width="110"
                height="12"
                stroke="#46C55A35"
                fill="#000000"
                opacity="0.8"
              />
              <text class="mapKey" x="478" y="36" fill="#919697" font-size="8">
                光伏电站3 组串式：
              </text>
              <text x="545" y="36" fill="#05bb4c" font-size="8">
                {{ sourceMap?.station?.SXJ_KGDL_HR_GDC_STA?.zczjts }}
              </text>
              <text x="565" y="36" fill="#919697" font-size="8">台</text>
            </g>
          </g>

          <g
            class="item-label-hover"
            v-if="
              showType === 'all' ||
              showType === 'gf' ||
              companyid == 'SXJ_KGDL_GFFD_ZGS0'
            "
            @click.stop="
              clickLabel('SXJ_KGDL_YG_GDC_STA', '光伏电站4', penetrateType)
            "
          >
            <image
              width="20"
              v-if="sourceMap.YG_GDC_fczt === 3"
              height="20"
              x="476"
              y="35"
              xlink:href="./fow_white.png"
            ></image>
            <image
              width="20"
              v-else
              height="20"
              x="476"
              y="35"
              xlink:href="./fow_blue.png"
            ></image>
            <g
              :class="
                $store.state.themeName === 'light' ? 'isshow-light' : 'isshow'
              "
            >
              <rect
                x="455"
                y="45"
                width="160"
                height="12"
                stroke="#46C55A35"
                fill="#000000"
                opacity="0.8"
              />
              <text class="mapKey" x="458" y="54" fill="#919697" font-size="8">
                光伏电站4 集中式：
              </text>
              <text x="529" y="54" fill="#05bb4c" font-size="8">
                {{ sourceMap?.station?.SXJ_KGDL_YG_GDC_STA?.jzzjts }}
              </text>
              <text x="545" y="54" fill="#919697" font-size="8">
                台 组串式：
              </text>
              <text x="585" y="54" fill="#05bb4c" font-size="8">
                {{ sourceMap?.station?.SXJ_KGDL_YG_GDC_STA?.zczjts }}
              </text>
              <text x="605" y="54" fill="#919697" font-size="8">台</text>
            </g>
          </g>

          <g
            class="item-label-hover"
            v-if="
              showType === 'all' ||
              showType === 'gf' ||
              companyid == 'SXJ_KGDL_GFFD_ZGS0'
            "
            @click.stop="
              clickLabel('SXJ_KGDL_YX_GDC_STA', '光伏电站5', penetrateType)
            "
          >
            <image
              width="20"
              v-if="sourceMap.YX_GDC_fczt === 3"
              height="20"
              x="435"
              y="45"
              xlink:href="./fow_white.png"
            ></image>
            <image
              width="20"
              v-else
              height="20"
              x="435"
              y="45"
              xlink:href="./fow_blue.png"
            ></image>
            <g
              :class="
                $store.state.themeName === 'light' ? 'isshow-light' : 'isshow'
              "
            >
              <rect
                x="452"
                y="51"
                width="110"
                height="12"
                stroke="#46C55A35"
                fill="#000000"
                opacity="0.8"
              />
              <text class="mapKey" x="455" y="60" fill="#919697" font-size="8">
                光伏电站5 集中式：
              </text>
              <text x="520" y="60" fill="#05bb4c" font-size="8">
                {{ sourceMap?.station?.SXJ_KGDL_YX_GDC_STA?.jzzjts }}
              </text>
              <text x="540" y="60" fill="#919697" font-size="8">台</text>
            </g>
          </g>

          <g
            class="item-label-hover"
            v-if="
              showType === 'all' ||
              showType === 'gf' ||
              companyid == 'SXJ_KGDL_GFFD_ZGS0'
            "
            @click.stop="
              clickLabel('SXJ_KGDL_YY_GDC_STA', '光伏电站6', penetrateType)
            "
          >
            <image
              width="20"
              v-if="sourceMap.YY_GDC_fczt === 3"
              height="20"
              x="435"
              y="20"
              xlink:href="./fow_white.png"
            ></image>
            <image
              width="20"
              v-else
              height="20"
              x="435"
              y="20"
              xlink:href="./fow_blue.png"
            ></image>
            <g
              :class="
                $store.state.themeName === 'light' ? 'isshow-light' : 'isshow'
              "
            >
              <rect
                x="440"
                y="10"
                width="160"
                height="12"
                stroke="#46C55A35"
                fill="#000000"
                opacity="0.8"
              />
              <text class="mapKey" x="443" y="19" fill="#919697" font-size="8">
                光伏电站6 集中式：
              </text>
              <text x="510" y="19" fill="#05bb4c" font-size="8">
                {{ sourceMap?.station?.SXJ_KGDL_YY_GDC_STA?.jzzjts }}
              </text>
              <text x="530" y="19" fill="#919697" font-size="8">
                台 组串式：
              </text>
              <text x="570" y="19" fill="#05bb4c" font-size="8">
                {{ sourceMap?.station?.SXJ_KGDL_YY_GDC_STA?.zczjts }}
              </text>
              <text x="590" y="19" fill="#919697" font-size="8">台</text>
            </g>
          </g>

          <g
            class="item-label-hover"
            v-if="
              showType === 'all' ||
              showType === 'gf' ||
              companyid == 'SXJ_KGDL_GFFD_ZGS0'
            "
            @click.stop="
              clickLabel('SXJ_KGDL_JR_GDC_STA', '光伏电站7', penetrateType)
            "
          >
            <image
              width="20"
              v-if="sourceMap.JR_GDC_fczt === 3"
              height="20"
              x="445"
              y="80"
              xlink:href="./fow_white.png"
            ></image>
            <image
              width="20"
              v-else
              height="20"
              x="445"
              y="80"
              xlink:href="./fow_blue.png"
            ></image>
            <g
              :class="
                $store.state.themeName === 'light' ? 'isshow-light' : 'isshow'
              "
            >
              <rect
                x="462"
                y="82"
                width="110"
                height="12"
                stroke="#46C55A35"
                fill="#000000"
                opacity="0.8"
              />
              <text class="mapKey" x="465" y="91" fill="#919697" font-size="8">
                光伏电站7 组串式：
              </text>
              <text x="530" y="91" fill="#05bb4c" font-size="8">
                {{ sourceMap?.station?.SXJ_KGDL_JR_GDC_STA?.zczjts }}
              </text>
              <text x="545" y="91" fill="#919697" font-size="8">台</text>
            </g>
          </g>

          <g
            class="item-label-hover"
            v-if="
              showType === 'all' ||
              showType === 'gf' ||
              companyid == 'SXJ_KGDL_GFFD_ZGS0'
            "
            @click.stop="
              clickLabel('SXJ_KGDL_TL_GDC_STA', '光伏电站8', penetrateType)
            "
          >
            <image
              v-if="sourceMap.TL_GDC_fczt === 3"
              width="20"
              height="20"
              x="375"
              y="230"
              xlink:href="./fow_white.png"
            ></image>
            <image
              v-else
              width="20"
              height="20"
              x="375"
              y="230"
              xlink:href="./fow_blue.png"
            ></image>
            <g
              :class="
                $store.state.themeName === 'light' ? 'isshow-light' : 'isshow'
              "
            >
              <rect
                x="394"
                y="233"
                width="110"
                height="12"
                stroke="#46C55A35"
                fill="#000000"
                opacity="0.8"
              />
              <text class="mapKey" x="398" y="242" fill="#919697" font-size="8">
                光伏电站8 组串式：
              </text>
              <text x="460" y="242" fill="#05bb4c" font-size="8">
                {{ sourceMap?.station?.SXJ_KGDL_TL_GDC_STA?.zczjts }}
              </text>
              <text x="485" y="242" fill="#919697" font-size="8">台</text>
            </g>
          </g>

          <g
            class="item-label-hover"
            v-if="
              showType === 'all' ||
              showType === 'gf' ||
              companyid == 'SXJ_KGDL_GFFD_ZGS0'
            "
            @click.stop="
              clickLabel('SXJ_KGDL_FS_GDC_STA', '光伏电站9', penetrateType)
            "
          >
            <image
              v-if="sourceMap.FS_GDC_fczt === 3"
              width="20"
              height="20"
              x="315"
              y="115"
              xlink:href="./fow_white.png"
            ></image>
            <image
              v-else
              width="20"
              height="20"
              x="315"
              y="115"
              xlink:href="./fow_blue.png"
            ></image>
            <g
              :class="
                $store.state.themeName === 'light' ? 'isshow-light' : 'isshow'
              "
            >
              <rect
                x="245"
                y="117"
                width="110"
                height="12"
                stroke="#46C55A35"
                fill="#000000"
                opacity="0.8"
              />
              <text class="mapKey" x="247" y="126" fill="#919697" font-size="8">
                光伏电站9 集中式：
              </text>
              <text x="320" y="126" fill="#05bb4c" font-size="8">
                {{ sourceMap?.station?.SXJ_KGDL_FS_GDC_STA?.jzzjts }}
              </text>
              <text x="340" y="126" fill="#919697" font-size="8">台</text>
            </g>
          </g>

          <g
            class="item-label-hover"
            v-if="
              showType === 'all' ||
              showType === 'gf' ||
              companyid == 'SXJ_KGDL_GFFD_ZGS0'
            "
            @click.stop="
              clickLabel('SXJ_KGDL_PL_GDC_STA', '光伏电站10', penetrateType)
            "
          >
            <image
              v-if="sourceMap.PL_GDC_fczt === 3"
              width="20"
              height="20"
              x="365"
              y="40"
              xlink:href="./fow_white.png"
            ></image>
            <image
              v-else
              width="20"
              height="20"
              x="365"
              y="40"
              xlink:href="./fow_blue.png"
            ></image>
            <g
              :class="
                $store.state.themeName === 'light' ? 'isshow-light' : 'isshow'
              "
            >
              <rect
                x="255"
                y="38"
                width="110"
                height="12"
                stroke="#46C55A35"
                fill="#000000"
                opacity="0.8"
              />
              <text class="mapKey" x="258" y="47" fill="#919697" font-size="8">
                光伏电站10 集中式：
              </text>
              <text x="325" y="47" fill="#05bb4c" font-size="8">
                {{ sourceMap?.station?.SXJ_KGDL_PL_GDC_STA?.jzzjts }}
              </text>
              <text x="345" y="47" fill="#919697" font-size="8">台</text>
            </g>
          </g>
          <g
            class="item-label-hover"
            v-if="
              showType === 'all' ||
              showType === 'fc' ||
              companyid == 'SXJ_KGDL_FLFD_ZGS0'
            "
          >
            <svg
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              x="375"
              y="40"
              width="45"
              height="45"
              viewBox="0 0 220 392"
              enable-background="new 0 0 220 392"
              xml:space="preserve"
              class="windmill"
            >
              <image
                width="47"
                height="345"
                class="pillar"
                x="68"
                y="50"
                xlink:href="./pillars.png"
              ></image>
              <image
                v-if="
                  sourceMap.GJY_FDC_fczt === 3 &&
                  sourceMap.HSM_FDC_fczt === 3 &&
                  sourceMap.NJL_FDC_fczt === 3
                "
                width="200"
                height="165"
                xlink:href="./fl_white.png"
                transform="matrix(1 0 0 1 -20 40)"
              ></image>
              <image
                v-else
                width="200"
                height="165"
                class="fan"
                xlink:href="./fl_blue.png"
              ></image>
            </svg>
            <g
              :class="
                $store.state.themeName === 'light' ? 'isshow-light' : 'isshow'
              "
            >
              <g>
                <rect
                  x="310"
                  y="48"
                  width="80"
                  height="25"
                  stroke="#46C55A35"
                  fill="#000000"
                  opacity="0.8"
                />
                <g
                  @click.stop="
                    clickLabel(
                      'SXJ_KGDL_GJY_FDC_STA',
                      '风电场11',
                      penetrateType
                    )
                  "
                >
                  <text
                    class="mapKey"
                    x="314"
                    y="57"
                    fill="#919697"
                    font-size="8"
                  >
                    风电场11
                  </text>
                  <text x="362" y="57" fill="#05bb4c" font-size="8">
                    {{ sourceMap?.station?.SXJ_KGDL_GJY_FDC_STA?.zjts }}
                  </text>
                  <text x="379" y="57" fill="#919697" font-size="8">台</text>
                </g>
                <g
                  @click.stop="
                    clickLabel(
                      'SXJ_KGDL_HSM_FDC_STA',
                      '风电场12',
                      penetrateType
                    )
                  "
                >
                  <text
                    class="mapKey"
                    x="314"
                    y="69"
                    fill="#919697"
                    font-size="8"
                  >
                    风电场12
                  </text>
                  <text x="365" y="69" fill="#05bb4c" font-size="8">
                    {{ sourceMap?.station?.SXJ_KGDL_HSM_FDC_STA?.zjts }}
                  </text>
                  <text x="379" y="69" fill="#919697" font-size="8">台</text>
                </g>
              </g>
            </g>
          </g>

          <g
            class="item-label-hover"
            v-if="
              showType === 'all' ||
              showType === 'fc' ||
              companyid == 'SXJ_KGDL_FLFD_ZGS0'
            "
            @click.stop="
              clickLabel(
                'SXJ_KGDL_PDL_FDC_STA',
                '风电场13',
                penetrateType
              )
            "
          >
            <svg
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              x="400"
              y="40"
              width="45"
              height="45"
              viewBox="0 0 220 392"
              enable-background="new 0 0 220 392"
              xml:space="preserve"
              class="windmill"
            >
              <image
                width="47"
                height="345"
                class="pillar"
                x="68"
                y="50"
                xlink:href="./pillars.png"
              ></image>
              <image
                v-if="sourceMap.PDL_FDC_fczt === 3"
                width="200"
                height="165"
                xlink:href="./fl_white.png"
                transform="matrix(1 0 0 1 -20 40)"
              ></image>
              <image
                v-else
                width="200"
                height="165"
                class="fan"
                xlink:href="./fl_blue.png"
              ></image>
            </svg>
            <g
              :class="
                $store.state.themeName === 'light' ? 'isshow-light' : 'isshow'
              "
            >
              <rect
                x="430"
                y="48"
                width="80"
                height="12"
                stroke="#46C55A35"
                fill="#000000"
                opacity="0.8"
              />
              <text class="mapKey" x="433" y="58" fill="#919697" font-size="8">
                风电场13
              </text>
              <text x="480" y="58" fill="#05bb4c" font-size="8">
                {{ sourceMap?.station?.SXJ_KGDL_PDL_FDC_STA?.zjts }}
              </text>
              <text x="495" y="58" fill="#919697" font-size="8">台</text>
            </g>
          </g>
        </g>
      </g>
    </svg>
  </div>
</template>

<script>
export default {
  // 名称
  name: "SvgMap",
  // 使用组件
  components: {},
  // 传入参数
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    showType: {
      type: String,
      default: "all",
    },
    companyid: {
      type: String,
      default: "SXJ_RGN",
    },
  },
  // 自定义事件
  emits: {
    changePeriod: null,
  },
  // 数据
  data() {
    return {
      penetrateType: 3,
      sourceMap: {},
      c1: false,
      c2: false,
      svgTop: 0,
      svgLeft: 0,
      svgWidth: "100%",
      svgHeight: "100%",
    };
  },
  // 函数
  methods: {
    clickLabel(wpId, planBtnName, penetrateType) {
      this.$emit("clickLabel", wpId, planBtnName, penetrateType);
    },
    // 绑定鼠标浮动事件
    initMapFloat: function () {
      const els = this.$el.querySelectorAll(".map-float"); // 获取全部map-float元素
      const elsImage = this.$el.querySelectorAll(".map-float-image"); // 获取全部map-float元素
      Array.prototype.forEach.call(els, (element, index) => {
        // 遍历map-float元素
        element.addEventListener("mouseover", function () {
          // 绑定事件修改前兄弟节点的display
          this.style.opacity = 0.2;
        });
        element.addEventListener("mouseout", function () {
          if (elsImage[index].style.display != "block") {
            this.style.opacity = 0;
          }
        });
        // 点击事件
        element.addEventListener("click", function () {
          Array.prototype.forEach.call(elsImage, (ele, index) => {
            // 遍历map-float元素 清空凸起
            ele.style.display = "none";
            els[index].style.opacity = 0;
          });
          elsImage[index].style.display = "block";
        });
      });
    },
  },
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
    this.sourceMap = this.data;
    debugger
    setTimeout(() => {
      this.c1 = true;
      setTimeout(() => {
        this.c2 = true;
      }, 500);
    }, 2000);
  },
  mounted() {
    // 渲染后
    this.svgWidth = this.$el.scrollWidth.toFixed(0);
    this.svgHeight = this.$el.scrollHeight.toFixed(0);
    this.svgTop = `calc(50% - ${this.svgHeight / 2}px)`;
    this.svgLeft = `calc(50% - ${this.svgWidth / 2}px)`;
  },
  watch: {
    data(res) {
      this.sourceMap = res;
    },
  },
};
</script>

<style lang="less" scoped>
.svg-map {
  position: relative;
  width: 100%;
  height: 100%;

  .curStyle {
    cursor: pointer;
  }

  .item-label {
    cursor: pointer;
  }

  svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-45%, -50%);
  }

  .map-float {
    cursor: pointer;
  }

  .map-float-image {
    display: none;
  }

  #nx-map-circle {
    transform-origin: 50% 20%;
    transform: rotateX(38deg);
  }

  .nx-map-up-circle {
    animation: nxMapUpCircle 4s linear;
  }

  @keyframes nxMapUpCircle {
    0% {
      r: 0;
    }

    10% {
      r: 2;
    }

    99% {
      r: 2;
    }

    100% {
      r: 0;
    }
  }

  .nx-map-line {
    stroke-dasharray: 60, 100;
    animation: nxMapLine 4s linear;
  }

  @keyframes nxMapLine {
    0% {
      stroke-dashoffset: 60;
    }

    10% {
      stroke-dashoffset: 60;
    }

    20% {
      stroke-dashoffset: 0;
    }

    99% {
      stroke-dashoffset: 0;
    }

    100% {
      stroke-dashoffset: 60;
    }
  }

  .nx-map-down-circle-1 {
    animation: nxMapDownCircle1 4s linear;
  }

  @keyframes nxMapDownCircle1 {
    0% {
      r: 0;
    }

    20% {
      r: 0;
    }

    30% {
      r: 3;
    }

    50% {
      r: 3;
    }

    99% {
      r: 3;
    }

    100% {
      r: 3;
    }
  }

  .nx-map-down-circle-2 {
    animation: nxMapDownCircle2 4s linear infinite;
  }

  @keyframes nxMapDownCircle2 {
    0% {
      r: 0;
    }

    20% {
      r: 0;
    }

    40% {
      r: 9;
    }

    50% {
      r: 9;
    }

    99% {
      r: 9;
    }

    100% {
      r: 0;
    }
  }

  .nx-map-down-circle-3 {
    animation: nxMapDownCircle3 4s linear infinite;
  }

  @keyframes nxMapDownCircle3 {
    0% {
      r: 0;
    }

    20% {
      r: 0;
    }

    50% {
      r: 16;
    }

    99% {
      r: 16;
    }

    100% {
      r: 0;
    }
  }

  .nx-map-down-circle-loop {
    // animation: nxMapDownCircleLoop 2s linear infinite;
  }

  @keyframes nxMapDownCircleLoop {
    0% {
      r: 0;
      opacity: 1;
    }

    80% {
      r: 6;
      opacity: 0.8;
    }

    100% {
      r: 10;
      opacity: 0;
    }
  }
}

.item-label-hover:hover .isshow {
  display: flex;
}

.item-label-hover:hover .isshow-light {
  display: flex;
}

.isshow {
  display: none;
  color: #ffffff;
}

.isshow-light {
  display: none;
  color: #ffffff;

  rect {
    fill: @deepblue;
    transition: @transition;
  }

  .mapKey {
    fill: #fff;
    transition: @transition;
  }
}

.windmill-1,
.windmill-2,
.windmill-3,
.windmill-4,
.windmill-5 {
  position: absolute;
}

.windmill-1 {
  top: 23.148vh;
  left: 28.333vh;
  width: 4.167vh;
}

.fan {
  transform-origin: 46% 29%;
  transform: rotateY(45deg);
  animation: rotate 2.5s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>