<template>
  <itemBox
    :title="title"
    :title-id="titleId"
    style="min-height: 560px"
    @handleSaveTitle="saveDynamicConfigTitle"
  >
    <div ref="svgLine" class="center-box">
      <div v-loading="loading">
        <svg
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xml:space="preserve"
          class="circle-load-rect-svg"
          viewBox="0 0 800 530"
        >
          <defs>
            <defs>
              <radialGradient id="RadialGradient1">
                <stop offset="0%" stop-color="#fff" />
                <stop offset="30%" stop-color="#0171c1" />
                <stop offset="50%" stop-color="#035088" />
                <stop offset="100%" stop-color="#02395a" />
              </radialGradient>
            </defs>
            <marker
              id="markerCircle"
              markerWidth="15"
              markerHeight="15"
              refX="5"
              refY="5"
            >
              <circle
                cx="5"
                cy="5"
                r="5"
                style="stroke: none; fill: url(#RadialGradient1)"
              />
            </marker>

            <marker
              id="markerArrow"
              markerWidth="13"
              markerHeight="13"
              refX="2"
              refY="6"
              orient="auto"
            >
              <path d="M2,2 L2,11 L10,6 L2,2" style="fill: black" />
            </marker>
          </defs>
          <!-- //线条 -->
          <!-- top -->
          <polyline
            points="154,60 630,60"
            fill="none"
            class="g-rect-path"
            stroke="#0094FF"
            stroke-dasharray="3 3"
          />
          <!-- center -->
          <polyline
            points="385,60 385,320"
            fill="none"
            class="g-rect-path"
            stroke="#0094FF"
            stroke-dasharray="3 3"
          />

          <polyline
            points="385,100 460,100"
            fill="none"
            class="g-rect-path"
            stroke="#0094FF"
            stroke-dasharray="3 3"
          />

          <!-- bottom -->
          <polyline
            points="124,320 745,320"
            fill="none"
            class="g-rect-path"
            stroke="#0094FF"
            stroke-dasharray="3 3"
          />

          <!-- top -->

          <circle
            cx="154"
            cy="60"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="0s"
              :path="dotData.gridLeft"
            />
          </circle>
          <circle
            cx="154"
            cy="60"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
            @click="disposition('grid_left')"
          />
          <circle
            cx="630"
            cy="60"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
            @click="disposition('grid_left')"
          />

          <circle
            cx="460"
            cy="100"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          />

          <!-- bottom -->
          <!-- 第一个动点 -->
          <circle
            cx="128"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="0s"
              :path="dotData.pcsFirst"
            />
          </circle>
          <circle
            cx="128"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
            @click="disposition('pcs_first')"
          />

          <!-- 第二个动点 -->
          <circle
            cx="200"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="0s"
              :path="dotData.pcsSecond"
            />
          </circle>
          <circle
            cx="200"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
            @click="disposition('pcs_second')"
          />

          <!-- 第三个动点 -->
          <circle
            cx="270"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="0s"
              :path="dotData.pcsThird"
            />
          </circle>
          <circle
            cx="270"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
            @click="disposition('pcs_third')"
          />

          <!-- 第四个动点 -->
          <circle
            cx="340"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="0s"
              :path="dotData.pcsFourth"
            />
          </circle>
          <circle
            cx="340"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
            @click="disposition('pcs_fourth')"
          />

          <!-- 第五个动点 -->
          <circle
            cx="410"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="0s"
              :path="dotData.pcsFifth"
            />
          </circle>
          <circle
            cx="410"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
            @click="disposition('pcs_fifth')"
          />

          <!-- 第六个动点 -->
          <circle
            cx="480"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="0s"
              :path="dotData.pcsSixth"
            />
          </circle>
          <circle
            cx="480"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
            @click="disposition('pcs_sixth')"
          />

          <!-- 第七个动点 -->
          <circle
            cx="550"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="0s"
              :path="dotData.pcsSeventh"
            />
          </circle>
          <circle
            cx="550"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
            @click="disposition('pcs_seventh')"
          />

          <!-- 第八个动点 -->
          <circle
            cx="620"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="0s"
              :path="dotData.pcsEighth"
            />
          </circle>
          <circle
            cx="620"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
            @click="disposition('pcs_eighth')"
          />

          <!-- 第九个动点 -->
          <circle
            cx="690"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="0s"
              :path="dotData.pcsNinth"
            />
          </circle>
          <circle
            cx="690"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
            @click="disposition('pcs_ninth')"
          />

          <!-- 第十个动点 -->
          <circle
            cx="745"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="0s"
              :path="dotData.pcsTenth"
            />
          </circle>
          <circle
            cx="745"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1); cursor: pointer"
            @click="disposition('pcs_tenth')"
          />

          <!-- 图片和文字 -->

          <!-- 市电 -->
          <image :xlink:href="gridImg" x="70" y="10" width="60" height="87" />
          <text x="70" y="110" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text>

          <!--  {{ $t("dashboard.load") }} -->
          <image
            :xlink:href="chargingPileImg"
            x="650"
            y="10"
            width="60"
            height="87"
          />
          <text x="675" y="110" fill="#ffffff" font-size="14"> {{ $t("dashboard.load") }}</text>

          <!-- 1#PCS -->
          <image
            :xlink:href="cabinetImg"
            x="100"
            y="330"
            width="50"
            height="50"
            style="cursor: pointer"
            @click="disposition('tenth_pcs_1')"
          />
          <text x="94" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`1#${$t("dashboard.cabinet")}`,8) }}</text>
          <!-- 2#PCS -->
          <image
            :xlink:href="cabinetImg"
            x="170"
            y="330"
            width="50"
            height="50"
            style="cursor: pointer"
            @click="disposition('tenth_pcs_2')"
          />
          <text x="163" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`2#${$t("dashboard.cabinet")}`,8) }}</text>

          <!-- 3#PCS -->
          <image
            :xlink:href="cabinetImg"
            x="240"
            y="330"
            width="50"
            height="50"
            style="cursor: pointer"
            @click="disposition('tenth_pcs_3')"
          />
          <text x="235" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`3#${$t("dashboard.cabinet")}`,8) }}</text>

          <!-- 4#PCS -->
          <image
            :xlink:href="cabinetImg"
            x="310"
            y="330"
            width="50"
            height="50"
            style="cursor: pointer"
            @click="disposition('tenth_pcs_4')"
          />
          <text x="305" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`4#${$t("dashboard.cabinet")}`,8) }}</text>

          <!-- 5#PCS -->
          <image
            :xlink:href="cabinetImg"
            x="380"
            y="330"
            width="50"
            height="50"
            style="cursor: pointer"
            @click="disposition('tenth_pcs_5')"
          />
          <text x="380" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`5#${$t("dashboard.cabinet")}`,8) }}</text>

          <!-- 6#PCS -->
          <image
            :xlink:href="cabinetImg"
            x="450"
            y="330"
            width="50"
            height="50"
            style="cursor: pointer"
            @click="disposition('tenth_pcs_6')"
          />
          <text x="450" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`6#${$t("dashboard.cabinet")}`,8) }}</text>

          <image
            :xlink:href="cabinetImg"
            x="520"
            y="330"
            width="50"
            height="50"
            style="cursor: pointer"
            @click="disposition('tenth_pcs_7')"
          />
          <text x="520" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`7#${$t("dashboard.cabinet")}`,8) }}</text>

          <image
            :xlink:href="cabinetImg"
            x="590"
            y="330"
            width="50"
            height="50"
            style="cursor: pointer"
            @click="disposition('tenth_pcs_8')"
          />
          <text x="590" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`8#${$t("dashboard.cabinet")}`,8) }}</text>

          <image
            :xlink:href="cabinetImg"
            x="660"
            y="330"
            width="50"
            height="50"
            style="cursor: pointer"
            @click="disposition('tenth_pcs_9')"
          />
          <text x="660" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`9#${$t("dashboard.cabinet")}`,8) }}</text>

          <image
            :xlink:href="cabinetImg"
            x="720"
            y="330"
            width="50"
            height="50"
            style="cursor: pointer"
            @click="disposition('tenth_pcs_10')"
          />
          <text x="720" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`10#${$t("dashboard.cabinet")}`,8) }}</text>

          <!-- 变压器 -->
          <image
            :xlink:href="distributionCabinetImg"
            x="330"
            y="145"
            width="120"
            height="85"
          />

          <!-- {{ $t("dashboard.ammeter") }} -->
          <image
            :xlink:href="ammeterImg"
            x="455"
            y="80"
            width="80"
            height="40"
            style="cursor: pointer"
            @click="disposition('tenth_ammeter_1')"
          />
          <g v-for="(item, index) in ammeter_1" :key="item.id">
            <text x="435" :y="150 + 20 * index" fill="#ffffff" font-size="14">
              {{ item.name }}
            </text>
            <text
              :x="countChineseAndEnglishCharacters(item.name, 450)"
              :y="150 + 20 * index"
              fill="#FFB800"
              font-size="14"
            >
              {{ item.value }}
            </text>
          </g>

          <!-- 左侧 -->
          <!-- 1#PCS -->
          <text x="10" y="440" fill="#ffffff" font-size="14">SOC(%)：</text>
          <text x="10" y="460" fill="#ffffff" font-size="14">SOH(%)：</text>
          <text x="10" y="480" fill="#ffffff" font-size="14">{{ $t("dashboard.workStatus") }}：</text>
          <text x="10" y="500" fill="#ffffff" font-size="14">
            {{ $t("dashboard.activePower") }}(kW)：
          </text>
          <!-- 1#PCS -->
          <text x="110" y="440" fill="#FFB800" font-size="14">
            {{ pcsData_1.length ? pcsData_1[0].value : "" }}
          </text>
          <text x="110" y="460" fill="#FFB800" font-size="14">
            {{ pcsData_1.length > 1 ? pcsData_1[1].value : "" }}
          </text>
          <text x="110" y="480" fill="#FFB800" font-size="14">
            {{ pcsData_1.length > 2 ? pcsData_1[2].value : "" }}
          </text>
          <text x="110" y="500" fill="#FFB800" font-size="14">
            {{ pcsData_1.length > 3 ? pcsData_1[3].value : "" }}
          </text>
          <!-- 2#PCS -->
          <text x="180" y="440" fill="#FFB800" font-size="14">
            {{ pcsData_2.length ? pcsData_2[0].value : "" }}
          </text>
          <text x="180" y="460" fill="#FFB800" font-size="14">
            {{ pcsData_2.length > 1 ? pcsData_2[1].value : "" }}
          </text>
          <text x="180" y="480" fill="#FFB800" font-size="14">
            {{ pcsData_2.length > 2 ? pcsData_2[2].value : "" }}
          </text>
          <text x="180" y="500" fill="#FFB800" font-size="14">
            {{ pcsData_2.length > 3 ? pcsData_2[3].value : "" }}
          </text>
          <!-- 3#PCS -->
          <text x="245" y="440" fill="#FFB800" font-size="14">
            {{ pcsData_3.length ? pcsData_3[0].value : "" }}
          </text>
          <text x="245" y="460" fill="#FFB800" font-size="14">
            {{ pcsData_3.length > 1 ? pcsData_3[1].value : "" }}
          </text>
          <text x="245" y="480" fill="#FFB800" font-size="14">
            {{ pcsData_3.length > 2 ? pcsData_3[2].value : "" }}
          </text>
          <text x="245" y="500" fill="#FFB800" font-size="14">
            {{ pcsData_3.length > 3 ? pcsData_3[3].value : "" }}
          </text>
          <!-- 4#PCS -->
          <text x="320" y="440" fill="#FFB800" font-size="14">
            {{ pcsData_4.length ? pcsData_4[0].value : "" }}
          </text>
          <text x="320" y="460" fill="#FFB800" font-size="14">
            {{ pcsData_4.length > 1 ? pcsData_4[1].value : "" }}
          </text>
          <text x="320" y="480" fill="#FFB800" font-size="14">
            {{ pcsData_4.length > 2 ? pcsData_4[2].value : "" }}
          </text>
          <text x="320" y="500" fill="#FFB800" font-size="14">
            {{ pcsData_4.length > 3 ? pcsData_4[3].value : "" }}
          </text>
          <!-- 5#PCS -->
          <text x="390" y="440" fill="#FFB800" font-size="14">
            {{ pcsData_5.length ? pcsData_5[0].value : "" }}
          </text>
          <text x="390" y="460" fill="#FFB800" font-size="14">
            {{ pcsData_5.length > 1 ? pcsData_5[1].value : "" }}
          </text>
          <text x="390" y="480" fill="#FFB800" font-size="14">
            {{ pcsData_5.length > 2 ? pcsData_5[2].value : "" }}
          </text>
          <text x="390" y="500" fill="#FFB800" font-size="14">
            {{ pcsData_5.length > 3 ? pcsData_5[3].value : "" }}
          </text>
          <!-- 6#PCS -->
          <text x="460" y="440" fill="#FFB800" font-size="14">
            {{ pcsData_6.length ? pcsData_6[0].value : "" }}
          </text>
          <text x="460" y="460" fill="#FFB800" font-size="14">
            {{ pcsData_6.length > 1 ? pcsData_6[1].value : "" }}
          </text>
          <text x="460" y="480" fill="#FFB800" font-size="14">
            {{ pcsData_6.length > 2 ? pcsData_6[2].value : "" }}
          </text>
          <text x="460" y="500" fill="#FFB800" font-size="14">
            {{ pcsData_6.length > 3 ? pcsData_6[3].value : "" }}
          </text>
          <!-- 7#PCS -->
          <text x="530" y="440" fill="#FFB800" font-size="14">
            {{ pcsData_7.length ? pcsData_7[0].value : "" }}
          </text>
          <text x="530" y="460" fill="#FFB800" font-size="14">
            {{ pcsData_7.length > 1 ? pcsData_7[1].value : "" }}
          </text>
          <text x="530" y="480" fill="#FFB800" font-size="14">
            {{ pcsData_7.length > 2 ? pcsData_7[2].value : "" }}
          </text>
          <text x="530" y="500" fill="#FFB800" font-size="14">
            {{ pcsData_7.length > 3 ? pcsData_7[3].value : "" }}
          </text>
          <!-- 8#PCS -->
          <text x="600" y="440" fill="#FFB800" font-size="14">
            {{ pcsData_8.length ? pcsData_8[0].value : "" }}
          </text>
          <text x="600" y="460" fill="#FFB800" font-size="14">
            {{ pcsData_8.length > 1 ? pcsData_8[1].value : "" }}
          </text>
          <text x="600" y="480" fill="#FFB800" font-size="14">
            {{ pcsData_8.length > 2 ? pcsData_8[2].value : "" }}
          </text>
          <text x="600" y="500" fill="#FFB800" font-size="14">
            {{ pcsData_8.length > 3 ? pcsData_8[3].value : "" }}
          </text>
          <!-- 9#PCS -->
          <text x="670" y="440" fill="#FFB800" font-size="14">
            {{ pcsData_9.length ? pcsData_9[0].value : "" }}
          </text>
          <text x="670" y="460" fill="#FFB800" font-size="14">
            {{ pcsData_9.length > 1 ? pcsData_9[1].value : "" }}
          </text>
          <text x="670" y="480" fill="#FFB800" font-size="14">
            {{ pcsData_9.length > 2 ? pcsData_9[2].value : "" }}
          </text>
          <text x="670" y="500" fill="#FFB800" font-size="14">
            {{ pcsData_9.length > 3 ? pcsData_9[3].value : "" }}
          </text>

          <!-- 10#PCS -->
          <text x="730" y="440" fill="#FFB800" font-size="14">
            {{ pcsData_10.length ? pcsData_10[0].value : "" }}
          </text>
          <text x="730" y="460" fill="#FFB800" font-size="14">
            {{ pcsData_10.length > 1 ? pcsData_10[1].value : "" }}
          </text>
          <text x="730" y="480" fill="#FFB800" font-size="14">
            {{ pcsData_10.length > 2 ? pcsData_10[2].value : "" }}
          </text>
          <text x="730" y="500" fill="#FFB800" font-size="14">
            {{ pcsData_10.length > 3 ? pcsData_10[3].value : "" }}
          </text>
        </svg>
      </div>
    </div>
    <DispositionPointData
      :disposition-show="show_point_dispostion"
      :page-location="pageLocation"
      @close="closePoint"
      @getData="getDynamicPointData"
    />
  </itemBox>
</template>

<script>
import itemBox from '../itemBox/position.vue'
import gridImg from '@/assets/images/wxjd/grid.png'
import ammeterImg from '@/assets/images/wxjd/ammeter.png'
import cabinetImg from '@/assets/images/wxjd/pcs-energy.png'
import chargingPileImg from '@/assets/images/home-office.png'
import distributionCabinetImg from '@/assets/images/wxjd/guiImg.png'
import frameImg from '@/assets/images/wxjd/frame.png'
import cangImg from '@/assets/images/home-cang.png'
import { DynamicConfigPoint } from '@/api/home-page/index'
import { hiddenTextWord } from '@/utils/index'
import {
  QueryDynamicConfigTitle,
  AddDynamicConfigTitle
} from '@/api/test-management/index'
export default {
  name: 'Index',
  components: { itemBox },
  props: {
    stationType: {
      type: Number,
      default: 0
    },
    stationId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      hiddenTextWord,
      gridImg,
      ammeterImg,
      cabinetImg,
      chargingPileImg,
      distributionCabinetImg,
      cangImg,
      frameImg,
      pcsData_1: [],
      pcsData_2: [],
      pcsData_3: [],
      pcsData_4: [],
      pcsData_5: [],
      pcsData_6: [],
      pcsData_7: [],
      pcsData_8: [],
      pcsData_9: [],
      pcsData_10: [],
      ammeter_1: [],
      partList: [
        { soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
        { soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
        { soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
        { soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
        { soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 }
      ],
      loading: false,
      activePowerTotal: {},
      permissionId: null,
      show_point_dispostion: false,
      pageLocation: null,
      title: '站点拓扑',
      titleId: null,
      dotData: {
        gridLeft: 'M 0,0 0,0',
        gridRight: 'M 0,0 0,0',
        pcsFirst: 'M 0,0 0,0',
        pcsSecond: 'M 0,0 0,0',
        pcsThird: 'M 0,0 0,0',
        pcsFourth: 'M 0,0 0,0',
        pcsFifth: 'M 0,0 0,0',
        pcsSixth: 'M 0,0 0,0',
        pcsSeventh: 'M 0,0 0,0',
        pcsEighth: 'M 0,0 0,0',
        pcsNinth: 'M 0,0 0,0',
        pcsTenth: 'M 0,0 0,0'
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    if (this.$store.getters.menuList.length) {
      this.permissionId = this.$store.getters.menuList.find((item) => {
        return item.url === this.$route.path
      }).id
    }
  },
  mounted() {},
  methods: {
    async saveDynamicConfigTitle(title, id) {
      await AddDynamicConfigTitle({
        name: title,
        id: id,
        stationId: this.stationId,
        pageLocation: 'ten_topCenter_title',
        permissionId: this.permissionId
      })
      this.queryDynamicConfigTitle()
    },
    async queryDynamicConfigTitle() {
      const { data } = await QueryDynamicConfigTitle({
        stationId: this.stationId,
        pageLocation: 'ten_topCenter_title',
        permissionId: this.permissionId
      })
      this.title = data.length ? data[0].name : '站点拓扑'
      this.titleId = data.length ? data[0].id : undefined
    },
    disposition(val) {
      this.pageLocation = val
      this.show_point_dispostion = true
    },
    getDynamicPointData() {
      this.getData()
    },
    closePoint() {
      this.show_point_dispostion = false
    },

    countChineseAndEnglishCharacters(str, x) {
      var chineseCount = str.match(/[\u4e00-\u9fa5]/g)
        ? str.match(/[\u4e00-\u9fa5]/g).length
        : 0
      var englishCount = str.match(/[a-zA-Z]/g)
        ? str.match(/[a-zA-Z]/g).length
        : 0
      var otherCount = str.length - chineseCount - englishCount
      const obj = {
        otherCount: otherCount,
        chineseCount: chineseCount,
        englishCount: englishCount
      }
      return (
        obj.englishCount * 8 + obj.chineseCount * 16 + obj.otherCount * 6 + x
      )
    },
    async getData() {
      this.loading = true

      try {
        const res = await DynamicConfigPoint({
          permissionId: this.permissionId,
          stationId: this.stationId
        })
        this.pcsData_1 = []
        this.pcsData_2 = []
        this.pcsData_3 = []
        this.pcsData_4 = []
        this.pcsData_5 = []
        this.pcsData_6 = []
        this.pcsData_7 = []
        this.pcsData_8 = []
        this.pcsData_9 = []
        this.pcsData_10 = []
        this.ammeter_1 = []
        this.dotData = {
          gridLeft: 'M 0,0 0,0',
          gridRight: 'M 0,0 0,0',
          pcsFirst: 'M 0,0 0,0',
          pcsSecond: 'M 0,0 0,0',
          pcsThird: 'M 0,0 0,0',
          pcsFourth: 'M 0,0 0,0',
          pcsFifth: 'M 0,0 0,0',
          pcsSixth: 'M 0,0 0,0',
          pcsSeventh: 'M 0,0 0,0',
          pcsEighth: 'M 0,0 0,0',
          pcsNinth: 'M 0,0 0,0',
          pcsTenth: 'M 0,0 0,0'
        }
        if (res.data.length) {
          res.data.forEach((item) => {
            if (item.pageLocation === 'tenth_pcs_1') {
              this.pcsData_1.push(item)
            } else if (item.pageLocation === 'tenth_pcs_2') {
              this.pcsData_2.push(item)
            } else if (item.pageLocation === 'tenth_pcs_3') {
              this.pcsData_3.push(item)
            } else if (item.pageLocation === 'tenth_pcs_4') {
              this.pcsData_4.push(item)
            } else if (item.pageLocation === 'tenth_pcs_5') {
              this.pcsData_5.push(item)
            } else if (item.pageLocation === 'tenth_pcs_6') {
              this.pcsData_6.push(item)
            } else if (item.pageLocation === 'tenth_pcs_7') {
              this.pcsData_7.push(item)
            } else if (item.pageLocation === 'tenth_pcs_8') {
              this.pcsData_8.push(item)
            } else if (item.pageLocation === 'tenth_pcs_9') {
              this.pcsData_9.push(item)
            } else if (item.pageLocation === 'tenth_pcs_10') {
              this.pcsData_10.push(item)
            } else if (item.pageLocation === 'tenth_ammeter_1') {
              this.ammeter_1.push(item)
            } else if (item.pageLocation === 'grid_left') {
              if (+item.value > 0) {
                this.dotData.gridLeft = 'M 0,0 470,0'
              } else if (+item.value < 0) {
                this.dotData.gridLeft = 'M 470,0 0,0'
              } else {
                this.dotData.gridLeft = 'M 0,0 0,0'
              }
            } else if (item.pageLocation === 'pcs_first') {
              if (+item.value > 0) {
                this.dotData.pcsFirst = 'M 257,-250 257,0 0,0'
              } else if (+item.value < 0) {
                this.dotData.pcsFirst = 'M 0,0 257,0 257,-250'
              } else {
                this.dotData.pcsFirst = 'M 0,0 0,0'
              }
            } else if (item.pageLocation === 'pcs_second') {
              if (+item.value > 0) {
                this.dotData.pcsSecond = 'M 185, -250 185,0 0,0'
              } else if (+item.value < 0) {
                this.dotData.pcsSecond = 'M 0,0 185,0 185,-250'
              } else {
                this.dotData.pcsSecond = 'M 0,0 0,0'
              }
            } else if (item.pageLocation === 'pcs_third') {
              if (+item.value > 0) {
                this.dotData.pcsThird = 'M 115,-250 115,0 0,0'
              } else if (+item.value < 0) {
                this.dotData.pcsThird = 'M 0,0 115,0 115,-250'
              } else {
                this.dotData.pcsThird = 'M 0,0 0,0'
              }
            } else if (item.pageLocation === 'pcs_fourth') {
              if (+item.value > 0) {
                this.dotData.pcsFourth = 'M 45,-250 45,0 0,0'
              } else if (+item.value < 0) {
                this.dotData.pcsFourth = 'M 0,0 45,0 45,-250'
              } else {
                this.dotData.pcsFourth = 'M 0,0 0,0'
              }
            } else if (item.pageLocation === 'pcs_fifth') {
              if (+item.value > 0) {
                this.dotData.pcsFifth = 'M -25,-250 -25,0 0,0'
              } else if (+item.value < 0) {
                this.dotData.pcsFifth = 'M 0,0 -25,0 -25,-250'
              } else {
                this.dotData.pcsFifth = 'M 0,0 0,0'
              }
            } else if (item.pageLocation === 'pcs_sixth') {
              if (+item.value > 0) {
                this.dotData.pcsSixth = 'M -95,-250 -95,0 0,0'
              } else if (+item.value < 0) {
                this.dotData.pcsSixth = 'M 0,0 -95,0 -95,-250'
              } else {
                this.dotData.pcsSixth = 'M 0,0 0,0'
              }
            } else if (item.pageLocation === 'pcs_seventh') {
              if (+item.value > 0) {
                this.dotData.pcsSeventh = 'M -165,-250 -165,0 0,0'
              } else if (+item.value < 0) {
                this.dotData.pcsSeventh = 'M 0,0 -165,0 -165,-250'
              } else {
                this.dotData.pcsSeventh = 'M 0,0 0,0'
              }
            } else if (item.pageLocation === 'pcs_eighth') {
              if (+item.value > 0) {
                this.dotData.pcsEighth = 'M -235,-250 -235,0 0,0'
              } else if (+item.value < 0) {
                this.dotData.pcsEighth = 'M 0,0 -235,0 -235,-250'
              } else {
                this.dotData.pcsEighth = 'M 0,0 0,0'
              }
            } else if (item.pageLocation === 'pcs_ninth') {
              if (+item.value > 0) {
                this.dotData.pcsNinth = 'M -305,-250 -305,0 0,0'
              } else if (+item.value < 0) {
                this.dotData.pcsNinth = 'M 0,0 -305,0 -305,-250'
              } else {
                this.dotData.pcsNinth = 'M 0,0 0,0'
              }
            } else if (item.pageLocation === 'pcs_tenth') {
              if (+item.value > 0) {
                this.dotData.pcsTenth = 'M -360,-250 -360,0 0,0'
              } else if (+item.value < 0) {
                this.dotData.pcsTenth = 'M 0, 0 -360,0 -360,-250'
              } else {
                this.dotData.pcsTenth = 'M 0,0 0,0'
              }
            }
          })
        }
        this.queryDynamicConfigTitle()
      } catch (error) {
        // console.log(error);
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.center-box {
  width: 100%;
  height: 100%;
}

@mixin move-round($duration, $delay) {
  fill: none;
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 3, 900;
  stroke-dashoffset: 0;
  animation: lineMove $duration $delay cubic-bezier(0, 0, 0.74, 0.74) infinite;
}

@keyframes lineMove {
  0% {
    stroke-dashoffset: -850;
  }
  100% {
    stroke-dashoffset: -0;
  }
}
.g-rect-fill-two {
  @include move-round(3.5s, 1s);
}
</style>
