<template>
  <ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px;">
    <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 655,320"
            fill="none"
            class="g-rect-path"
            stroke="#0094FF"
            stroke-dasharray="3 3"
          />

          <circle
            cx="154"
            cy="60"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="0s"
              :path="dotData.lineTopLeft"
            />
          </circle>

          <circle
            cx="630"
            cy="60"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="0s"
              :path="dotData.lineTopRight"
            />
          </circle>

          <circle
            cx="128"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="0s"
              :path="dotData.lineBottomOne"
            />
          </circle>

          <circle
            cx="210"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="0s"
              :path="dotData.lineBottomTwo"
            />
          </circle>

          <circle
            cx="290"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="0s"
              :path="dotData.lineBottomThree"
            />
          </circle>

          <circle
            cx="365"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="0s"
              :path="dotData.lineBottomFour"
            />
          </circle>

          <circle
            cx="458"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="0s"
              :path="dotData.lineBottomFive"
            />
          </circle>

          <circle
            cx="555"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="0s"
              :path="dotData.lineBottomSix"
            />
          </circle>

          <circle
            cx="650"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="0s"
              :path="dotData.lineBottomSeven"
            />
          </circle>

          <!-- top -->
          <circle
            cx="154"
            cy="60"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
            @click="lookDeviceDetail('seven-line-top-left')"
          />

          <circle
            cx="630"
            cy="60"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
            @click="lookDeviceDetail('seven-line-top-right')"
          />

          <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);cursor: pointer;"
            @click="lookDeviceDetail('seven-line-bottom-one')"
          />
          <circle
            cx="210"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
            @click="lookDeviceDetail('seven-line-bottom-two')"
          />
          <circle
            cx="290"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
            @click="lookDeviceDetail('seven-line-bottom-three')"
          />
          <circle
            cx="365"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
            @click="lookDeviceDetail('seven-line-bottom-four')"
          />

          <circle
            cx="458"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
            @click="lookDeviceDetail('seven-line-bottom-five')"
          />

          <circle
            cx="555"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
            @click="lookDeviceDetail('seven-line-bottom-six')"
          />

          <circle
            cx="650"
            cy="320"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1);cursor: pointer;"
            @click="lookDeviceDetail('seven-line-bottom-seven')"
          />

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

          <!-- 市电 -->
          <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="lookDeviceDetail('seventh_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="180"
            y="330"
            width="50"
            height="50"
            style="cursor: pointer;"
            @click="lookDeviceDetail('seventh_pcs_2')"
          />
          <text x="173" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`2#${$t("dashboard.cabinet")}`,8) }}</text>

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

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

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

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

          <image
            :xlink:href="cabinetImg"
            x="620"
            y="330"
            width="50"
            height="50"
            style="cursor: pointer;"
            @click="lookDeviceDetail('seventh_pcs_7')"
          />
          <text x="620" y="410" fill="#ffffff" font-size="14">{{ hiddenTextWord(`7#${$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="lookDeviceDetail('seventh_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,445)" :y="150 + ( 20 * index)" fill="#FFB800" font-size="14">
              {{ item.value }}
            </text>
          </g>

          <!-- 左侧 -->
          <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="120" y="440" fill="#FFB800" font-size="14">{{ pcsData_1.length ? pcsData_1[0].value : '' }}</text>
          <text x="120" y="460" fill="#FFB800" font-size="14">{{ pcsData_1.length > 1 ? pcsData_1[1].value : '' }}</text>
          <text x="120" y="480" fill="#FFB800" font-size="14">{{ pcsData_1.length > 2 ? pcsData_1[2].value : '' }}</text>
          <text x="120" y="500" fill="#FFB800" font-size="14">{{ pcsData_1.length > 3 ? pcsData_1[3].value : '' }}</text>
          <!-- 2#PCS -->
          <text x="190" y="440" fill="#FFB800" font-size="14">{{ pcsData_2.length ? pcsData_2[0].value : '' }}</text>
          <text x="190" y="460" fill="#FFB800" font-size="14">{{ pcsData_2.length > 1 ? pcsData_2[1].value : '' }}</text>
          <text x="190" y="480" fill="#FFB800" font-size="14">{{ pcsData_2.length > 2 ? pcsData_2[2].value : '' }}</text>
          <text x="190" y="500" fill="#FFB800" font-size="14">{{ pcsData_2.length > 3 ? pcsData_2[3].value : '' }}</text>
          <!-- 3#PCS -->
          <text x="265" y="440" fill="#FFB800" font-size="14">{{ pcsData_3.length ? pcsData_3[0].value : '' }}</text>
          <text x="265" y="460" fill="#FFB800" font-size="14">{{ pcsData_3.length > 1 ? pcsData_3[1].value : '' }}</text>
          <text x="265" y="480" fill="#FFB800" font-size="14">{{ pcsData_3.length > 2 ? pcsData_3[2].value : '' }}</text>
          <text x="265" y="500" fill="#FFB800" font-size="14">{{ pcsData_3.length > 3 ? pcsData_3[3].value : '' }}</text>
          <!-- 4#PCS -->
          <text x="350" y="440" fill="#FFB800" font-size="14">{{ pcsData_4.length ? pcsData_4[0].value : '' }}</text>
          <text x="350" y="460" fill="#FFB800" font-size="14">{{ pcsData_4.length > 1 ? pcsData_4[1].value : '' }}</text>
          <text x="350" y="480" fill="#FFB800" font-size="14">{{ pcsData_4.length > 2 ? pcsData_4[2].value : '' }}</text>
          <text x="350" y="500" fill="#FFB800" font-size="14">{{ pcsData_4.length > 3 ? pcsData_4[3].value : '' }}</text>
          <!-- 5#PCS -->
          <text x="440" y="440" fill="#FFB800" font-size="14">{{ pcsData_5.length ? pcsData_5[0].value : '' }}</text>
          <text x="440" y="460" fill="#FFB800" font-size="14">{{ pcsData_5.length > 1 ? pcsData_5[1].value : '' }}</text>
          <text x="440" y="480" fill="#FFB800" font-size="14">{{ pcsData_5.length > 2 ? pcsData_5[2].value : '' }}</text>
          <text x="440" y="500" fill="#FFB800" font-size="14">{{ pcsData_5.length > 3 ? pcsData_5[3].value : '' }}</text>
          <!-- 6#PCS -->
          <text x="535" y="440" fill="#FFB800" font-size="14">{{ pcsData_6.length ? pcsData_6[0].value : '' }}</text>
          <text x="535" y="460" fill="#FFB800" font-size="14">{{ pcsData_6.length > 1 ? pcsData_6[1].value : '' }}</text>
          <text x="535" y="480" fill="#FFB800" font-size="14">{{ pcsData_6.length > 2 ? pcsData_6[2].value : '' }}</text>
          <text x="535" y="500" fill="#FFB800" font-size="14">{{ pcsData_6.length > 3 ? pcsData_6[3].value : '' }}</text>
          <!-- 7#PCS -->
          <text x="630" y="440" fill="#FFB800" font-size="14">{{ pcsData_7.length ? pcsData_7[0].value : '' }}</text>
          <text x="630" y="460" fill="#FFB800" font-size="14">{{ pcsData_7.length > 1 ? pcsData_7[1].value : '' }}</text>
          <text x="630" y="480" fill="#FFB800" font-size="14">{{ pcsData_7.length > 2 ? pcsData_7[2].value : '' }}</text>
          <text x="630" y="500" fill="#FFB800" font-size="14">{{ pcsData_7.length > 3 ? pcsData_7[3].value : '' }}</text>

        </svg>
      </div>
    </div>
    <dispositionPointDialog :visible="show_point_dispostion" :page-location="pageLocation" @close="closePoint" @getData="getDynamicPointData" />

  </ItemBox>
</template>

<script>
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'
export default {
  name: 'Index',
  props: {
    stationType: {
      type: Number,
      default: 0
    },
    stationId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      hiddenTextWord,
      gridImg,
      ammeterImg,
      cabinetImg,
      chargingPileImg,
      distributionCabinetImg,
      cangImg,
      frameImg,

      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 }
      ],

      dotData: {
        lineTopLeft: 'M 0,0 0,0',
        lineTopRight: 'M 0,0 0,0',
        lineCenter: 'M 0,0 0,0',
        lineBottomOne: 'M 0,0 0,0',
        lineBottomTwo: 'M 0,0 0,0',
        lineBottomThree: 'M 0,0 0,0',
        lineBottomFour: 'M 0,0 0,0',
        lineBottomFive: 'M 0,0 0,0',
        lineBottomSix: 'M 0,0 0,0',
        lineBottomSeven: 'M 0,0 0,0'
      },
      loading: false,
      activePowerTotal: {},
      permissionId: null,
      show_point_dispostion: false,
      pageLocation: null,
      pcsData_1: [],
      pcsData_2: [],
      pcsData_3: [],
      pcsData_4: [],
      pcsData_5: [],
      pcsData_6: [],
      pcsData_7: [],
      pcsData_8: [],
      pcsData_9: [],
      pcsData_10: [],
      ammeter_1: [],
      ammeter_2: [],
      ammeter_3: [],
      ammeter_4: [],
      break_1: []
    }
  },
  computed: {},
  watch: {},
  created() {
    setTimeout(() => {
      if (this.$store.getters.menuList.length) {
        this.permissionId = this.$store.getters.menuList.find(item => {
          return item.url === this.$route.path
        }).id
      }
    }, 300)
  },
  mounted() {},
  methods: {
    oScale() {
      this.$emit('scale')
    },
    getBreakColor(val) {
      if (+val === 1) {
        return '#00FF1A'
      } else {
        return '#FF0000'
      }
    },
    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
    },
    lookDeviceDetail(val) { // 查看设备详情
      this.pageLocation = val
      this.show_point_dispostion = true
    },
    closePoint() {
      this.show_point_dispostion = false
    },

    getDynamicPointData() {
      this.getData()
    },
    handleSetting() {
      this.$emit('handleSetting')
    },
    toScale() {
      this.$emit('toScale')
    },
    async getpoint() {
      await DynamicConfigPoint({
        pageLocation: this.pageLocation,
        permissionId: this.permissionId,
        stationId: this.stationId
      })
    },
    async getData() {
      this.getPcsData()
    },
    async getPcsData() {
      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.ammeter_1 = []
        this.dotData = {
          lineTopLeft: 'M 0,0 0,0',
          lineTopRight: 'M 0,0 0,0',
          lineCenter: 'M 0,0 0,0',
          lineBottomOne: 'M 0,0 0,0',
          lineBottomTwo: 'M 0,0 0,0',
          lineBottomThree: 'M 0,0 0,0',
          lineBottomFour: 'M 0,0 0,0',
          lineBottomFive: 'M 0,0 0,0',
          lineBottomSix: 'M 0,0 0,0',
          lineBottomSeven: 'M 0,0 0,0'
        }
        if (res.data.length) {
          res.data.forEach((item) => {
            if (item.pageLocation === 'seventh_pcs_1') {
              this.pcsData_1.push(item)
            } else if (item.pageLocation === 'seventh_pcs_2') {
              this.pcsData_2.push(item)
            } else if (item.pageLocation === 'seventh_pcs_3') {
              this.pcsData_3.push(item)
            } else if (item.pageLocation === 'seventh_pcs_4') {
              this.pcsData_4.push(item)
            } else if (item.pageLocation === 'seventh_pcs_5') {
              this.pcsData_5.push(item)
            } else if (item.pageLocation === 'seventh_pcs_6') {
              this.pcsData_6.push(item)
            } else if (item.pageLocation === 'seventh_pcs_7') {
              this.pcsData_7.push(item)
            } else if (item.pageLocation === 'seventh_ammeter_1') {
              this.ammeter_1.push(item)
            } else if (item.pageLocation === 'seven-line-top-left') {
              if (+item.value > 0) {
                this.dotData.lineTopLeft = 'M 238,0 0,0'
              } else if (+item.value < 0) {
                this.dotData.lineTopLeft = 'M 0,0 238,0 '
              } else {
                this.dotData.lineTopLeft = 'M 0,0 0,0'
              }
            } else if (item.pageLocation === 'seven-line-top-right') {
              if (+item.value > 0) {
                this.dotData.lineTopRight = 'M  0,0 -230,0'
              } else if (+item.value < 0) {
                this.dotData.lineTopRight = 'M -230,0 0,0 '
              } else {
                this.dotData.lineTopRight = 'M 0,0 0,0'
              }
            } else if (item.pageLocation === 'seven-line-bottom-one') {
              if (+item.value > 0) {
                this.dotData.lineBottomOne = 'M 258,-260, 258, 0, 0 ,0'
              } else if (+item.value < 0) {
                this.dotData.lineBottomOne = 'M 0 ,0 258, 0, 258,-260 '
              } else {
                this.dotData.lineBottomOne = 'M 0,0 0,0'
              }
            } else if (item.pageLocation === 'seven-line-bottom-two') {
              if (+item.value > 0) {
                this.dotData.lineBottomTwo = 'M 176,-260, 176, 0, 0 ,0'
              } else if (+item.value < 0) {
                this.dotData.lineBottomTwo = 'M 0 ,0 176, 0, 176,-260'
              } else {
                this.dotData.lineBottomTwo = 'M 0,0 0,0'
              }
            } else if (item.pageLocation === 'seven-line-bottom-three') {
              if (+item.value > 0) {
                this.dotData.lineBottomThree = 'M 96,-260, 96, 0, 0 ,0'
              } else if (+item.value < 0) {
                this.dotData.lineBottomThree = 'M 0 ,0 96, 0, 96,-260'
              } else {
                this.dotData.lineBottomThree = 'M 0,0 0,0'
              }
            } else if (item.pageLocation === 'seven-line-bottom-four') {
              if (+item.value > 0) {
                this.dotData.lineBottomFour = 'M 21,-260, 21, 0, 0 ,0'
              } else if (+item.value < 0) {
                this.dotData.lineBottomFour = 'M  0 ,0 21, 0, 21,-260 '
              } else {
                this.dotData.lineBottomFour = 'M 0,0 0,0'
              }
            } else if (item.pageLocation === 'seven-line-bottom-five') {
              if (+item.value > 0) {
                this.dotData.lineBottomFive = 'M -72,-260,-72,0 0,0'
              } else if (+item.value < 0) {
                this.dotData.lineBottomFive = 'M  0,0 -72,0 -72,-260'
              } else {
                this.dotData.lineBottomFive = 'M 0,0 0,0'
              }
            } else if (item.pageLocation === 'seven-line-bottom-six') {
              if (+item.value > 0) {
                this.dotData.lineBottomSix = 'M -169,-260,-169,0 0,0'
              } else if (+item.value < 0) {
                this.dotData.lineBottomSix = 'M 0,0 -169,0 -169,-260 '
              } else {
                this.dotData.lineBottomSix = 'M 0,0 0,0'
              }
            } else if (item.pageLocation === 'seven-line-bottom-seven') {
              if (+item.value > 0) {
                this.dotData.lineBottomSeven = 'M -264,-260,-264,0 0,0'
              } else if (+item.value < 0) {
                this.dotData.lineBottomSeven = 'M 0,0 -264,0 -264,-260'
              } else {
                this.dotData.lineBottomSeven = 'M 0,0 0,0'
              }
            }
          })
        }
      } 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>
