From 09d927a800f9819476413e2d6185f288af444754 Mon Sep 17 00:00:00 2001
From: huangjp <huangjp@sinocat.com.cn>
Date: Wed, 20 Aug 2025 10:05:27 +0800
Subject: [PATCH] =?UTF-8?q?261=E5=85=89=E4=BC=8F=E6=8B=93=E6=89=91?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/top-center/pv1storage261.vue   | 755 ++++++++++++++++++
 .../components/top-center/pv2storage261.vue   | 748 +++++++++++++++++
 src/views/dashboardtest/index.vue             |   8 +-
 src/views/system/department/select.js         |   3 +-
 4 files changed, 1511 insertions(+), 3 deletions(-)
 create mode 100644 src/views/dashboardtest/components/top-center/pv1storage261.vue
 create mode 100644 src/views/dashboardtest/components/top-center/pv2storage261.vue

diff --git a/src/views/dashboardtest/components/top-center/pv1storage261.vue b/src/views/dashboardtest/components/top-center/pv1storage261.vue
new file mode 100644
index 0000000..fa446cb
--- /dev/null
+++ b/src/views/dashboardtest/components/top-center/pv1storage261.vue
@@ -0,0 +1,755 @@
+<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 500"
+        >
+          <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="120,50 650,50"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-dasharray="3 3"
+          />
+          <!-- <rect
+            x="154"
+            y="78"
+            width="231"
+            height="4"
+            :style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
+            @click="lookDeviceDetail('line-top-left')"
+          /> -->
+          <!-- <polyline
+            points="385,80 600,80"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-dasharray="3 3"
+          /> -->
+          <!-- <rect
+            x="385"
+            y="78"
+            width="215"
+            height="4"
+            :style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
+            @click="lookDeviceDetail('line-top-right')"
+          /> -->
+
+          <!-- center -->
+          <polyline
+            points="385,50 385,283"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-dasharray="3 3"
+          />
+          <!-- <rect
+            x="383"
+            y="80"
+            width="4"
+            height="281"
+            :style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
+            @click="lookDeviceDetail('line-bottom-center')"
+          /> -->
+
+          <polyline
+            points="385,100 460,100"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-dasharray="3 3"
+          />
+
+          <!-- bottom -->
+          <polyline
+            points="175,283 385,283"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-dasharray="3 3"
+          />
+          <polyline
+            points="175,283 175,417"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-dasharray="3 3"
+          />
+          <!-- <rect
+            x="104"
+            y="361"
+            width="283"
+            height="4"
+            :style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
+            @click="lookDeviceDetail('line-bottom-left')"
+          /> -->
+
+          <polyline
+            points="385,283 603,283"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-dasharray="3 3"
+          />
+          <polyline
+            points="603,283 603,417"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-dasharray="3 3"
+          />
+          <!-- <rect
+            x="383"
+            y="361"
+            width="272"
+            height="4"
+            :style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
+            @click="lookDeviceDetail('line-bottom-right')"
+          /> -->
+          <!-- top -->
+          <circle
+            cx="120"
+            cy="50"
+            r="8"
+            style="stroke: none; fill: url(#RadialGradient1)"
+          />
+          <circle
+            cx="650"
+            cy="50"
+            r="8"
+            style="stroke: none; fill: url(#RadialGradient1)"
+          />
+
+          <!-- 动点 -->
+          <circle
+            cx="120"
+            cy="50"
+            r="8"
+            style="stroke: none; fill: url(#RadialGradient1)"
+          >
+            <animateMotion
+              repeatCount="indefinite"
+              dur="4s"
+              begin="0s"
+              :path="dotData.lineTopLeft"
+            />
+          </circle>
+          <circle
+            cx="385"
+            cy="283"
+            r="8"
+            style="stroke: none; fill: url(#RadialGradient1)"
+          >
+            <animateMotion
+              repeatCount="indefinite"
+              dur="4s"
+              begin="2s"
+              :path="dotData.lineCenter"
+            />
+          </circle>
+          <circle
+            cx="650"
+            cy="50"
+            r="8"
+            style="stroke: none; fill: url(#RadialGradient1)"
+          >
+            <animateMotion
+              repeatCount="indefinite"
+              dur="4s"
+              begin="0s"
+              :path="dotData.lineTopRight"
+            />
+          </circle>
+
+          <!-- bottom -->
+          <circle
+            cx="175"
+            cy="417"
+            r="8"
+            style="stroke: none; fill: url(#RadialGradient1)"
+          />
+          <circle
+            cx="385"
+            cy="283"
+            r="8"
+            style="stroke: none; fill: url(#RadialGradient1)"
+          />
+          <circle
+            cx="603"
+            cy="417"
+            r="8"
+            style="stroke: none; fill: url(#RadialGradient1)"
+          />
+
+          <circle
+            cx="385"
+            cy="283"
+            r="8"
+            style="stroke: none; fill: url(#RadialGradient1)"
+          >
+            <animateMotion
+              repeatCount="indefinite"
+              dur="4s"
+              begin="2s"
+              :path="dotData.lineBottomLeft"
+            />
+          </circle>
+
+          <circle
+            cx="175"
+            cy="417"
+            r="8"
+            style="stroke: none; fill: url(#RadialGradient1)"
+          >
+            <animateMotion
+              repeatCount="indefinite"
+              dur="4s"
+              begin="2s"
+              :path="dotData.lineBottomLeft"
+            />
+          </circle>
+
+          <circle
+            cx="603"
+            cy="417"
+            r="8"
+            style="stroke: none; fill: url(#RadialGradient1)"
+          >
+            <animateMotion
+              repeatCount="indefinite"
+              dur="4s"
+              begin="2s"
+              :path="dotData.lineBottomRight"
+            />
+          </circle>
+          <!-- 图片和文字 -->
+
+          <!-- 市电 -->
+          <image
+            :xlink:href="configData.grid"
+            x="60"
+            y="20"
+            width="50"
+            height="70"
+          />
+          <!-- <text x="90" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text> -->
+
+          <!--  {{ $t("dashboard.load") }} -->
+          <image
+            :xlink:href="configData.house"
+            x="660"
+            y="20"
+            width="50"
+            height="70"
+          />
+          <!-- <text x="645" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.load") }}</text> -->
+
+          <!-- 1PV -->
+          <image
+            :xlink:href="frameImg"
+            x="145"
+            y="430"
+            width="50"
+            height="50"
+            style="cursor: pointer;"
+            @click="lookDeviceDetail('triad-pcs-left')"
+          />
+          <!-- DCDC -->
+          <image
+            :xlink:href="DCImg"
+            x="157"
+            y="330"
+            width="35"
+            height="35"
+          />
+          <!-- <text x="86" y="490" fill="#ffffff" font-size="14">1#{{ $t("dashboard.cabinet") }}</text> -->
+          <!-- 2PV -->
+          <!-- <image
+            :xlink:href="frameImg"
+            x="355"
+            y="430"
+            width="50"
+            height="50"
+            style="cursor: pointer;"
+            @click="lookDeviceDetail('triad-pcs-center')"
+          /> -->
+          <!-- DCDC -->
+          <!-- <image
+            :xlink:href="DCImg"
+            x="367"
+            y="330"
+            width="35"
+            height="35"
+          /> -->
+          <!-- <text x="360" y="490" fill="#ffffff" font-size="14">
+            2#{{ $t("dashboard.cabinet") }}
+          </text> -->
+          <!-- 3柜 -->
+          <image
+            :xlink:href="configData.pcs2"
+            x="574"
+            y="430"
+            width="50"
+            height="50"
+            style="cursor: pointer;"
+            @click="lookDeviceDetail('triad-pcs-right')"
+          />
+          <!-- <text x="614" y="490" fill="#ffffff" font-size="14">3#{{ $t("dashboard.cabinet") }}</text> -->
+
+          <!-- STS -->
+          <!-- <image
+            :xlink:href="STSImg"
+            x="365"
+            y="130"
+            width="40"
+            height="40"
+            style="cursor: pointer;"
+            @click="lookDeviceDetail('triad-sts-center')"
+          /> -->
+          <!-- AC/DC -->
+          <image
+            :xlink:href="ACDCImg"
+            x="368"
+            y="200"
+            width="35"
+            height="35"
+            style="cursor: pointer;"
+            @click="lookDeviceDetail('triad-acdc-center')"
+          />
+
+          <!-- {{ $t("dashboard.ammeter") }} -->
+          <image
+            :xlink:href="ammeterImg"
+            x="450"
+            y="80"
+            width="70"
+            height="42"
+            style="cursor: pointer;"
+            @click="lookDeviceDetail('triad-ammeter')"
+          />
+
+          <!-- 瞬时总有功 -->
+
+          <g v-for="(item,index) in ammeterData" :key="item.id">
+            <text x="520" :y="105 + ( 20 * index)" fill="#ffffff" font-size="14">
+              {{ item.name }}
+            </text>
+            <text :x="countChineseAndEnglishCharacters(item.name,510)" :y="105 + ( 20 * index)" fill="#FFB800" font-size="14">
+              {{ item.value }}
+            </text>
+          </g>
+
+          <!-- STS -->
+
+          <!-- <g v-for="(item,index) in stsCenterData" :key="item.id">
+            <text x="415" :y="153 + ( 20 * index)" fill="#ffffff" font-size="14">
+              {{ item.name }}
+            </text>
+            <text :x="countChineseAndEnglishCharacters(item.name,415)" :y="153 + ( 20 * index)" fill="#FFB800" font-size="14">
+              {{ item.value }}
+            </text>
+          </g> -->
+
+          <!-- ACDC -->
+
+          <g v-for="(item,index) in acdcCenterData" :key="item.id">
+            <text x="415" :y="213 + ( 20 * index)" fill="#ffffff" font-size="14">
+              {{ item.name }}
+            </text>
+            <text :x="countChineseAndEnglishCharacters(item.name,415)" :y="213 + ( 20 * index)" fill="#FFB800" font-size="14">
+              {{ item.value }}
+            </text>
+          </g>
+          <!-- 左侧 1PV -->
+          <g v-for="(item,index) in pcsLeftData" :key="item.id">
+            <text x="200" :y="450 + ( 20 * index)" fill="#ffffff" font-size="14">
+              {{ item.name }}
+            </text>
+            <text :x="countChineseAndEnglishCharacters(item.name,190)" :y="450 + ( 20 * index)" fill="#FFB800" font-size="14">
+              {{ item.value }}
+            </text>
+          </g>
+
+          <!-- 中间 2PV -->
+          <!-- <g v-for="(item,index) in pcsCenterData" :key="item.id">
+            <text x="410" :y="450 + ( 20 * index)" fill="#ffffff" font-size="14">
+              {{ item.name }}
+            </text>
+            <text :x="countChineseAndEnglishCharacters(item.name,390)" :y="450 + ( 20 * index)" fill="#FFB800" font-size="14">
+              {{ item.value }}
+            </text>
+          </g> -->
+
+          <!-- 右侧 3PCS -->
+          <g v-for="(item,index) in pcsRightData" :key="item.id">
+            <text x="622" :y="450 + ( 20 * index)" fill="#ffffff" font-size="14">
+              {{ item.name }}
+            </text>
+            <text :x="countChineseAndEnglishCharacters(item.name,622)" :y="450 + ( 20 * index)" fill="#FFB800" font-size="14">
+              {{ item.value }}
+            </text>
+          </g>
+
+        </svg>
+      </div>
+    </div>
+    <DispositionPointData
+      :disposition-show="show_point_dispostion"
+      :max="4"
+      :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/cabinet.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 config from './config'
+import { changeTheme } from '@/utils/index'
+import ACDCImg from '@/assets/images/wxjd/ACDC.png'
+import DCImg from '@/assets/images/wxjd/DC.png'
+import STSImg from '@/assets/images/wxjd/STS.png'
+export default {
+  name: 'Index',
+  props: {
+    stationType: {
+      type: Number,
+      default: 0
+    },
+    stationId: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      gridImg,
+      ammeterImg,
+      cabinetImg,
+      chargingPileImg,
+      distributionCabinetImg,
+      cangImg,
+      frameImg,
+      ACDCImg,
+      DCImg,
+      STSImg,
+      dotData: {
+        lineTop: 'M 0,0 0,0',
+        lineTopLeft: 'M 0,0 0,0',
+        lineBottomLeft: 'M 0,0 0,0 0,0',
+        lineBottomRight: 'M 0,0 0,0 0,0',
+        lineBottomLeftTwo: 'M 0,0 0,0 0,0',
+        lineBottomRightTwo: 'M 0,0 0,0 0,0'
+      },
+
+      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 }
+      ],
+      loading: false,
+      activePowerTotal: {},
+      show_point_dispostion: false,
+      pageLocation: '',
+      permissionId: null,
+      pcsLeftData: [],
+      pcsCenterData: [],
+      pcsRightData: [],
+      stsCenterData: [],
+      acdcCenterData: [],
+      ammeterData: [],
+      configData: {}
+
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+    const result = changeTheme()
+    this.configData = config[result]
+    console.log('配置' + JSON.stringify(this.configData))
+
+    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: {
+    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 * 11) + (obj.chineseCount * 16) + (obj.otherCount * 8) + x
+    },
+    lookDeviceDetail(val) { // 查看设备详情
+      this.pageLocation = val
+      this.show_point_dispostion = true
+    },
+    closePoint() {
+      this.show_point_dispostion = false
+    },
+    async getpcsCenter() {
+      this.loading = true
+      try {
+        const res = await DynamicConfigPoint({
+          pageLocation: 'triad-pcs-center',
+          permissionId: this.permissionId,
+          stationId: this.stationId })
+        this.pcsCenterData = res.data
+      } catch (error) {
+        // console.log(error);
+      } finally {
+        this.loading = false
+      }
+    },
+    // async getstsCenter() {
+    //   this.loading = true
+    //   try {
+    //     const res = await DynamicConfigPoint({
+    //       pageLocation: 'triad-sts-center',
+    //       permissionId: this.permissionId,
+    //       stationId: this.stationId })
+    //     this.stsCenterData = res.data
+    //   } catch (error) {
+    //     // console.log(error);
+    //   } finally {
+    //     this.loading = false
+    //   }
+    // },
+    async getacdcCenter() {
+      this.loading = true
+      try {
+        const res = await DynamicConfigPoint({
+          pageLocation: 'triad-acdc-center',
+          permissionId: this.permissionId,
+          stationId: this.stationId })
+        this.acdcCenterData = res.data
+      } catch (error) {
+        // console.log(error);
+      } finally {
+        this.loading = false
+      }
+    },
+    async getLineStatus(type) {
+      this.loading = true
+      try {
+        const res = await DynamicConfigPoint({
+          pageLocation: type,
+          permissionId: this.permissionId,
+          stationId: this.stationId })
+        if (type === 'line-bottom-left') {
+          if (res.data?.length) {
+            if (res.data[0].value > 0) {
+              this.dotData.lineBottomLeft = 'M 283,0, 280, 0, 0 ,0'
+            } else if (res.data[0].value < 0) {
+              this.dotData.lineBottomLeft = 'M 0,0 281,0 281,0'
+            } else {
+              this.dotData.lineBottomLeft = ''
+            }
+          } else {
+            this.dotData.lineBottomLeft = ''
+          }
+        } else if (type === 'line-bottom-right') {
+          if (res.data?.length) {
+            if (res.data[0].value > 0) {
+              this.dotData.lineBottomRight = 'M -271, 0 , -271 , 0 , 0 , 0'
+            } else if (res.data[0].value < 0) {
+              this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,0'
+            } else {
+              this.dotData.lineBottomRight = ''
+            }
+          } else {
+            this.dotData.lineBottomRight = ''
+          }
+        } else if (type === 'line-bottom-center') {
+          if (res.data?.length) {
+            if (res.data[0].value > 0) {
+              this.dotData.lineCenter = 'M 0,-283,0,0,0,0'
+            } else if (res.data[0].value < 0) {
+              this.dotData.lineCenter = 'M 0,0,0,0,0,-283'
+            } else {
+              this.dotData.lineCenter = ''
+            }
+          } else {
+            this.dotData.lineCenter = ''
+          }
+        } else if (type === 'line-top-left') {
+          if (res.data?.length) {
+            if (res.data[0].value > 0) {
+              this.dotData.lineTopLeft = 'M 230,0 0,0'
+            } else if (res.data[0].value < 0) {
+              this.dotData.lineTopLeft = 'M 0,0 225,0'
+            } else {
+              this.dotData.lineTopLeft = ''
+            }
+          } else {
+            this.dotData.lineTopLeft = ''
+          }
+        } else if (type === 'line-top-right') {
+          if (res.data?.length) {
+            if (res.data[0].value > 0) {
+              this.dotData.lineTopRight = 'M -230,0 0,0'
+            } else if (res.data[0].value < 0) {
+              this.dotData.lineTopRight = 'M 0,0 -225,0'
+            } else {
+              this.dotData.lineTopRight = ''
+            }
+          } else {
+            this.dotData.lineTopRight = ''
+          }
+        }
+      } catch (error) {
+        // console.log(error);
+      } finally {
+        this.loading = false
+      }
+    },
+    async getpcsLeft() {
+      this.loading = true
+      try {
+        const res = await DynamicConfigPoint({
+          pageLocation: 'triad-pcs-left',
+          permissionId: this.permissionId,
+          stationId: this.stationId })
+        this.pcsLeftData = res.data
+      } catch (error) {
+        // console.log(error);
+      } finally {
+        this.loading = false
+      }
+    },
+    async getammeter() {
+      this.loading = true
+      try {
+        const res = await DynamicConfigPoint({
+          pageLocation: 'triad-ammeter',
+          permissionId: this.permissionId,
+          stationId: this.stationId })
+        this.ammeterData = res.data
+      } catch (error) {
+        // console.log(error);
+      } finally {
+        this.loading = false
+      }
+    },
+    async getpcsRight() {
+      this.loading = true
+      try {
+        const res = await DynamicConfigPoint({
+          pageLocation: 'triad-pcs-right',
+          permissionId: this.permissionId,
+          stationId: this.stationId })
+        this.pcsRightData = res.data
+      } catch (error) {
+        // console.log(error);
+      } finally {
+        this.loading = false
+      }
+    },
+
+    getData() {
+      this.getpcsRight()
+      this.getpcsCenter()
+      // this.getstsCenter()
+      this.getacdcCenter()
+      this.getpcsLeft()
+      this.getammeter()
+      this.getLineStatus('line-bottom-left')
+      this.getLineStatus('line-bottom-center')
+      this.getLineStatus('line-bottom-right')
+      this.getLineStatus('line-top-left')
+      this.getLineStatus('line-top-right')
+      this.$forceUpdate()
+    },
+    getDynamicPointData() {
+      this.getData()
+    }
+
+  }
+}
+</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>
diff --git a/src/views/dashboardtest/components/top-center/pv2storage261.vue b/src/views/dashboardtest/components/top-center/pv2storage261.vue
new file mode 100644
index 0000000..460c5e5
--- /dev/null
+++ b/src/views/dashboardtest/components/top-center/pv2storage261.vue
@@ -0,0 +1,748 @@
+<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 500"
+        >
+          <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="120,50 650,50"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-dasharray="3 3"
+          />
+          <!-- <rect
+            x="154"
+            y="78"
+            width="231"
+            height="4"
+            :style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
+            @click="lookDeviceDetail('line-top-left')"
+          /> -->
+          <!-- <polyline
+            points="385,80 600,80"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-dasharray="3 3"
+          /> -->
+          <!-- <rect
+            x="385"
+            y="78"
+            width="215"
+            height="4"
+            :style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
+            @click="lookDeviceDetail('line-top-right')"
+          /> -->
+
+          <!-- center -->
+          <polyline
+            points="385,50 385,417"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-dasharray="3 3"
+          />
+          <!-- <rect
+            x="383"
+            y="80"
+            width="4"
+            height="281"
+            :style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
+            @click="lookDeviceDetail('line-bottom-center')"
+          /> -->
+
+          <polyline
+            points="385,100 460,100"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-dasharray="3 3"
+          />
+
+          <!-- bottom -->
+          <polyline
+            points="175,283 385,283"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-dasharray="3 3"
+          />
+          <polyline
+            points="175,283 175,417"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-dasharray="3 3"
+          />
+          <!-- <rect
+            x="104"
+            y="361"
+            width="283"
+            height="4"
+            :style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
+            @click="lookDeviceDetail('line-bottom-left')"
+          /> -->
+
+          <polyline
+            points="385,283 603,283"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-dasharray="3 3"
+          />
+          <polyline
+            points="603,283 603,417"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-dasharray="3 3"
+          />
+          <!-- <rect
+            x="383"
+            y="361"
+            width="272"
+            height="4"
+            :style="{ fill: 'rgba(100,100,100,0)', stroke: 'transparent',cursor: 'pointer' }"
+            @click="lookDeviceDetail('line-bottom-right')"
+          /> -->
+          <!-- top -->
+          <circle
+            cx="120"
+            cy="50"
+            r="8"
+            style="stroke: none; fill: url(#RadialGradient1)"
+          />
+          <circle
+            cx="650"
+            cy="50"
+            r="8"
+            style="stroke: none; fill: url(#RadialGradient1)"
+          />
+
+          <!-- 动点 -->
+          <circle
+            cx="120"
+            cy="50"
+            r="8"
+            style="stroke: none; fill: url(#RadialGradient1)"
+          >
+            <animateMotion
+              repeatCount="indefinite"
+              dur="4s"
+              begin="0s"
+              :path="dotData.lineTopLeft"
+            />
+          </circle>
+          <circle
+            cx="385"
+            cy="417"
+            r="8"
+            style="stroke: none; fill: url(#RadialGradient1)"
+          >
+            <animateMotion
+              repeatCount="indefinite"
+              dur="4s"
+              begin="2s"
+              :path="dotData.lineCenter"
+            />
+          </circle>
+          <circle
+            cx="650"
+            cy="50"
+            r="8"
+            style="stroke: none; fill: url(#RadialGradient1)"
+          >
+            <animateMotion
+              repeatCount="indefinite"
+              dur="4s"
+              begin="0s"
+              :path="dotData.lineTopRight"
+            />
+          </circle>
+
+          <!-- bottom -->
+          <circle
+            cx="175"
+            cy="417"
+            r="8"
+            style="stroke: none; fill: url(#RadialGradient1)"
+          />
+          <circle
+            cx="385"
+            cy="417"
+            r="8"
+            style="stroke: none; fill: url(#RadialGradient1)"
+          />
+          <circle
+            cx="603"
+            cy="417"
+            r="8"
+            style="stroke: none; fill: url(#RadialGradient1)"
+          />
+
+          <circle
+            cx="385"
+            cy="417"
+            r="8"
+            style="stroke: none; fill: url(#RadialGradient1)"
+          />
+
+          <circle
+            cx="175"
+            cy="417"
+            r="8"
+            style="stroke: none; fill: url(#RadialGradient1)"
+          >
+            <animateMotion
+              repeatCount="indefinite"
+              dur="4s"
+              begin="2s"
+              :path="dotData.lineBottomLeft"
+            />
+          </circle>
+
+          <circle
+            cx="603"
+            cy="417"
+            r="8"
+            style="stroke: none; fill: url(#RadialGradient1)"
+          >
+            <animateMotion
+              repeatCount="indefinite"
+              dur="4s"
+              begin="2s"
+              :path="dotData.lineBottomRight"
+            />
+          </circle>
+          <!-- 图片和文字 -->
+
+          <!-- 市电 -->
+          <image
+            :xlink:href="configData.grid"
+            x="60"
+            y="20"
+            width="50"
+            height="70"
+          />
+          <!-- <text x="90" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.grid") }}</text> -->
+
+          <!--  {{ $t("dashboard.load") }} -->
+          <image
+            :xlink:href="configData.house"
+            x="660"
+            y="20"
+            width="50"
+            height="70"
+          />
+          <!-- <text x="645" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.load") }}</text> -->
+
+          <!-- 1PV -->
+          <image
+            :xlink:href="frameImg"
+            x="145"
+            y="430"
+            width="50"
+            height="50"
+            style="cursor: pointer;"
+            @click="lookDeviceDetail('triad-pcs-left')"
+          />
+          <!-- DCDC -->
+          <image
+            :xlink:href="DCImg"
+            x="157"
+            y="330"
+            width="35"
+            height="35"
+          />
+          <!-- <text x="86" y="490" fill="#ffffff" font-size="14">1#{{ $t("dashboard.cabinet") }}</text> -->
+          <!-- 2PV -->
+          <image
+            :xlink:href="frameImg"
+            x="355"
+            y="430"
+            width="50"
+            height="50"
+            style="cursor: pointer;"
+            @click="lookDeviceDetail('triad-pcs-center')"
+          />
+          <!-- DCDC -->
+          <image
+            :xlink:href="DCImg"
+            x="367"
+            y="330"
+            width="35"
+            height="35"
+          />
+          <!-- <text x="360" y="490" fill="#ffffff" font-size="14">
+            2#{{ $t("dashboard.cabinet") }}
+          </text> -->
+          <!-- 3柜 -->
+          <image
+            :xlink:href="configData.pcs2"
+            x="574"
+            y="430"
+            width="50"
+            height="50"
+            style="cursor: pointer;"
+            @click="lookDeviceDetail('triad-pcs-right')"
+          />
+          <!-- <text x="614" y="490" fill="#ffffff" font-size="14">3#{{ $t("dashboard.cabinet") }}</text> -->
+
+          <!-- STS -->
+          <image
+            :xlink:href="STSImg"
+            x="365"
+            y="130"
+            width="40"
+            height="40"
+            style="cursor: pointer;"
+            @click="lookDeviceDetail('triad-sts-center')"
+          />
+          <!-- AC/DC -->
+          <image
+            :xlink:href="ACDCImg"
+            x="368"
+            y="200"
+            width="35"
+            height="35"
+            style="cursor: pointer;"
+            @click="lookDeviceDetail('triad-acdc-center')"
+          />
+
+          <!-- {{ $t("dashboard.ammeter") }} -->
+          <image
+            :xlink:href="ammeterImg"
+            x="450"
+            y="80"
+            width="70"
+            height="42"
+            style="cursor: pointer;"
+            @click="lookDeviceDetail('triad-ammeter')"
+          />
+
+          <!-- 瞬时总有功 -->
+
+          <g v-for="(item,index) in ammeterData" :key="item.id">
+            <text x="520" :y="105 + ( 20 * index)" fill="#ffffff" font-size="14">
+              {{ item.name }}
+            </text>
+            <text :x="countChineseAndEnglishCharacters(item.name,510)" :y="105 + ( 20 * index)" fill="#FFB800" font-size="14">
+              {{ item.value }}
+            </text>
+          </g>
+
+          <!-- STS -->
+
+          <g v-for="(item,index) in stsCenterData" :key="item.id">
+            <text x="415" :y="153 + ( 20 * index)" fill="#ffffff" font-size="14">
+              {{ item.name }}
+            </text>
+            <text :x="countChineseAndEnglishCharacters(item.name,415)" :y="153 + ( 20 * index)" fill="#FFB800" font-size="14">
+              {{ item.value }}
+            </text>
+          </g>
+
+          <!-- ACDC -->
+
+          <g v-for="(item,index) in acdcCenterData" :key="item.id">
+            <text x="415" :y="213 + ( 20 * index)" fill="#ffffff" font-size="14">
+              {{ item.name }}
+            </text>
+            <text :x="countChineseAndEnglishCharacters(item.name,415)" :y="213 + ( 20 * index)" fill="#FFB800" font-size="14">
+              {{ item.value }}
+            </text>
+          </g>
+          <!-- 左侧 1PV -->
+          <g v-for="(item,index) in pcsLeftData" :key="item.id">
+            <text x="200" :y="450 + ( 20 * index)" fill="#ffffff" font-size="14">
+              {{ item.name }}
+            </text>
+            <text :x="countChineseAndEnglishCharacters(item.name,180)" :y="450 + ( 20 * index)" fill="#FFB800" font-size="14">
+              {{ item.value }}
+            </text>
+          </g>
+
+          <!-- 中间 2PV -->
+          <g v-for="(item,index) in pcsCenterData" :key="item.id">
+            <text x="410" :y="450 + ( 20 * index)" fill="#ffffff" font-size="14">
+              {{ item.name }}
+            </text>
+            <text :x="countChineseAndEnglishCharacters(item.name,390)" :y="450 + ( 20 * index)" fill="#FFB800" font-size="14">
+              {{ item.value }}
+            </text>
+          </g>
+
+          <!-- 右侧 3PCS -->
+          <g v-for="(item,index) in pcsRightData" :key="item.id">
+            <text x="622" :y="450 + ( 20 * index)" fill="#ffffff" font-size="14">
+              {{ item.name }}
+            </text>
+            <text :x="countChineseAndEnglishCharacters(item.name,622)" :y="450 + ( 20 * index)" fill="#FFB800" font-size="14">
+              {{ item.value }}
+            </text>
+          </g>
+
+        </svg>
+      </div>
+    </div>
+    <DispositionPointData
+      :disposition-show="show_point_dispostion"
+      :max="4"
+      :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/cabinet.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 config from './config'
+import { changeTheme } from '@/utils/index'
+import ACDCImg from '@/assets/images/wxjd/ACDC.png'
+import DCImg from '@/assets/images/wxjd/DC.png'
+import STSImg from '@/assets/images/wxjd/STS.png'
+export default {
+  name: 'Index',
+  props: {
+    stationType: {
+      type: Number,
+      default: 0
+    },
+    stationId: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      gridImg,
+      ammeterImg,
+      cabinetImg,
+      chargingPileImg,
+      distributionCabinetImg,
+      cangImg,
+      frameImg,
+      ACDCImg,
+      DCImg,
+      STSImg,
+      dotData: {
+        lineTop: 'M 0,0 0,0',
+        lineTopLeft: 'M 0,0 0,0',
+        lineBottomLeft: 'M 0,0 0,0 0,0',
+        lineBottomRight: 'M 0,0 0,0 0,0',
+        lineBottomLeftTwo: 'M 0,0 0,0 0,0',
+        lineBottomRightTwo: 'M 0,0 0,0 0,0'
+      },
+
+      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 }
+      ],
+      loading: false,
+      activePowerTotal: {},
+      show_point_dispostion: false,
+      pageLocation: '',
+      permissionId: null,
+      pcsLeftData: [],
+      pcsCenterData: [],
+      pcsRightData: [],
+      stsCenterData: [],
+      acdcCenterData: [],
+      ammeterData: [],
+      configData: {}
+
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+    const result = changeTheme()
+    this.configData = config[result]
+    console.log('配置' + JSON.stringify(this.configData))
+
+    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: {
+    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 * 11) + (obj.chineseCount * 16) + (obj.otherCount * 8) + x
+    },
+    lookDeviceDetail(val) { // 查看设备详情
+      this.pageLocation = val
+      this.show_point_dispostion = true
+    },
+    closePoint() {
+      this.show_point_dispostion = false
+    },
+    async getpcsCenter() {
+      this.loading = true
+      try {
+        const res = await DynamicConfigPoint({
+          pageLocation: 'triad-pcs-center',
+          permissionId: this.permissionId,
+          stationId: this.stationId })
+        this.pcsCenterData = res.data
+      } catch (error) {
+        // console.log(error);
+      } finally {
+        this.loading = false
+      }
+    },
+    async getstsCenter() {
+      this.loading = true
+      try {
+        const res = await DynamicConfigPoint({
+          pageLocation: 'triad-sts-center',
+          permissionId: this.permissionId,
+          stationId: this.stationId })
+        this.stsCenterData = res.data
+      } catch (error) {
+        // console.log(error);
+      } finally {
+        this.loading = false
+      }
+    },
+    async getacdcCenter() {
+      this.loading = true
+      try {
+        const res = await DynamicConfigPoint({
+          pageLocation: 'triad-acdc-center',
+          permissionId: this.permissionId,
+          stationId: this.stationId })
+        this.acdcCenterData = res.data
+      } catch (error) {
+        // console.log(error);
+      } finally {
+        this.loading = false
+      }
+    },
+    async getLineStatus(type) {
+      this.loading = true
+      try {
+        const res = await DynamicConfigPoint({
+          pageLocation: type,
+          permissionId: this.permissionId,
+          stationId: this.stationId })
+        if (type === 'line-bottom-left') {
+          if (res.data?.length) {
+            if (res.data[0].value > 0) {
+              this.dotData.lineBottomLeft = 'M 283,0, 280, 0, 0 ,0'
+            } else if (res.data[0].value < 0) {
+              this.dotData.lineBottomLeft = 'M 0,0 281,0 281,0'
+            } else {
+              this.dotData.lineBottomLeft = ''
+            }
+          } else {
+            this.dotData.lineBottomLeft = ''
+          }
+        } else if (type === 'line-bottom-right') {
+          if (res.data?.length) {
+            if (res.data[0].value > 0) {
+              this.dotData.lineBottomRight = 'M -271, 0 , -271 , 0 , 0 , 0'
+            } else if (res.data[0].value < 0) {
+              this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,0'
+            } else {
+              this.dotData.lineBottomRight = ''
+            }
+          } else {
+            this.dotData.lineBottomRight = ''
+          }
+        } else if (type === 'line-bottom-center') {
+          if (res.data?.length) {
+            if (res.data[0].value > 0) {
+              this.dotData.lineCenter = 'M 0,-283,0,0,0,0'
+            } else if (res.data[0].value < 0) {
+              this.dotData.lineCenter = 'M 0,0,0,0,0,-283'
+            } else {
+              this.dotData.lineCenter = ''
+            }
+          } else {
+            this.dotData.lineCenter = ''
+          }
+        } else if (type === 'line-top-left') {
+          if (res.data?.length) {
+            if (res.data[0].value > 0) {
+              this.dotData.lineTopLeft = 'M 230,0 0,0'
+            } else if (res.data[0].value < 0) {
+              this.dotData.lineTopLeft = 'M 0,0 225,0'
+            } else {
+              this.dotData.lineTopLeft = ''
+            }
+          } else {
+            this.dotData.lineTopLeft = ''
+          }
+        } else if (type === 'line-top-right') {
+          if (res.data?.length) {
+            if (res.data[0].value > 0) {
+              this.dotData.lineTopRight = 'M -230,0 0,0'
+            } else if (res.data[0].value < 0) {
+              this.dotData.lineTopRight = 'M 0,0 -225,0'
+            } else {
+              this.dotData.lineTopRight = ''
+            }
+          } else {
+            this.dotData.lineTopRight = ''
+          }
+        }
+      } catch (error) {
+        // console.log(error);
+      } finally {
+        this.loading = false
+      }
+    },
+    async getpcsLeft() {
+      this.loading = true
+      try {
+        const res = await DynamicConfigPoint({
+          pageLocation: 'triad-pcs-left',
+          permissionId: this.permissionId,
+          stationId: this.stationId })
+        this.pcsLeftData = res.data
+      } catch (error) {
+        // console.log(error);
+      } finally {
+        this.loading = false
+      }
+    },
+    async getammeter() {
+      this.loading = true
+      try {
+        const res = await DynamicConfigPoint({
+          pageLocation: 'triad-ammeter',
+          permissionId: this.permissionId,
+          stationId: this.stationId })
+        this.ammeterData = res.data
+      } catch (error) {
+        // console.log(error);
+      } finally {
+        this.loading = false
+      }
+    },
+    async getpcsRight() {
+      this.loading = true
+      try {
+        const res = await DynamicConfigPoint({
+          pageLocation: 'triad-pcs-right',
+          permissionId: this.permissionId,
+          stationId: this.stationId })
+        this.pcsRightData = res.data
+      } catch (error) {
+        // console.log(error);
+      } finally {
+        this.loading = false
+      }
+    },
+
+    getData() {
+      this.getpcsRight()
+      this.getpcsCenter()
+      this.getstsCenter()
+      this.getacdcCenter()
+      this.getpcsLeft()
+      this.getammeter()
+      this.getLineStatus('line-bottom-left')
+      this.getLineStatus('line-bottom-center')
+      this.getLineStatus('line-bottom-right')
+      this.getLineStatus('line-top-left')
+      this.getLineStatus('line-top-right')
+      this.$forceUpdate()
+    },
+    getDynamicPointData() {
+      this.getData()
+    }
+
+  }
+}
+</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>
diff --git a/src/views/dashboardtest/index.vue b/src/views/dashboardtest/index.vue
index 7f4602d..982b13b 100644
--- a/src/views/dashboardtest/index.vue
+++ b/src/views/dashboardtest/index.vue
@@ -158,6 +158,9 @@ import dispositionBottomRight from './components/bottom-right/disposition.vue'
 import { getDashboard } from '@/api/station/maintain'
 import { queryElecMeterConfig } from '@/api/home-page/index'
 
+import pv1AndStorage_261 from './components/top-center/pv1storage261.vue'
+import pv2AndStorage_261 from './components/top-center/pv2storage261.vue'
+
 export default {
   name: 'Index',
   components: {
@@ -200,8 +203,9 @@ export default {
     dispositionBottomRight,
     controlTopRight,
     secondDispositionTopCenter,
-    tenthTopCenter
-
+    tenthTopCenter,
+    pv1AndStorage_261,
+    pv2AndStorage_261
   },
   props: {},
   data() {
diff --git a/src/views/system/department/select.js b/src/views/system/department/select.js
index fa71ca3..0b1c032 100644
--- a/src/views/system/department/select.js
+++ b/src/views/system/department/select.js
@@ -13,7 +13,8 @@ const leftBottomList = [
 ]
 const topCenterList = [
   { label: '215kWh', value: 'topCenter_215' },
-  { label: '261光储', value: 'gunanjieTopCenter' },
+  { label: '261光储1', value: 'pv1AndStorage_261' },
+  { label: '261光储2', value: 'pv2AndStorage_261' },
   { label: '标准', value: 'commonTopCenter' },
   { label: '单柜配置', value: 'onceTopCenter' },
   { label: '二合一', value: 'secondTopCenter' },