From a6e38185b589cb5439b20dbe04a22c25f1876f79 Mon Sep 17 00:00:00 2001
From: Shang Chen <shangchen@0121.com>
Date: Tue, 8 Jul 2025 09:35:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AD=E8=87=AA120=E6=B1=87=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |  12 +
 .../components/bottom-left/index.vue          | 289 ++++++
 .../components/bottom-right/index.vue         | 293 ++++++
 .../components/itemBox/index.vue              | 370 ++++++++
 .../components/itemBox/position.vue           | 207 +++++
 .../components/top-left/index.vue             | 787 ++++++++++++++++
 .../components/top-right/index.vue            | 612 +++++++++++++
 .../components/topology/index.vue             | 845 ++++++++++++++++++
 src/views/dashboard-zhongzi/index.vue         | 169 ++++
 9 files changed, 3584 insertions(+)
 create mode 100644 src/views/dashboard-zhongzi/components/bottom-left/index.vue
 create mode 100644 src/views/dashboard-zhongzi/components/bottom-right/index.vue
 create mode 100644 src/views/dashboard-zhongzi/components/itemBox/index.vue
 create mode 100644 src/views/dashboard-zhongzi/components/itemBox/position.vue
 create mode 100644 src/views/dashboard-zhongzi/components/top-left/index.vue
 create mode 100644 src/views/dashboard-zhongzi/components/top-right/index.vue
 create mode 100644 src/views/dashboard-zhongzi/components/topology/index.vue
 create mode 100644 src/views/dashboard-zhongzi/index.vue

diff --git a/src/router/index.js b/src/router/index.js
index b6f4bf5..92501d0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -99,6 +99,18 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/dashboard-zhongzi',
+    component: Layout,
+    children: [
+      {
+        path: 'dashboard-zhongzi',
+        component: () => import('@/views/dashboard-zhongzi/index.vue'),
+        name: 'dashboard-zhongzi',
+        meta: { title: 'dashboard-zhongzi', icon: 'dashboard', affix: true }
+      }
+    ]
+  },
 
   { path: '*', redirect: '/404', hidden: true }
 ]
diff --git a/src/views/dashboard-zhongzi/components/bottom-left/index.vue b/src/views/dashboard-zhongzi/components/bottom-left/index.vue
new file mode 100644
index 0000000..330ecdf
--- /dev/null
+++ b/src/views/dashboard-zhongzi/components/bottom-left/index.vue
@@ -0,0 +1,289 @@
+<template>
+  <div class="bottom-left-wrapper">
+    <itemBox :title="$t('dashboard.chargingDischarging')">
+      <div slot="header">
+        <div class="header-right-box">
+          <div class="header-title" :class="{'active':currentType === 'day'}" @click="selectTime('day')">{{ $t('dashboard.sevenDay') }}</div>
+          <div class="header-title" :class="{'active':currentType === 'month'}" @click="selectTime('month')">{{ $t('dashboard.monthDay') }}</div>
+          <div class="header-title" :class="{'active':currentType === 'year'}" @click="selectTime('year')">{{ $t('dashboard.yearDay') }}</div>
+        </div>
+      </div>
+      <div v-loading="loading" class="charts-box">
+        <Chart :options="powerOptions" :class-name="'chart'" />
+      </div>
+    </itemBox>
+  </div>
+</template>
+
+<script>
+import itemBox from '../itemBox/index.vue'
+import * as echarts from 'echarts'
+import { GetPCSElecData } from '@/api/home-page/index'
+import { GetIncomeData } from '@/api/home-page/index'
+
+export default {
+  name: 'Index',
+  components: { itemBox },
+  props: {
+    stationId: {
+      type: Number,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      powerOptions: undefined,
+      currentType: 'day',
+      x_data: [],
+      charge_data: [],
+      discharge_data: [],
+      benefit_data: [],
+      color: ['#00b7ec', '#FFB800', '#ffb800'],
+      loading: false
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    // this.initCharts()
+  },
+  methods: {
+    selectTime(type) {
+      this.currentType = type
+      this.getData()
+    },
+    getData() {
+      this.getElecData()
+      // this.getIncomeData()
+    },
+    async getElecData() {
+      this.loading = true
+      const params = {
+        stationId: this.stationId,
+        type: this.currentType
+      }
+      try {
+        const res = await GetPCSElecData(params)
+        this.initCharts(res.data, 1)
+      } catch (error) {
+        // console.log(error)
+      } finally {
+        this.loading = false
+      }
+    },
+    async getIncomeData() {
+      const params = {
+        stationId: this.stationId,
+        type: this.currentType
+      }
+      const res = await GetIncomeData(params)
+      this.initCharts(res.data, 2)
+    },
+    initCharts(val, type) {
+      const self = this
+
+      if (val && val.length > 0) {
+        self.x_data = []
+        self.charge_data = []
+        self.discharge_data = []
+
+        if (type === 1) {
+          self.x_data = []
+          self.charge_data = []
+          self.discharge_data = []
+          val.forEach(item => {
+            self.x_data.push(item.date)
+            self.charge_data.push(item.chargeElec)
+            self.discharge_data.push(item.dischargeElec)
+          })
+        } else {
+          self.benefit_data = []
+          val.forEach(item => {
+            self.benefit_data.push(item.data)
+          })
+        }
+      }
+      this.powerOptions = {
+        grid: {
+          top: '25%',
+          left: '10%',
+          right: '10%',
+          bottom: '5%',
+          containLabel: true
+        },
+        legend: {},
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0,0,0,0,)',
+          borderColor: 'rgba(0,0,0,0,);',
+          borderWidth: 0,
+          textStyle: {
+            width: 160,
+            height: 250,
+            lineHeight: 24,
+            color: '#ffffff',
+            fontSize: '14',
+            fontFamily: 'SourceHanSansCN-Normal'
+          },
+          formatter: params => {
+            // 获取xAxis data中的数据
+            let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
+            params.forEach(item => {
+              dataStr += `<div>
+                    <div style="margin: 0 8px;">
+                      <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${this.color[item.componentIndex]};"></span>
+                      <span>${item.seriesName}</span>
+                      <span style="float:right;color:#00C8FF;margin-left:20px;">${item.data}</span>
+                    </div>
+                  </div>`
+            })
+            const div = `<div style='border: 1px solid ;
+border-image: linear-gradient(130deg, #FFFFFF 0%, rgba(201,255,243,0.00) 22%, rgba(201,255,243,0.00) 75%, rgba(201,255,243,0.00) 80%, #FFFFFF 99%, #FFFFFF 99%) 1;
+box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.4);' >${dataStr}</div>`
+            return div
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: self.x_data,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#90e9d8'
+              }
+            },
+            axisLabel: {
+              show: true,
+              color: '#CEEBFF'
+            },
+
+            axisTick: {
+              show: false
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: `${this.$t('dashboard.chargingandDischarging')}(kWh)`,
+            nameTextStyle: {
+              color: ' rgba(255, 255, 255, 0.5)'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#90e9d8'
+              }
+            },
+            axisLabel: {
+              show: true,
+              color: '#CEEBFF'
+            },
+
+            axisTick: {
+              show: false
+            }
+          }
+          // {
+          //   type: 'value',
+          //   name: '收益(万元)',
+          //   nameTextStyle: {
+          //     color: '#FFB800'
+          //   },
+          //   axisLine: {
+          //     show: false,
+          //     lineStyle: {
+          //       color: '#FFB800'
+          //     }
+          //   },
+          //   axisLabel: {
+          //     show: true,
+          //     color: '#FFB800'
+          //   },
+
+          //   axisTick: {
+          //     show: false
+          //   }
+          // }
+        ],
+        series: [
+          {
+            name: `${this.$t('dashboard.charging')}`,
+            type: 'bar',
+            data: self.charge_data,
+            // barWidth: 14, // 柱状图的宽度
+            color: '#00C8FF',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(0,200,255,0.90)' },
+                { offset: 1, color: 'rgba(0, 200, 255, 0.0)' }
+              ])
+            }
+          },
+          {
+            name: `${this.$t('dashboard.disCharging')}`,
+            type: 'bar',
+            data: self.discharge_data,
+            // barWidth: 14, // 柱状图的宽度
+            color: '#CEEBFF',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(255, 184, 0,0.90)' },
+                { offset: 1, color: 'rgba(255, 184, 0,0.00)' }
+              ])
+            }
+          }
+          // {
+          //   name: '收益',
+          //   type: 'line',
+          //   yAxisIndex: 1,
+          //   data: self.benefit_data,
+          //   color: '#FFB800',
+          //   itemStyle: {
+          //     normal: {
+          //       lineStyle: {
+          //         width: 2
+          //       }
+          //     }
+          //   }
+          // }
+        ]
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.bottom-left-wrapper {
+  width: 100%;
+  height: 100%;
+
+  .header-right-box {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .header-title {
+      white-space: nowrap;
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: 0em;
+      color: rgba(206, 235, 255, 0.5);
+      padding:  0 10px;
+      cursor: pointer;
+      font-family: HYQY;
+
+      &.active{
+        color: #ffffff;
+        background: linear-gradient(90deg, rgba(0,148,255,0.00) 0%, rgba(0,148,255,0.43) 51%, rgba(0,148,255,0.00) 99%);
+      }
+    }
+  }
+}
+.charts-box {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/dashboard-zhongzi/components/bottom-right/index.vue b/src/views/dashboard-zhongzi/components/bottom-right/index.vue
new file mode 100644
index 0000000..7051aef
--- /dev/null
+++ b/src/views/dashboard-zhongzi/components/bottom-right/index.vue
@@ -0,0 +1,293 @@
+<template>
+  <div class="bottom-left-wrapper">
+    <itemBox title="运行曲线" :show-curve-setting="true" @handleSetting="handleSetting">
+      <div v-loading="loading" class="charts-box">
+        <Chart :options="runOptions" :class-name="'chart'" />
+
+      </div>
+    </itemBox>
+  </div>
+</template>
+
+<script>
+import itemBox from '../itemBox/index.vue'
+import Chart from '@/components/Charts'
+import { GetDynamicRealtimeCurve } from '@/api/home-page/index'
+import * as echarts from 'echarts'
+import { chartYIndex } from '@/utils/index'
+
+export default {
+  name: 'Index',
+  components: { itemBox, Chart },
+  props: {
+    stationId: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      runOptions: undefined,
+      serviceList: [],
+      nameArr: [],
+      color: [],
+      color2: [[{
+        offset: 0.0,
+        color: 'rgba(206, 235, 255, 0.1)'
+      },
+      {
+        offset: 1,
+        color: 'rgba(206, 235, 255, 0.2)'
+      }], [
+        {
+          offset: 0.0,
+          color: 'rgba(255, 184, 0, 0.1)'
+        },
+        {
+          offset: 1,
+          color: 'rgba(255, 184, 0, 0.2)'
+        }
+      ]],
+      loading: false,
+      permissionId: null
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+  },
+  mounted() {
+    // this.initCharts()
+  },
+  methods: {
+    handleSetting() {
+      this.$emit('handleSetting')
+    },
+    async getData() {
+      if (this.$store.getters.menuList.length) {
+        this.permissionId = this.$store.getters.menuList.find(item => {
+          return item.url === this.$route.path
+        }).id
+      }
+      this.loading = true
+      const params = {
+        stationId: this.stationId,
+        pageLocation: 'runChart',
+        permissionId: this.permissionId
+      }
+      try {
+        const res = await GetDynamicRealtimeCurve(params)
+        if (res.data) {
+          this.initCharts(res.data)
+        }
+      } catch (error) {
+        // console.log(error)
+      } finally {
+        this.loading = false
+      }
+    },
+    initCharts(val) {
+      const x_data = []
+      const valueArr = []
+      this.nameArr = []
+      if (val && val.length > 0) {
+        val.forEach((item, index) => {
+          valueArr.push(item.list)
+          this.nameArr.push(item.name)
+        })
+        val[0].list.forEach((el) => {
+          x_data.push(el.date)
+        })
+        const valueArr2 = []
+        valueArr.forEach((item, index) => {
+          const arr = []
+          item.forEach((item2, index2) => {
+            arr.push(item2.digital)
+            valueArr2[index] = arr
+          })
+        })
+        this.serviceList = []
+        valueArr2.forEach((item, index) => {
+          this.serviceList.push({
+            data: item,
+            type: 'line',
+            name: this.nameArr[index],
+            showSymbol: false,
+            yAxisIndex: chartYIndex(val[index]),
+            color: this.color[index],
+            lineStyle: {
+              color: this.color[index]
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, this.color2[index])
+            }
+          })
+        })
+        this.runOptions = {
+          grid: {
+            top: '25%',
+            left: '5%',
+            right: '3%',
+            bottom: '5%',
+            containLabel: true
+          },
+          tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(0,0,0,0,)',
+            borderColor: 'rgba(0,0,0,0,);',
+            borderWidth: 0,
+            textStyle: {
+              width: 160,
+              height: 250,
+              lineHeight: 24,
+              color: '#ffffff',
+              fontSize: '14',
+              fontFamily: 'SourceHanSansCN-Normal'
+            },
+            formatter: params => {
+            // 获取xAxis data中的数据
+              let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
+              params.forEach(item => {
+                dataStr += `<div>
+                    <div style="margin: 0 8px;">
+                      <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color};"></span>
+                      <span>${item.seriesName}</span>
+                      <span style="float:right;color:#00C8FF;margin-left:20px;">${item.data === null ? '' : item.data}</span>
+                    </div>
+                  </div>`
+              })
+              const div = `<div style='border: 1px solid ;
+border-image: linear-gradient(130deg, #FFFFFF 0%, rgba(201,255,243,0.00) 22%, rgba(201,255,243,0.00) 75%, rgba(201,255,243,0.00) 80%, #FFFFFF 99%, #FFFFFF 99%) 1;
+box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.4);' >${dataStr}</div>`
+              return div
+            }
+          },
+
+          legend: {
+            type: 'scroll',
+            top: 20,
+            bottom: 20,
+            padding: [0, 180],
+            icon: 'circle',
+            align: 'left',
+            itemWidth: 10,
+            itemHeight: 8,
+            itemGap: 15,
+            textStyle: {
+              color: '#fff',
+              rich: {
+                name: {
+                  fontSize: 12,
+                  color: '#ffffff',
+                  padding: [0, 10, 0, 0]
+                },
+                num: {
+                  fontSize: 16,
+                  color: '#ffffff'
+                },
+                unit: {
+                  fontSize: 16,
+                  color: '#ffffff'
+                }
+              }
+            }
+
+          },
+          xAxis: {
+            data: x_data,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#90e9d8'
+              }
+            },
+            axisLabel: {
+              show: true,
+              color: '#CEEBFF'
+            },
+
+            axisTick: {
+              show: false
+            }
+          },
+          yAxis: [{
+            name: '功率（kW）',
+            type: 'value',
+            nameTextStyle: {
+              color: ' rgba(255, 255, 255, 0.5)'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#90e9d8'
+              }
+            },
+            axisLabel: {
+              show: true,
+              color: '#CEEBFF'
+            },
+
+            axisTick: {
+              show: false
+            },
+            min: function(value) {
+              return Math.floor((Math.abs(value.min) < value.max ? -value.max * 1.05 : value.min * 1.05).toFixed(2))
+            },
+            max: function(value) {
+              return Math.ceil((Math.abs(value.min) < value.max ? value.max * 1.05 : -value.min * 1.05).toFixed(2))
+            }
+          },
+          {
+            name: 'SOC(%)',
+            type: 'value',
+            max: 100,
+            min: -100,
+            ming: 0,
+            nameTextStyle: {
+              color: ' rgba(255, 255, 255, 0.5)'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#90e9d8'
+              }
+            },
+            axisLabel: {
+              show: true,
+              color: '#CEEBFF'
+            },
+
+            axisTick: {
+              show: false
+            }
+
+          }],
+          series: this.serviceList
+        }
+      } else {
+        this.runOptions = {
+          title: {
+            text: '暂无数据',
+            x: 'center',
+            y: 'center',
+            textStyle: {
+              fontSize: 14,
+              fontWeight: 'normal'
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.bottom-left-wrapper{
+  width: 100%;
+  height: 100%;
+}
+.charts-box{
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/dashboard-zhongzi/components/itemBox/index.vue b/src/views/dashboard-zhongzi/components/itemBox/index.vue
new file mode 100644
index 0000000..0ea89b4
--- /dev/null
+++ b/src/views/dashboard-zhongzi/components/itemBox/index.vue
@@ -0,0 +1,370 @@
+<template>
+  <div class="item-box">
+    <div class="item-top">
+      <el-tooltip :content="title" placement="top" effect="dark">
+        <div class="top-title">{{ title }}</div>
+      </el-tooltip>
+      <div class="header-right">
+        <slot name="header" />
+        <el-upload
+          class="upload-demo"
+          :action="uploadUrl"
+          :headers="headers"
+          :show-file-list="false"
+          :data="uploadAppData"
+          accept=".xls,.xlsx"
+          :file-list="fileList"
+          :on-success="handleOnSuccessApp"
+          :on-error="handleOnErrorApp"
+          style="margin-right: 5px;"
+        >
+          <el-button
+            v-if="showExport"
+            type="primary"
+            class="primary-blue-btn"
+            icon="el-icon-download"
+          >导入移动端</el-button>
+        </el-upload>
+        <el-button
+          v-if="showExport"
+          v-permission="['business:topologyAttribute:newExportExcel']"
+          style="margin-right: 5px;"
+          icon="el-icon-upload2"
+          type="primary"
+          class="primary-blue-btn"
+          :loading="downloadIng_app_data"
+          @click="on_download_app_data"
+        >导出移动端</el-button>
+        <el-upload
+          class="upload-demo"
+          :action="uploadUrl"
+          :headers="headers"
+          :show-file-list="false"
+          :data="uploadData"
+          accept=".xls,.xlsx"
+          :file-list="fileList"
+          :on-success="handleOnSuccess"
+          :on-error="handleOnError"
+          style="margin-right: 5px;"
+        >
+          <el-button
+            v-if="showExport"
+            type="primary"
+            class="primary-blue-btn"
+            icon="el-icon-download"
+          >导入web</el-button>
+        </el-upload>
+        <el-button
+          v-if="showExport"
+          v-permission="['business:topologyAttribute:newExportExcel']"
+          style="margin-right: -5px;"
+          icon="el-icon-upload2"
+          type="primary"
+          class="primary-blue-btn"
+          :loading="downloadIng_data"
+          @click="on_download_data"
+        >导出web</el-button>
+        <el-button
+          v-if="showExport"
+          v-permission="['business:topologyAttribute:exportTemplate']"
+          type="primary"
+          class="primary-blue-btn"
+          icon="el-icon-upload2"
+          style="margin-right: 20px"
+          :loading="downloadIng"
+          @click="on_download"
+        >导入模板</el-button>
+        <i
+          v-if="showPointSetting"
+          slot="reference"
+          v-permission="['business:dynamicConfig:addPointList']"
+          class="el-icon-setting"
+          style="font-size: 22px; cursor: pointer;color: #ceebff;margin-right:3px;"
+          @click="handleSetting"
+        />
+        <i
+          v-if="showCurveSetting"
+          slot="reference"
+          v-permission="['business:dynamicConfig:addCurveList']"
+          class="el-icon-setting"
+          style="font-size: 22px; cursor: pointer;color: #ceebff;margin-right:3px;"
+          @click="handleSetting"
+        />
+        <svg-icon
+          v-if="showScreen"
+          :style="svgStyle"
+          :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
+          @click="click"
+        />
+      </div>
+    </div>
+    <div class="item-con">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import screenfull from 'screenfull'
+import { handleDownExcel } from '@/utils'
+import { getToken } from '@/utils/auth'
+export default {
+  name: 'Index',
+  components: {},
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    showSetting: {
+      type: Boolean,
+      default: false
+    },
+    showScreen: {
+      type: Boolean,
+      default: false
+    },
+    showExport: {
+      type: Boolean,
+      default: false
+    },
+    pageNumber: {
+      type: Number,
+      default: 1
+    },
+    showPointSetting: {
+      type: Boolean,
+      default: false
+    },
+    showCurveSetting: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      svgStyle: {
+        display: 'inline-block',
+        cursor: 'pointer',
+        fill: '#ceebff',
+        width: '16px',
+        height: '16px',
+        verticalAlign: '10px',
+        marginRight: '5px'
+      },
+      isFullscreen: false,
+      uploadUrl:
+        process.env.VUE_APP_BASE_API + '/business/topologyAttribute/importExcel',
+      headers: {
+        authorization: getToken(),
+        lang: sessionStorage.getItem('language') === 'en' ? 'en_US' : 'zh_CN'
+      },
+      fileList: [],
+      downloadIng: false,
+      downloadIng_data: false,
+      downloadIng_app_data: false,
+      uploadData: {
+        stationId: null,
+        pageNumber: null,
+        isWeb: 1
+      },
+      uploadAppData: {
+        stationId: null,
+        pageNumber: null,
+        isWeb: 2
+      }
+    }
+  },
+  computed: {
+    currentStation() {
+      return this.$store.getters.currentStation || undefined
+    }
+  },
+  watch: {
+    currentStation: {
+      handler(val) {
+        if (val && val.id) {
+          this.uploadAppData.stationId = val.id
+          this.uploadData.stationId = val.id
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    pageNumber: {
+      handler(val) {
+        if (val) {
+          this.uploadAppData.pageNumber = val
+          this.uploadData.pageNumber = val
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created() {},
+  mounted() {
+    this.init()
+  },
+  methods: {
+    async on_download() {
+      this.downloadIng = true
+      const params = {
+        title: '火电拓扑模板'
+      }
+      handleDownExcel('/business/topologyAttribute/exportTemplate', params, (callback) => {
+        console.log(callback)
+        this.downloadIng = false
+      })
+    },
+    async on_download_data() {
+      this.downloadIng_data = true
+      const params = {
+        title: '火电拓扑数据',
+        stationId: this.uploadData.stationId,
+        pageNumber: this.pageNumber,
+        pageLocation: 'fire',
+        isWeb: 1
+      }
+      handleDownExcel('/business/topologyAttribute/newExportExcel', params, (callback) => {
+        console.log(callback)
+        this.downloadIng_data = false
+      })
+    },
+    on_download_app_data() {
+      this.downloadIng_app_data = true
+      const params = {
+        title: '火电拓扑移动端数据',
+        stationId: this.uploadData.stationId,
+        pageNumber: this.pageNumber,
+        pageLocation: 'fire',
+        isWeb: 2
+      }
+      handleDownExcel('/business/topologyAttribute/newExportExcel', params, (callback) => {
+        this.downloadIng_app_data = false
+      })
+    },
+    handleOnSuccess(file, fileList) {
+      if (+file.code !== 200) {
+        this.$message.warning(file.msg)
+      } else {
+        this.$message.success('导入成功')
+        this.$emit('handleOnSuccess', file, fileList)
+      }
+      // console.log(1111, file, fileList)
+    },
+    handleOnSuccessApp(file, fileList) {
+      if (+file.code !== 200) {
+        this.$message.warning(file.msg)
+      } else {
+        this.$message.success('导入成功')
+        // this.$emit('handleOnSuccess', file, fileList)
+      }
+    },
+    handleOnError(file, fileList) {},
+    handleOnErrorApp(file, fileList) {},
+    handleSetting() {
+      this.$emit('handleSetting')
+    },
+    change() {
+      this.isFullscreen = screenfull.isFullscreen
+    },
+    init() {
+      if (screenfull.enabled) {
+        screenfull.on('change', this.change)
+      }
+    },
+    destroy() {
+      if (screenfull.enabled) {
+        screenfull.off('change', this.change)
+      }
+    },
+    click() {
+      this.$emit('screenFull', this.isFullscreen)
+      const element = document.getElementById('app-main') // 指定全屏区域元素
+      element.style.background =
+        'url(' + require('../../../../assets/images/dashboardBg.png') + ')'
+      if (screenfull.isEnabled) {
+        screenfull.request(element)
+      }
+      screenfull.toggle(element)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.item-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .item-top {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    opacity: 1;
+    box-sizing: border-box;
+    // border: 1px solid;
+    // background: #003235;
+    background-image: var(--item-header-bg);
+    background-size: 100% 40px;
+    // border-image: linear-gradient(
+    //     11deg,
+    //     rgba(0, 148, 255, 0.5) 37%,
+    //     rgba(0, 148, 255, 0.5) 37%,
+    //     rgba(0, 148, 255, 0) 44%
+    //   )
+    //   1;
+    box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
+    // background:var(--table-bg);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .top-title {
+      // width: 100%;
+      white-space: nowrap;
+      height: 40px;
+      line-height: 40px;
+      width: 80%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 20px;
+      font-weight: normal;
+      letter-spacing: 0.1em;
+      color: #ceebff;
+      text-shadow: 0px 0px 10px #0094ff;
+      font-family: var(--font-family);
+
+      padding: 0 10px;
+      // background: linear-gradient(180deg, #c9fff3 0%, #c3fff2 13%, #32ffd2 63%);
+    }
+    .header-right {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+    }
+  }
+  .item-con {
+    flex: 1;
+    margin-top: 5px;
+    width: 100%;
+    height: 100%;
+    background:var(--table-bg);
+    box-sizing: border-box;
+    border: 1px solid;
+    border-image: linear-gradient(
+        108deg,
+        #ffffff -7%,
+        rgba(201, 255, 243, 0) 16%,
+        rgba(201, 255, 243, 0) 75%,
+        rgba(201, 255, 243, 0) 81%,
+        #ffffff 102%,
+        #ffffff 102%
+      )
+      1;
+    box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
+  }
+}
+</style>
diff --git a/src/views/dashboard-zhongzi/components/itemBox/position.vue b/src/views/dashboard-zhongzi/components/itemBox/position.vue
new file mode 100644
index 0000000..2d50557
--- /dev/null
+++ b/src/views/dashboard-zhongzi/components/itemBox/position.vue
@@ -0,0 +1,207 @@
+<template>
+  <div class="item-box">
+    <div class="item-top">
+      <el-popover
+        placement="bottom"
+        width="240"
+        trigger="click"
+        @show="changeTitle = title"
+        @hide="handleSaveTitle"
+      >
+        <el-input v-model="changeTitle" maxlength="25" />
+        <div slot="reference" class="top-title">{{ title }}</div>
+      </el-popover>
+      <div class="header-right">
+        <slot name="header" />
+        <i
+          v-if="showPointSetting"
+          slot="reference"
+          v-permission="['business:dynamicConfig:addPointList']"
+          class="el-icon-setting"
+          style="
+            font-size: 22px;
+            cursor: pointer;
+            color: #ceebff;
+            margin-right: 3px;
+          "
+          @click="handleSetting"
+        />
+        <i
+          v-if="showCurveSetting"
+          slot="reference"
+          v-permission="['business:dynamicConfig:addCurveList']"
+          class="el-icon-setting"
+          style="
+            font-size: 22px;
+            cursor: pointer;
+            color: #ceebff;
+            margin-right: 3px;
+          "
+          @click="handleSetting"
+        />
+        <svg-icon
+          v-if="showScreen"
+          :style="svgStyle"
+          :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
+          @click="click"
+        />
+      </div>
+    </div>
+    <div class="item-con">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import screenfull from 'screenfull'
+export default {
+  name: 'Index',
+  components: {},
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    titleId: {
+      type: [String, Number],
+      default: ''
+    },
+    showPointSetting: {
+      type: Boolean,
+      default: false
+    },
+    showCurveSetting: {
+      type: Boolean,
+      default: false
+    },
+    showScreen: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      svgStyle: {
+        display: 'inline-block',
+        cursor: 'pointer',
+        fill: '#ceebff',
+        width: '16px',
+        height: '16px',
+        verticalAlign: '10px',
+        marginRight: '5px'
+      },
+      isFullscreen: false,
+      changeTitle: ''
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.init()
+  },
+  methods: {
+    handleSaveTitle() {
+      this.$emit('handleSaveTitle', this.changeTitle, this.titleId)
+    },
+    handleSetting() {
+      this.$emit('handleSetting')
+    },
+    change() {
+      this.isFullscreen = screenfull.isFullscreen
+    },
+    init() {
+      if (screenfull.enabled) {
+        screenfull.on('change', this.change)
+      }
+    },
+    destroy() {
+      if (screenfull.enabled) {
+        screenfull.off('change', this.change)
+      }
+    },
+    click() {
+      this.$emit('screenFull', this.isFullscreen)
+      const element = document.getElementById('app-main') // 指定全屏区域元素
+      element.style.background =
+        'url(' + require('../../../../assets/images/dashboardBg.png') + ')'
+      if (screenfull.isEnabled) {
+        screenfull.request(element)
+      }
+      screenfull.toggle(element)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.item-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .item-top {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    opacity: 1;
+    box-sizing: border-box;
+    // border: 1px solid;
+    // background: #003235;
+    background-image: var(--item-header-bg);
+    background-size: 100% 40px;
+    // border-image: linear-gradient(
+    //     11deg,
+    //     rgba(0, 148, 255, 0.5) 37%,
+    //     rgba(0, 148, 255, 0.5) 37%,
+    //     rgba(0, 148, 255, 0) 44%
+    //   )
+    //   1;
+    box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
+    // background:var(--table-bg);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .top-title {
+      // width: 100%;
+      height: 40px;
+      line-height: 40px;
+      font-size: 20px;
+      font-weight: normal;
+      letter-spacing: 0.2em;
+      color: #ceebff;
+      text-shadow: 0px 0px 10px #0094ff;
+      font-family: var(--font-family);
+
+      padding: 0 10px;
+      // background: linear-gradient(180deg, #c9fff3 0%, #c3fff2 13%, #32ffd2 63%);
+    }
+    .header-right {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+    }
+  }
+  .item-con {
+    flex: 1;
+    margin-top: 5px;
+    width: 100%;
+    background:var(--table-bg);
+    box-sizing: border-box;
+    border: 1px solid;
+    border-image: linear-gradient(
+        108deg,
+        #ffffff -7%,
+        rgba(201, 255, 243, 0) 16%,
+        rgba(201, 255, 243, 0) 75%,
+        rgba(201, 255, 243, 0) 81%,
+        #ffffff 102%,
+        #ffffff 102%
+      )
+      1;
+    box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
+  }
+}
+</style>
diff --git a/src/views/dashboard-zhongzi/components/top-left/index.vue b/src/views/dashboard-zhongzi/components/top-left/index.vue
new file mode 100644
index 0000000..81ed746
--- /dev/null
+++ b/src/views/dashboard-zhongzi/components/top-left/index.vue
@@ -0,0 +1,787 @@
+<template>
+  <div class="top-left-box">
+    <itemBox :title="$t('dashboard.stationData')">
+      <div slot="header">
+        <div class="header-right-box">
+          <div class="header-title" :class="{ 'active': currentIndex === 0 }" @click="changeType(0)">{{ $t('dashboard.dataOverView') }}</div>
+          <div class="header-title" :class="{ 'active': currentIndex === 1 }" @click="changeType(1)">{{ $t('dashboard.stationInfo') }}</div>
+        </div>
+      </div>
+      <div v-if="currentIndex === 0" v-loading="loading" class="box">
+        <div class="content-box">
+          <div class="left">
+            <div class="left-icon">
+              <div class="icon-font-runDay" />
+            </div>
+            <div class="left-title">{{ $t('dashboard.safeDays') }}</div>
+          </div>
+
+          <div class="right">
+            <div class="right-value">{{ stationData.operationDays }}</div>
+            <!-- <div class="right-value">7</div> -->
+            <div class="right-unit">{{ $t('dashboard.day') }}</div>
+          </div>
+
+          <div class="left-top" />
+          <div class="right-top" />
+          <div class="left-bottom" />
+          <div class="right-bottom" />
+        </div>
+
+        <div class="content-box">
+          <div class="left">
+            <div class="left-icon">
+              <div class="icon-font-totalCharge" />
+            </div>
+            <div class="left-title">{{ $t('dashboard.totalCapacity') }}</div>
+          </div>
+
+          <div class="right">
+            <div class="right-value">{{ totalData.totalCapacity }}</div>
+            <div class="right-unit">kWh</div>
+          </div>
+          <div class="left-top" />
+          <div class="right-top" />
+          <div class="left-bottom" />
+          <div class="right-bottom" />
+        </div>
+        <div class="content-box">
+          <div class="left">
+            <div class="left-icon">
+              <div class="icon-font-totalDischarge" />
+            </div>
+            <div class="left-title">{{ $t('dashboard.systemConversionEfficiency') }}</div>
+          </div>
+
+          <div class="right">
+            <div class="right-value">{{ (totalData.systemEfficiency*100).toFixed(2) }}</div>
+            <div class="right-unit">%</div>
+          </div>
+          <div class="left-top" />
+          <div class="right-top" />
+          <div class="left-bottom" />
+          <div class="right-bottom" />
+        </div>
+
+        <div class="content-box">
+          <div class="left">
+            <div class="left-icon">
+              <div class="icon-font-currentPower" />
+            </div>
+            <div class="left-title">{{ $t('dashboard.currentPower') }}</div>
+          </div>
+
+          <div class="right">
+            <div class="right-value">{{ totalData.currentPower }}</div>
+            <div class="right-unit">kW</div>
+          </div>
+          <div class="left-top" />
+          <div class="right-top" />
+          <div class="left-bottom" />
+          <div class="right-bottom" />
+        </div>
+
+        <div class="content-box">
+          <div class="left">
+            <div class="left-icon">
+              <div class="icon-font-totalDischarge" />
+            </div>
+            <div class="left-title">{{ $t('dashboard.totalCharge') }}</div>
+          </div>
+
+          <div class="right">
+            <div class="right-value">{{ totalData.totalChargeElec | kwhFormat(2) }}</div>
+            <div class="right-unit">{{ totalData.totalChargeElec | kwhUnitFormat }}</div>
+          </div>
+          <div class="left-top" />
+          <div class="right-top" />
+          <div class="left-bottom" />
+          <div class="right-bottom" />
+        </div>
+
+        <div class="content-box">
+          <div class="left">
+            <div class="left-icon">
+              <div class="icon-font-totalDischarge" />
+            </div>
+            <div v-if="stationId===753" class="left-title">{{ $t('dashboard.capacityIncrease') }}</div>
+            <div v-else class="left-title">{{ $t('dashboard.totalDischarge') }}</div>
+          </div>
+
+          <div class="right">
+            <div class="right-value">{{ totalData.totalDischargeElec | kwhFormat(2) }}</div>
+            <div class="right-unit">{{ totalData.totalDischargeElec | kwhUnitFormat }}</div>
+          </div>
+          <div class="left-top" />
+          <div class="right-top" />
+          <div class="left-bottom" />
+          <div class="right-bottom" />
+        </div>
+
+        <div class="content-box">
+          <div class="left">
+            <div class="left-icon">
+              <div class="icon-font-dayCharge" style="cursor: pointer;" @click="setRule" />
+            </div>
+            <div class="left-title">{{ $t('dashboard.dailyCharge') }}</div>
+          </div>
+
+          <div class="right">
+            <div class="right-value">{{ totalData.dailyChargeElec | kwhFormat(2) }}</div>
+            <div class="right-unit">{{ totalData.dailyChargeElec | kwhUnitFormat }}</div>
+          </div>
+          <div class="left-top" />
+          <div class="right-top" />
+          <div class="left-bottom" />
+          <div class="right-bottom" />
+        </div>
+
+        <div class="content-box">
+          <div class="left">
+            <div class="left-icon">
+              <div class="icon-font-dayCharge" />
+            </div>
+            <div v-if="stationId===753" class="left-title">{{ $t('dashboard.DailycapacityIncrease') }}</div>
+            <div v-else class="left-title">{{ $t('dashboard.dailyDischarge') }}</div>
+          </div>
+
+          <div class="right">
+            <div class="right-value">{{ totalData.dailyDischargeElec | kwhFormat(2) }}</div>
+            <div class="right-unit">{{ totalData.dailyDischargeElec | kwhUnitFormat }}</div>
+          </div>
+          <div class="left-top" />
+          <div class="right-top" />
+          <div class="left-bottom" />
+          <div class="right-bottom" />
+        </div>
+
+      </div>
+
+      <div v-else v-loading="loading" class="box">
+        <div class="content-box">
+          <div class="left">
+            <div class="left-icon">
+              <div class="icon-font-runDay" />
+            </div>
+            <div class="left-title">{{ $t('dashboard.stationName') }}</div>
+          </div>
+
+          <div class="right">
+            <el-tooltip class="item" effect="dark" :content="stationData.name" placement="top-start">
+              <div class="right-value1">{{ stationData.name }}</div>
+
+            </el-tooltip>
+            <!-- <div class="right-unit">{{ $t('dashboard.day') }}</div> -->
+          </div>
+
+          <div class="left-top" />
+          <div class="right-top" />
+          <div class="left-bottom" />
+          <div class="right-bottom" />
+        </div>
+
+        <div class="content-box">
+          <div class="left">
+            <div class="left-icon">
+              <div class="icon-font-totalCharge" />
+            </div>
+            <div class="left-title">{{ $t('dashboard.stationType') }}</div>
+          </div>
+
+          <div class="right">
+            <div class="right-value1">{{ getStationTypeName(stationData.type) }}</div>
+            <!-- <div class="right-unit">kW</div> -->
+          </div>
+          <div class="left-top" />
+          <div class="right-top" />
+          <div class="left-bottom" />
+          <div class="right-bottom" />
+        </div>
+
+        <div class="content-box">
+          <div class="left">
+            <div class="left-icon">
+              <div class="icon-font-totalDischarge" />
+            </div>
+            <div class="left-title">{{ $t('dashboard.stationLocation') }}</div>
+          </div>
+
+          <div class="right">
+            <el-tooltip class="item" effect="dark" :content="stationData.address" placement="top-start">
+              <div class="right-value1">{{ stationData.address }}</div>
+
+            </el-tooltip>
+            <!-- <div class="right-unit">MW</div> -->
+          </div>
+          <div class="left-top" />
+          <div class="right-top" />
+          <div class="left-bottom" />
+          <div class="right-bottom" />
+        </div>
+
+        <div class="content-box">
+          <div class="left">
+            <div class="left-icon">
+              <div class="icon-font-totalDischarge" />
+            </div>
+            <div class="left-title">{{ $t('dashboard.commTime') }}</div>
+          </div>
+
+          <div class="right">
+            <el-tooltip :content="stationData.createTime" placement="top" effect="dark">
+              <div class="right-value1">{{ stationData.createTime }}</div>
+            </el-tooltip>
+            <!-- <div class="right-unit">MW</div> -->
+          </div>
+          <div class="left-top" />
+          <div class="right-top" />
+          <div class="left-bottom" />
+          <div class="right-bottom" />
+        </div>
+
+        <div class="content-box">
+          <div class="left">
+            <div class="left-icon">
+              <div class="icon-font-dayCharge" />
+            </div>
+            <div class="left-title">{{ $t('dashboard.log') }}</div>
+          </div>
+
+          <div class="right">
+            <div class="right-value1">{{ stationData.longitude }}</div>
+            <!-- <div class="right-unit">kWh</div> -->
+          </div>
+          <div class="left-top" />
+          <div class="right-top" />
+          <div class="left-bottom" />
+          <div class="right-bottom" />
+        </div>
+
+        <div class="content-box">
+          <div class="left">
+            <div class="left-icon">
+              <div class="icon-font-dayCharge" />
+            </div>
+            <div class="left-title">{{ $t('dashboard.lat') }}</div>
+          </div>
+
+          <div class="right">
+            <div class="right-value1">{{ stationData.latitude }}</div>
+            <!-- <div class="right-unit">kWh</div> -->
+          </div>
+          <div class="left-top" />
+          <div class="right-top" />
+          <div class="left-bottom" />
+          <div class="right-bottom" />
+        </div>
+
+      </div>
+      <el-dialog
+        :append-to-body="true"
+        title="日充放统计规则"
+        :visible.sync="ruleShow"
+        center
+        width="30%"
+        :close-on-click-modal="false"
+      >
+        <el-form :model="timeForm" label-width="120px">
+          <el-form-item label="前一日" class="select-box">
+            <el-select
+              v-model="timeForm.beforeTime"
+              style="width:100%"
+              placeholder="请选择"
+              @change="selectRuleTime"
+            >
+              <template slot="prefix">
+                <span style="padding-left: 5px;">
+                  <i class="el-icon-time" />
+                </span>
+              </template>
+              <el-option
+                v-for="item in timeList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="今日">
+            <el-time-picker
+              v-model="timeForm.nowDayTime"
+              style="width:100%"
+              :clearable="false"
+              readonly
+              placeholder="请选择时间"
+              value-format="HH:mm:ss"
+            />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="cancelRule">取 消</el-button>
+          <el-button
+            type="primary"
+            :loading="timeSubmitLoading"
+            @click="sureRule"
+          >确 定</el-button>
+        </div>
+      </el-dialog>
+    </itemBox>
+  </div>
+</template>
+
+<script>
+import itemBox from '../itemBox/index.vue'
+import { GetPcsStationData, addElecMeterConfig,
+  updateElecMeterConfig } from '@/api/home-page/index'
+import { GetRAPcsTotalData } from '@/api/homePage-integrated/index'
+import { ToDegrees } from '@/utils/index'
+export default {
+  name: 'Index',
+  components: { itemBox },
+  props: {
+    stationId: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      totalData: {
+        operationDays: '',
+        ratePower: '',
+        totalChargeElec: '',
+        totalDischargeElec: '',
+        dailyChargeElec: '',
+        dailyDischargeElec: '',
+        currentPower: ''
+      },
+      stationData: {
+        name: '',
+        type: '',
+        address: '',
+        createTime: '',
+        longitude: '',
+        latitude: ''
+      },
+      stationType: [],
+      loading: false,
+      ruleShow: false,
+      timeForm: {
+        beforeTime: undefined,
+        nowDayTime: undefined
+      },
+      timeSubmitLoading: false,
+      timeOperate: 1, // 1 新增 2 编辑
+      timeList: []
+    }
+  },
+  computed: {
+    stationTypeList() {
+      return this.$store.getters.dicts['stationType'] || []
+    }
+
+  },
+  watch: {
+    dailyTime: {
+      handler(val) {
+        if (val) {
+          this.timeForm = val
+          this.timeOperate = val.timeOperate
+          this.GetPcsTotalData()
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created() {
+    // console.log(this.stationTypeList)
+    this.getTimeList()
+  },
+  mounted() { },
+  methods: {
+    getStationTypeName(item) {
+      if (item && item !== '') {
+        const typeIndex = this.stationTypeList.findIndex(t => Number(t.value) === Number(item))
+        return this.stationTypeList[typeIndex].label
+      }
+    },
+    changeType(val) {
+      this.currentIndex = val
+    },
+    getData() {
+      this.GetPcsStationData()
+      this.GetPcsTotalData()
+    },
+    async GetPcsStationData() {
+      this.loading = true
+      const params = {
+        stationId: this.stationId
+      }
+      try {
+        const { data } = await GetPcsStationData(params)
+        this.stationData = data
+        this.stationData.longitude = ToDegrees(data.longitude, 1)
+        this.stationData.latitude = ToDegrees(data.latitude, 2)
+      } catch (error) {
+        // console.log(error);
+      } finally {
+        this.loading = false
+      }
+    },
+
+    async GetPcsTotalData() {
+      this.loading = true
+      const params = {
+        stationId: this.stationId
+      }
+      try {
+        const { data } = await GetRAPcsTotalData(params)
+        this.totalData = data
+      } catch (error) {
+        // console.log(error);
+      } finally {
+        this.loading = false
+      }
+    },
+    getTimeList() {
+      for (let i = 0; i < 24; i++) {
+        this.timeList.push({
+          label: `${i < 10 ? '0' + i : i}:00:00`,
+          value: `${i < 10 ? '0' + i : i}:00:00`
+        })
+      }
+    },
+    setRule() {
+      this.ruleShow = true
+    },
+    selectRuleTime(val) {
+      this.timeForm.nowDayTime = this.getEightTime('2020-07-28 ' + val)
+    },
+    cancelRule() {
+      this.ruleShow = false
+    },
+    sureRule() {
+      if (this.timeOperate === 1) {
+        // 新增
+        this.timeSubmitLoading = true
+        const param = {
+          stationId: this.stationId,
+          beginTime: this.timeForm.beforeTime,
+          endTime: this.timeForm.nowDayTime
+        }
+        addElecMeterConfig(param)
+          .then((res) => {
+            this.$message.success('新增成功')
+            this.ruleShow = false
+            this.$emit('updateTime')
+          })
+          .finally(() => {
+            this.timeSubmitLoading = false
+          })
+      } else {
+        // 编辑
+        this.timeSubmitLoading = true
+        const param = {
+          stationId: this.stationId,
+          beginTime: this.timeForm.beforeTime,
+          endTime: this.timeForm.nowDayTime,
+          id: this.timeForm.id
+        }
+        updateElecMeterConfig(param)
+          .then((res) => {
+            this.$message.success('更新成功')
+            this.ruleShow = false
+            this.$emit('updateTime')
+          })
+          .finally(() => {
+            this.timeSubmitLoading = false
+          })
+      }
+    },
+    /**
+     * 指定时间的多少小时或多少分钟之后的时间
+     * @param {*} str 2020-07-28 15:00:00
+     */
+    getEightTime(str) {
+      const t = new Date(str).getTime() + 24 * 60 * 60 * 1000 - 1 // 24小时 * 60分钟 * 60秒 * 1000
+      const d = new Date(t)
+      let theMonth = d.getMonth() + 1
+      let theDate = d.getDate()
+      let theHours = d.getHours()
+      let theMinutes = d.getMinutes()
+      let theSecond = d.getSeconds()
+      if (theMonth < 10) {
+        theMonth = '0' + theMonth
+      }
+      if (theDate < 10) {
+        theDate = '0' + theDate
+      }
+      if (theHours < 10) {
+        theHours = '0' + theHours
+      }
+      if (theMinutes < 10) {
+        theMinutes = '0' + theMinutes
+      }
+      if (theSecond < 10) {
+        theSecond = '0' + theSecond
+      }
+      // let date = d.getFullYear() + '-' + theMonth + '-' + theDate
+      const time = theHours + ':' + theMinutes + ':' + theSecond
+      // let Spare = date + ' ' + time
+      // console.log(date)
+      // console.log(time)
+      // console.log(Spare)
+      return time
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep .item-con{
+  overflow:auto;
+}
+.top-left-box{
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  .header-right-box {
+    display: flex;
+    align-items: center;
+
+    .header-title {
+      white-space: nowrap;
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: 0em;
+      color: rgba(206, 235, 255, 0.5);
+      padding:  0 10px;
+      cursor: pointer;
+      font-family: HYQY;
+
+      &.active{
+        color: #ffffff;
+        background: linear-gradient(90deg, rgba(0,148,255,0.00) 0%, rgba(0,148,255,0.43) 51%, rgba(0,148,255,0.00) 99%);
+      }
+    }
+  }
+}
+.box{
+  min-height: 506px;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  padding-bottom: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.content-box {
+  width: 100%;
+  // border: 1px solid #ffffff;
+  padding: 6px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  position: relative;
+  background: url(../../../../assets/station-data/item-bg.png);
+  background-size: cover;
+  .left {
+    width: 60%;
+    display: flex;
+    align-items: center;
+    .left-icon {
+      /* 矩形 180 */
+
+      min-width: 40px;
+      height: 40px;
+      opacity: 1;
+      // background: url(../../../../assets/station-data/run-day.png);
+      background: linear-gradient(
+        180deg,
+        #0094ff -204%,
+        rgba(0, 148, 255, 0) 100%
+      );
+
+      box-sizing: border-box;
+      border-width: 1px 0px 1px 0px;
+      border-style: solid;
+      border-color: rgba(206, 235, 255, 0.6);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .icon-font-runDay{
+        width: 100%;
+        height: 100%;
+        background: url(../../../../assets/station-data/run-day.png) no-repeat;
+        background-size: cover;
+        background-position: center;
+      }
+      .icon-font-installedCapacity{
+        width: 100%;
+        height: 100%;
+        background: url(../../../../assets/station-data/Installed-capacity.png) no-repeat;
+        background-size: cover;
+        background-position: center;
+      }
+      .icon-font-totalCharge{
+        width: 100%;
+        height: 100%;
+        background: url(../../../../assets/station-data/total-charge.png);
+        background-size: cover;
+        background-position: center;
+      }
+      .icon-font-totalDischarge{
+        width: 100%;
+        height: 100%;
+        background: url(../../../../assets/station-data/total-discharge.png);
+        background-size: cover;
+        background-position: center;
+      }
+
+        .icon-font-dayCharge{
+          width: 100%;
+        height: 100%;
+        background: url(../../../../assets/station-data/day-charge.png);
+        background-size: cover;
+        background-position: center;
+      }
+
+        .icon-font-currentPower{
+        width: 100%;
+        height: 100%;
+        background: url(../../../../assets/station-data/station-data.png) no-repeat;
+        background-size: 100% 100%;
+        // background-position: center;
+      }
+    }
+    .left-title {
+      width: fit-content;
+      padding-left: 20px;
+      /* 运行天数 */
+      height: 20px;
+      line-height: 20px;
+      opacity: 1;
+      font-family: Alibaba PuHuiTi 2;
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: 0em;
+      color: #ceebff;
+      font-family: HYQY;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .el-icon-share:before {
+      /* 路径 */
+      color: #ffffff;
+      width: 100%;
+      height: 100%;
+      opacity: 1;
+
+      background: linear-gradient(
+        179deg,
+        #ceebff 0%,
+        #86c4ff 87%,
+        #409eff 106%
+      );
+
+      box-shadow: 0px 0px 10px 0px #0094ff,
+        2px 2px 0px 0px rgba(0, 148, 255, 0.4);
+    }
+  }
+  .right {
+    display: flex;
+    align-items: center;
+    width: 40%;
+    .right-value {
+      font-family: DIN;
+
+      width: 100%;
+      padding-right: 5px;
+      height: 21px;
+      opacity: 1;
+      font-size: 18px;
+      font-weight: bold;
+      text-align: right;
+      letter-spacing: 0.1em;
+     background: linear-gradient(180deg, #ceebff 21%, #86c4ff 81%);
+      background-clip: text;
+      color: #ceebff69;
+    }
+    .right-value1 {
+      font-family: HYQY;
+      padding-left: 10px;
+      width: 100%;
+      padding-right: 10px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding-right: 5px;
+      height: 21px;
+      line-height: 20px;
+      opacity: 1;
+      font-size: 14px;
+
+      font-weight: normal;
+      text-align: right;
+      letter-spacing: 0.1em;
+      background: linear-gradient(180deg, #ceebff 21%, #86c4ff 81%);
+      background-clip: text;
+      color: #ceebff69;
+    }
+    .right-unit {
+      /* 天 */
+
+      opacity: 1;
+      line-height: 21px;
+      font-family: Alibaba PuHuiTi 2;
+      font-size: 10px;
+      font-weight: normal;
+      text-align: right;
+      letter-spacing: 0em;
+      color: #ceebff;
+      font-family: HYQY;
+
+    }
+  }
+  .left-top{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 6px;
+    height: 6px;
+    border-left: 1px solid #D8D8D8;
+    border-top: 1px solid #D8D8D8;
+  }
+  .right-top{
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 6px;
+    height: 6px;
+    border-right: 1px solid #D8D8D8;
+    border-top: 1px solid #D8D8D8;
+  }
+  .left-bottom{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 6px;
+    height: 6px;
+    border-left: 1px solid#D8D8D8 ;
+    border-bottom: 1px solid#D8D8D8;
+  }
+  .right-bottom{
+      position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 6px;
+    height: 6px;
+    border-right: 1px solid #D8D8D8;
+    border-bottom: 1px solid #D8D8D8;
+  }
+}
+</style>
diff --git a/src/views/dashboard-zhongzi/components/top-right/index.vue b/src/views/dashboard-zhongzi/components/top-right/index.vue
new file mode 100644
index 0000000..220f80e
--- /dev/null
+++ b/src/views/dashboard-zhongzi/components/top-right/index.vue
@@ -0,0 +1,612 @@
+<template>
+  <itemBox
+    :title="title"
+    :title-id="titleId"
+    style="min-height: 560px"
+    @handleSaveTitle="saveDynamicConfigTitle"
+  >
+    <div slot="header">
+      <div class="header-right-box">
+        <el-dropdown @command="commandKey">
+          <span class="el-dropdown-link">
+            {{ `${(selectKey - 1) * 15 + 1}-${selectKey * 15}储能柜` }}<i class="el-icon-arrow-down el-icon--right" />
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="1">1-15储能柜</el-dropdown-item>
+            <el-dropdown-item command="2">16-30储能柜</el-dropdown-item>
+            <el-dropdown-item command="3">31-45储能柜</el-dropdown-item>
+            <el-dropdown-item command="4">46-60储能柜</el-dropdown-item>
+            <el-dropdown-item command="5">61-75储能柜</el-dropdown-item>
+            <el-dropdown-item command="6">76-90储能柜</el-dropdown-item>
+            <el-dropdown-item command="7">91-105储能柜</el-dropdown-item>
+            <el-dropdown-item command="8">106-120储能柜</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+
+      </div>
+    </div>
+    <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 1080 598"
+        >
+          <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>
+          <g transform="scale(0.75 0.8) translate(0,-30)">
+            <image :xlink:href="gridImg" x="20" y="40" width="70" height="70" />
+            <text x="40" y="120" fill="#ffffff" font-size="12">电网</text>
+
+            <polyline
+              points="85,55 300,55 300,200 400,200 400,55 1400,55"
+              fill="none"
+              class="g-rect-path"
+              stroke-width="2"
+              stroke="#0094FF"
+            />
+            <polyline
+              points="85,55 310,55"
+              fill="none"
+              class="g-rect-path"
+              stroke-width="2"
+              stroke="#0094FF"
+            />
+            <polyline
+              points="300,200 300,55"
+              fill="none"
+              class="g-rect-path"
+              stroke-width="1"
+              stroke="#0094FF"
+            />
+            <polyline
+              points="400,200 400,55"
+              fill="none"
+              class="g-rect-path"
+              stroke-width="1"
+              stroke="#0094FF"
+            />
+            <polyline
+              points="300,200 400,200"
+              fill="none"
+              class="g-rect-path"
+              stroke-width="1"
+              stroke="#0094FF"
+            />
+            <polyline
+              points="390,55 1300,55"
+              fill="none"
+              class="g-rect-path"
+              stroke-width="2"
+              stroke="#0094FF"
+            />
+
+            <polyline
+              points="200,115 300,115"
+              fill="none"
+              class="g-rect-path"
+              stroke="#0094FF"
+              stroke-dasharray="3 3"
+            />
+            <image
+              :xlink:href="ammeterImg"
+              x="140"
+              y="90"
+              width="70"
+              height="50"
+              style="cursor: pointer"
+              @click="lookDeviceDetail(`${selectKey}-120Tuopu-4-ammeter`)"
+            />
+            <text x="145" y="160" fill="#ffffff" font-size="14">防逆流电表</text>
+            <g v-for="(item, index) in ammeter_4" :key="item.id">
+              <text x="140" :y="175 + 20 * index" fill="#fff" font-size="14">
+                {{ item.name }}
+              </text>
+              <text
+                :x="countChineseAndEnglishCharacters(item.name, 140)"
+                :y="175 + 20 * index"
+                fill="#FFB800"
+                font-size="14"
+              >
+                {{ item.value }}
+              </text>
+            </g>
+            <image :xlink:href="AY" x="895" y="180" width="70" height="50" />
+
+            <polyline
+              points="930,230 930,510"
+              fill="none"
+              class="g-rect-path"
+              stroke="#0094FF"
+              stroke-width="1"
+            />
+            <polyline
+              points="930,55 930,180"
+              fill="none"
+              class="g-rect-path"
+              stroke="#0094FF"
+              stroke-width="1"
+            />
+
+            <rect
+              x="60"
+              y="510"
+              width="1375"
+              height="140"
+              rx="3"
+              :style="{ fill: 'transparent', stroke: '#FFFFFF' }"
+            />
+
+            <polyline
+              points="930,260 1060,260"
+              fill="none"
+              class="g-rect-path"
+              stroke="#0094FF"
+              stroke-dasharray="3 3"
+            />
+
+            <image
+              :xlink:href="ammeterImg"
+              x="1020"
+              y="240"
+              width="70"
+              height="50"
+              style="cursor: pointer;"
+              @click="lookDeviceDetail(`${selectKey}-120Tuopu-3-ammeter`)"
+            />
+            <text x="1020" y="305" fill="#ffffff" font-size="14">计量电表</text>
+            <g v-for="(item,index) in ammeter_3" :key="item.id">
+              <text x="1110" :y="220 + ( 20 * index)" fill="#ffffff" font-size="14">
+                {{ item.name }}
+              </text>
+              <text :x="countChineseAndEnglishCharacters(item.name,1110)" :y="220 + ( 20 * index)" fill="#FFB800" font-size="14">
+                {{ item.value }}
+              </text>
+            </g>
+
+            <rect
+              x="395"
+              y="140"
+              width="12"
+              height="22"
+              :style="{
+                fill: break_1.length ? getBreakColor(break_1[0].value) : '#888888',
+                stroke: 'transparent',
+                cursor: 'pointer',
+              }"
+              @click="lookDeviceDetail(`${selectKey}-120Tuopu-1-break`)"
+            />
+
+            <g transform="translate(0,110)">
+              <text x="10" y="565" fill="#ffffff" font-size="14">工作状态</text>
+              <text x="10" y="590" fill="#ffffff" font-size="14">有功功率(kW)</text>
+              <text x="10" y="615" fill="#ffffff" font-size="14">
+                SOC(%)
+              </text>
+              <text x="10" y="640" fill="#ffffff" font-size="14">SOH(%)</text>
+
+              <g transform="translate(50,90)">
+                <g v-for="item in 15" :key="item">
+                  <text :x="55 + (item - 1) * 90" y="368" fill="#ffffff" font-size="14">{{ (selectKey - 1) * 15 + item }}储能柜</text>
+                  <image
+                    :xlink:href="cabinetImg"
+                    :x="55 + (item - 1) * 90"
+                    y="383"
+                    width="60"
+                    height="60"
+                    style="cursor: pointer"
+                    @click="lookDeviceDetail(`${selectKey}-120Tuopu-${item}-pcs`)"
+                  />
+                  <text :x="65 + (item - 1) * 90" y="475" fill="#FFB800" font-size="14">
+                    {{ getPcsDataValue(item, 0) }}
+                  </text>
+                  <text :x="65 + (item - 1) * 90" y="500" fill="#FFB800" font-size="14">
+                    {{ getPcsDataValue(item, 1) }}
+                  </text>
+                  <text :x="65 + (item - 1) * 90" y="525" fill="#FFB800" font-size="14">
+                    {{ getPcsDataValue(item, 2) }}
+                  </text>
+                  <text :x="65 + (item - 1) * 90" y="550" fill="#FFB800" font-size="14">
+                    {{ getPcsDataValue(item, 3) }}
+                  </text>
+                </g>
+
+              </g>
+            </g>
+          </g>
+        </svg>
+
+      </div>
+    </div>
+    <dispositionPointDialog
+      is-topology
+      :show-div-location="true"
+      :max-length="12"
+      :page-location="pageLocation"
+      :visible="show_point_dispostion"
+      @close="closePoint"
+      @getData="getDynamicPointData"
+    />
+  </itemBox>
+</template>
+<script>
+import itemBox from '../itemBox/position.vue'
+import { DynamicConfigPoint } from '@/api/home-page/index'
+import cabinetImg from '@/assets/images/wxjd/cabinet.png'
+import chargingPileImg from '@/assets/images/home-office.png'
+import gridImg from '@/assets/images/wxjd/grid.png'
+import AY from '@/assets/images/wxjd/AY.png'
+import ammeterImg from '@/assets/images/wxjd/ammeter.png'
+import FrameImg from '@/assets/images/wxjd/frame.png'
+import {
+  QueryDynamicConfigTitle,
+  AddDynamicConfigTitle
+} from '@/api/test-management/index'
+export default {
+  components: { itemBox },
+  props: {
+    stationId: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      pageLocation: 'top',
+      permissionId: null,
+      loading: false,
+      moveX: 0,
+      moveY: 0,
+      tabPosition: 1,
+      show_point_dispostion: false,
+      title: '站点拓扑',
+      titleId: null,
+      gridImg,
+      ammeterImg,
+      AY,
+      FrameImg,
+      cabinetImg,
+      chargingPileImg,
+      allData: [],
+      pcsData_1: [],
+      pcsData_2: [],
+      pcsData_3: [],
+      pcsData_4: [],
+      pcsData_5: [],
+      pcsData_6: [],
+      pcsData_7: [],
+      pcsData_8: [],
+      pcsData_9: [],
+      pcsData_10: [],
+      pcsData_11: [],
+      pcsData_12: [],
+      pcsData_13: [],
+      pcsData_14: [],
+      pcsData_15: [],
+      ammeter_1: [],
+      ammeter_2: [],
+      ammeter_3: [],
+      ammeter_4: [],
+      break_1: [],
+      selectKey: '1'
+    }
+  },
+  computed: {
+    currentStation() {
+      return this.$store.getters.currentStation || undefined
+    }
+  },
+  watch: {
+
+    currentStation: {
+      handler(val) {
+        if (val && val.id) {
+          if (this.$store.getters.menuList.length) {
+            this.permissionId = this.$store.getters.menuList.find((item) => {
+              return item.url === this.$route.path
+            }).id
+          }
+          this.queryDynamicConfigTitle()
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created() {
+    if (this.$store.getters.menuList.length) {
+      this.permissionId = this.$store.getters.menuList.find((item) => {
+        return item.url === this.$route.path
+      }).id
+    }
+    this.queryDynamicConfigTitle()
+  },
+  methods: {
+    commandKey(item) {
+      this.selectKey = item
+      this.getPcsData()
+      // console.log(item)
+    },
+    async saveDynamicConfigTitle(title, id) {
+      await AddDynamicConfigTitle({
+        name: title,
+        id: id,
+        stationId: this.stationId,
+        pageLocation: '120_topCenter_title',
+        permissionId: this.permissionId
+      })
+      this.queryDynamicConfigTitle()
+    },
+    async queryDynamicConfigTitle() {
+      const { data } = await QueryDynamicConfigTitle({
+        stationId: this.stationId,
+        pageLocation: '120_topCenter_title',
+        permissionId: this.permissionId
+      })
+      this.title = data.length ? data[0].name : '站点拓扑'
+      this.titleId = data.length ? data[0].id : undefined
+    },
+    changeTab(val) {
+      this.tabPosition = val
+      this.$nextTick(() => {
+        this.getData()
+      })
+    },
+    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.pcsData_8 = []
+        this.pcsData_9 = []
+        this.pcsData_10 = []
+        this.pcsData_11 = []
+        this.pcsData_12 = []
+        this.pcsData_13 = []
+        this.pcsData_14 = []
+        this.pcsData_15 = []
+        this.ammeter_1 = []
+        this.ammeter_2 = []
+        this.ammeter_3 = []
+        this.ammeter_4 = []
+        this.break_1 = []
+        if (res.data.length) {
+          res.data.forEach((item) => {
+            if (item.pageLocation === `${this.selectKey}-120Tuopu-1-pcs`) {
+              this.pcsData_1.push(item)
+            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-2-pcs`) {
+              this.pcsData_2.push(item)
+            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-3-pcs`) {
+              this.pcsData_3.push(item)
+            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-4-pcs`) {
+              this.pcsData_4.push(item)
+            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-5-pcs`) {
+              this.pcsData_5.push(item)
+            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-6-pcs`) {
+              this.pcsData_6.push(item)
+            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-7-pcs`) {
+              this.pcsData_7.push(item)
+            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-8-pcs`) {
+              this.pcsData_8.push(item)
+            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-9-pcs`) {
+              this.pcsData_9.push(item)
+            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-10-pcs`) {
+              this.pcsData_10.push(item)
+            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-11-pcs`) {
+              this.pcsData_11.push(item)
+            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-12-pcs`) {
+              this.pcsData_12.push(item)
+            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-13-pcs`) {
+              this.pcsData_13.push(item)
+            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-14-pcs`) {
+              this.pcsData_14.push(item)
+            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-15-pcs`) {
+              this.pcsData_15.push(item)
+            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-1-ammeter`) {
+              this.ammeter_1.push(item)
+            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-2-ammeter`) {
+              this.ammeter_2.push(item)
+            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-3-ammeter`) {
+              this.ammeter_3.push(item)
+            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-4-ammeter`) {
+              this.ammeter_4.push(item)
+            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-1-break`) {
+              this.break_1.push(item)
+            }
+          })
+        }
+        // this.allData = res.data
+      } catch (error) {
+        // console.log(error);
+      } finally {
+        this.loading = false
+      }
+    },
+    getPcsDataValue(item, index) {
+      const dataKey = `pcsData_${item}`
+      console.log(this[dataKey], dataKey)
+
+      return this[dataKey] && this[dataKey].length > index ? this[dataKey][index].value : ''
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.center-box {
+  width: 100%;
+  height: 100%;
+}
+.scale-icon {
+  color: #fff;
+}
+@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);
+}
+.header-right-box {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .header-title {
+    white-space: nowrap;
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0em;
+    color: rgba(206, 235, 255, 0.5);
+    padding: 0 10px;
+    cursor: pointer;
+    font-family: HYQY;
+
+    &.active {
+      color: #ffffff;
+      background: linear-gradient(
+        90deg,
+        rgba(0, 148, 255, 0) 0%,
+        rgba(0, 148, 255, 0.43) 51%,
+        rgba(0, 148, 255, 0) 99%
+      );
+    }
+  }
+}
+.el-dropdown-link {
+    cursor: pointer;
+     color: #ffffff;
+    white-space: nowrap;
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0em;
+    color: #ffffff;
+    padding: 0 10px;
+    cursor: pointer;
+    font-family: HYQY;
+    // background: linear-gradient(
+    //     90deg,
+    //     rgba(0, 148, 255, 0) 0%,
+    //     rgba(0, 148, 255, 0.43) 51%,
+    //     rgba(0, 148, 255, 0) 99%
+    //   );
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
diff --git a/src/views/dashboard-zhongzi/components/topology/index.vue b/src/views/dashboard-zhongzi/components/topology/index.vue
new file mode 100644
index 0000000..4fbc479
--- /dev/null
+++ b/src/views/dashboard-zhongzi/components/topology/index.vue
@@ -0,0 +1,845 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <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 1430 525"
+        >
+          <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>
+          <image
+            :xlink:href="gridImg"
+            x="30"
+            y="30"
+            width="45"
+            height="60"
+          />
+          <text x="40" y="100" fill="#ffffff" font-size="12">电网</text>
+
+          <text x="1350" y="50" fill="#ffffff" font-size="16">10kV</text>
+          <!-- <polyline
+            points="85,55 300,55 300,200 400,200 400,55 1400,55"
+            fill="none"
+            class="g-rect-path"
+            stroke-width="2"
+            stroke="#0094FF"
+          /> -->
+          <polyline
+            points="85,55 310,55"
+            fill="none"
+            class="g-rect-path"
+            stroke-width="2"
+            stroke="#0094FF"
+          />
+          <polyline
+            points="300,200 300,55"
+            fill="none"
+            class="g-rect-path"
+            stroke-width="1"
+            stroke="#0094FF"
+          />
+          <polyline
+            points="400,200 400,55"
+            fill="none"
+            class="g-rect-path"
+            stroke-width="1"
+            stroke="#0094FF"
+          />
+          <polyline
+            points="300,200 400,200"
+            fill="none"
+            class="g-rect-path"
+            stroke-width="1"
+            stroke="#0094FF"
+          />
+          <polyline
+            points="390,55 1400,55"
+            fill="none"
+            class="g-rect-path"
+            stroke-width="2"
+            stroke="#0094FF"
+          />
+
+          <image
+            :xlink:href="FrameImg"
+            x="1360"
+            y="185"
+            width="45"
+            height="60"
+          />
+          <text x="1370" y="255" fill="#ffffff" font-size="12">光伏</text>
+          <polyline
+            points="1380,55 1380,200"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-width="1"
+          />
+          <polyline
+            points="200,115 300,115"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-dasharray="3 3"
+          />
+          <image
+            :xlink:href="ammeterImg"
+            x="140"
+            y="90"
+            width="70"
+            height="50"
+            style="cursor: pointer;"
+            @click="lookDeviceDetail('1-ammeter')"
+          />
+          <text x="155" y="160" fill="#ffffff" font-size="14">电表4</text>
+          <g v-for="(item,index) in ammeter_1" :key="item.id">
+            <text x="95" :y="175 + ( 20 * index)" fill="#ffffff" font-size="14">
+              {{ item.name }}
+            </text>
+            <text :x="countChineseAndEnglishCharacters(item.name,95)" :y="175 + ( 20 * index)" fill="#FFB800" font-size="14">
+              {{ item.value }}
+            </text>
+          </g>
+          <image
+            :xlink:href="AY"
+            x="595"
+            y="185"
+            width="70"
+            height="50"
+          />
+          <polyline
+            points="630,235 630,250"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-width="1"
+          />
+          <text x="1000" y="245" fill="#ffffff" font-size="16">400V</text>
+          <polyline
+            points="150,250 1050,250"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-width="2"
+          />
+          <polyline
+            points="350,250 350,300"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-width="1"
+          />
+          <polyline
+            points="850,250 850,300"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-width="1"
+          />
+
+          <text x="10" y="430" fill="#ffffff" font-size="14">工作状态</text>
+
+          <text x="10" y="460" fill="#ffffff" font-size="14">有功功率(kW)</text>
+          <text x="10" y="490" fill="#ffffff" font-size="14">SOC(%)</text>
+          <text x="10" y="520" fill="#ffffff" font-size="14">SOH(%)</text>
+          <g transform="translate(50,-30)">
+            <rect
+              x="40"
+              y="330"
+              width="580"
+              height="100"
+              rx="3"
+              :style="{ fill: 'transparent', stroke: '#FFFFFF' }"
+            />
+
+            <rect
+              x="640"
+              y="330"
+              width="680"
+              height="100"
+              rx="3"
+              :style="{ fill: 'transparent', stroke: '#FFFFFF' }"
+            />
+            <text x="50" y="348" fill="#ffffff" font-size="14">1#储能柜</text>
+            <text x="65" y="460" fill="#FFB800" font-size="14">{{ pcsData_1.length ? pcsData_1[0].value : '' }}</text>
+            <text x="65" y="490" fill="#FFB800" font-size="14">{{ pcsData_1.length > 1 ? pcsData_1[1].value : '' }}</text>
+            <text x="65" y="520" fill="#FFB800" font-size="14">{{ pcsData_1.length > 2 ? pcsData_1[2].value : '' }}</text>
+            <text x="65" y="550" fill="#FFB800" font-size="14">{{ pcsData_1.length > 3 ? pcsData_1[3].value : '' }}</text>
+            <image
+              :xlink:href="cabinetImg"
+              x="55"
+              y="353"
+              width="60"
+              height="60"
+              style="cursor: pointer;"
+              @click="lookDeviceDetail('aopu10-1-pcs')"
+            />
+            <text x="120" y="348" fill="#ffffff" font-size="14">2#储能柜</text>
+            <text x="135" y="460" fill="#FFB800" font-size="14">{{ pcsData_2.length ? pcsData_2[0].value : '' }}</text>
+            <text x="135" y="490" fill="#FFB800" font-size="14">{{ pcsData_2.length > 1 ? pcsData_2[1].value : '' }}</text>
+            <text x="135" y="520" fill="#FFB800" font-size="14">{{ pcsData_2.length > 2 ? pcsData_2[2].value : '' }}</text>
+            <text x="135" y="550" fill="#FFB800" font-size="14">{{ pcsData_2.length > 3 ? pcsData_2[3].value : '' }}</text>
+            <image
+              :xlink:href="cabinetImg"
+              x="125"
+              y="353"
+              width="60"
+              height="60"
+              style="cursor: pointer;"
+              @click="lookDeviceDetail('aopu10-2-pcs')"
+            />
+            <text x="190" y="348" fill="#ffffff" font-size="14">3#储能柜</text>
+            <text x="205" y="460" fill="#FFB800" font-size="14">{{ pcsData_3.length ? pcsData_3[0].value : '' }}</text>
+            <text x="205" y="490" fill="#FFB800" font-size="14">{{ pcsData_3.length > 1 ? pcsData_3[1].value : '' }}</text>
+            <text x="205" y="520" fill="#FFB800" font-size="14">{{ pcsData_3.length > 2 ? pcsData_3[2].value : '' }}</text>
+            <text x="205" y="550" fill="#FFB800" font-size="14">{{ pcsData_3.length > 3 ? pcsData_3[3].value : '' }}</text>
+            <image
+              :xlink:href="cabinetImg"
+              x="195"
+              y="353"
+              width="60"
+              height="60"
+              style="cursor: pointer;"
+              @click="lookDeviceDetail('aopu10-3-pcs')"
+            />
+            <text x="260" y="348" fill="#ffffff" font-size="14">4#储能柜</text>
+            <text x="275" y="460" fill="#FFB800" font-size="14">{{ pcsData_4.length ? pcsData_4[0].value : '' }}</text>
+            <text x="275" y="490" fill="#FFB800" font-size="14">{{ pcsData_4.length > 1 ? pcsData_4[1].value : '' }}</text>
+            <text x="275" y="520" fill="#FFB800" font-size="14">{{ pcsData_4.length > 2 ? pcsData_4[2].value : '' }}</text>
+            <text x="275" y="550" fill="#FFB800" font-size="14">{{ pcsData_4.length > 3 ? pcsData_4[3].value : '' }}</text>
+            <image
+              :xlink:href="cabinetImg"
+              x="265"
+              y="353"
+              width="60"
+              height="60"
+              style="cursor: pointer;"
+              @click="lookDeviceDetail('aopu10-4-pcs')"
+            />
+            <text x="330" y="348" fill="#ffffff" font-size="14">5#储能柜</text>
+            <text x="345" y="460" fill="#FFB800" font-size="14">{{ pcsData_5.length ? pcsData_5[0].value : '' }}</text>
+            <text x="345" y="490" fill="#FFB800" font-size="14">{{ pcsData_5.length > 1 ? pcsData_5[1].value : '' }}</text>
+            <text x="345" y="520" fill="#FFB800" font-size="14">{{ pcsData_5.length > 2 ? pcsData_5[2].value : '' }}</text>
+            <text x="345" y="550" fill="#FFB800" font-size="14">{{ pcsData_5.length > 3 ? pcsData_5[3].value : '' }}</text>
+            <image
+              :xlink:href="cabinetImg"
+              x="335"
+              y="353"
+              width="60"
+              height="60"
+              style="cursor: pointer;"
+              @click="lookDeviceDetail('aopu10-5-pcs')"
+            />
+
+            <text x="400" y="348" fill="#ffffff" font-size="14">6#储能柜</text>
+            <text x="415" y="460" fill="#FFB800" font-size="14">{{ pcsData_6.length ? pcsData_6[0].value : '' }}</text>
+            <text x="415" y="490" fill="#FFB800" font-size="14">{{ pcsData_6.length > 1 ? pcsData_6[1].value : '' }}</text>
+            <text x="415" y="520" fill="#FFB800" font-size="14">{{ pcsData_6.length > 2 ? pcsData_6[2].value : '' }}</text>
+            <text x="415" y="550" fill="#FFB800" font-size="14">{{ pcsData_6.length > 3 ? pcsData_6[3].value : '' }}</text>
+            <image
+              :xlink:href="cabinetImg"
+              x="405"
+              y="353"
+              width="60"
+              height="60"
+              style="cursor: pointer;"
+              @click="lookDeviceDetail('aopu10-6-pcs')"
+            />
+
+            <text x="470" y="348" fill="#ffffff" font-size="14">7#储能柜</text>
+            <text x="485" y="460" fill="#FFB800" font-size="14">{{ pcsData_7.length ? pcsData_7[0].value : '' }}</text>
+            <text x="485" y="490" fill="#FFB800" font-size="14">{{ pcsData_7.length > 1 ? pcsData_7[1].value : '' }}</text>
+            <text x="485" y="520" fill="#FFB800" font-size="14">{{ pcsData_7.length > 2 ? pcsData_7[2].value : '' }}</text>
+            <text x="485" y="550" fill="#FFB800" font-size="14">{{ pcsData_7.length > 3 ? pcsData_7[3].value : '' }}</text>
+            <image
+              :xlink:href="cabinetImg"
+              x="475"
+              y="353"
+              width="60"
+              height="60"
+              style="cursor: pointer;"
+              @click="lookDeviceDetail('aopu10-7-pcs')"
+            />
+
+            <text x="540" y="348" fill="#ffffff" font-size="14">8#储能柜</text>
+            <text x="555" y="460" fill="#FFB800" font-size="14">{{ pcsData_8.length ? pcsData_8[0].value : '' }}</text>
+            <text x="555" y="490" fill="#FFB800" font-size="14">{{ pcsData_8.length > 1 ? pcsData_8[1].value : '' }}</text>
+            <text x="555" y="520" fill="#FFB800" font-size="14">{{ pcsData_8.length > 2 ? pcsData_8[2].value : '' }}</text>
+            <text x="555" y="550" fill="#FFB800" font-size="14">{{ pcsData_8.length > 3 ? pcsData_8[3].value : '' }}</text>
+            <image
+              :xlink:href="cabinetImg"
+              x="545"
+              y="353"
+              width="60"
+              height="60"
+              style="cursor: pointer;"
+              @click="lookDeviceDetail('aopu10-8-pcs')"
+            />
+
+            <text x="650" y="348" fill="#ffffff" font-size="14">9#储能柜</text>
+            <text x="665" y="460" fill="#FFB800" font-size="14">{{ pcsData_9.length ? pcsData_9[0].value : '' }}</text>
+            <text x="665" y="490" fill="#FFB800" font-size="14">{{ pcsData_9.length > 1 ? pcsData_9[1].value : '' }}</text>
+            <text x="665" y="520" fill="#FFB800" font-size="14">{{ pcsData_9.length > 2 ? pcsData_9[2].value : '' }}</text>
+            <text x="665" y="550" fill="#FFB800" font-size="14">{{ pcsData_9.length > 3 ? pcsData_9[3].value : '' }}</text>
+            <image
+              :xlink:href="cabinetImg"
+              x="655"
+              y="353"
+              width="60"
+              height="60"
+              style="cursor: pointer;"
+              @click="lookDeviceDetail('aopu10-9-pcs')"
+            />
+
+            <text x="720" y="348" fill="#ffffff" font-size="14">10#储能柜</text>
+            <text x="735" y="460" fill="#FFB800" font-size="14">{{ pcsData_10.length ? pcsData_10[0].value : '' }}</text>
+            <text x="735" y="490" fill="#FFB800" font-size="14">{{ pcsData_10.length > 1 ? pcsData_10[1].value : '' }}</text>
+            <text x="735" y="520" fill="#FFB800" font-size="14">{{ pcsData_10.length > 2 ? pcsData_10[2].value : '' }}</text>
+            <text x="735" y="550" fill="#FFB800" font-size="14">{{ pcsData_10.length > 3 ? pcsData_10[3].value : '' }}</text>
+            <image
+              :xlink:href="cabinetImg"
+              x="725"
+              y="353"
+              width="60"
+              height="60"
+              style="cursor: pointer;"
+              @click="lookDeviceDetail('aopu10-10-pcs')"
+            />
+
+            <text x="790" y="348" fill="#ffffff" font-size="14">11#储能柜</text>
+            <text x="805" y="460" fill="#FFB800" font-size="14">{{ pcsData_11.length ? pcsData_11[0].value : '' }}</text>
+            <text x="805" y="490" fill="#FFB800" font-size="14">{{ pcsData_11.length > 1 ? pcsData_11[1].value : '' }}</text>
+            <text x="805" y="520" fill="#FFB800" font-size="14">{{ pcsData_11.length > 2 ? pcsData_11[2].value : '' }}</text>
+            <text x="805" y="550" fill="#FFB800" font-size="14">{{ pcsData_11.length > 3 ? pcsData_11[3].value : '' }}</text>
+            <image
+              :xlink:href="cabinetImg"
+              x="795"
+              y="353"
+              width="60"
+              height="60"
+              style="cursor: pointer;"
+              @click="lookDeviceDetail('11-pcs')"
+            />
+
+            <text x="860" y="348" fill="#ffffff" font-size="14">12#储能柜</text>
+            <text x="875" y="460" fill="#FFB800" font-size="14">{{ pcsData_12.length ? pcsData_12[0].value : '' }}</text>
+            <text x="875" y="490" fill="#FFB800" font-size="14">{{ pcsData_12.length > 1 ? pcsData_12[1].value : '' }}</text>
+            <text x="875" y="520" fill="#FFB800" font-size="14">{{ pcsData_12.length > 2 ? pcsData_12[2].value : '' }}</text>
+            <text x="875" y="550" fill="#FFB800" font-size="14">{{ pcsData_12.length > 3 ? pcsData_12[3].value : '' }}</text>
+            <image
+              :xlink:href="cabinetImg"
+              x="865"
+              y="353"
+              width="60"
+              height="60"
+              style="cursor: pointer;"
+              @click="lookDeviceDetail('12-pcs')"
+            />
+
+            <text x="930" y="348" fill="#ffffff" font-size="14">13#储能柜</text>
+            <text x="945" y="460" fill="#FFB800" font-size="14">{{ pcsData_13.length ? pcsData_13[0].value : '' }}</text>
+            <text x="945" y="490" fill="#FFB800" font-size="14">{{ pcsData_13.length > 1 ? pcsData_13[1].value : '' }}</text>
+            <text x="945" y="520" fill="#FFB800" font-size="14">{{ pcsData_13.length > 2 ? pcsData_13[2].value : '' }}</text>
+            <text x="945" y="550" fill="#FFB800" font-size="14">{{ pcsData_13.length > 3 ? pcsData_13[3].value : '' }}</text>
+            <image
+              :xlink:href="cabinetImg"
+              x="935"
+              y="353"
+              width="60"
+              height="60"
+              style="cursor: pointer;"
+              @click="lookDeviceDetail('13-pcs')"
+            />
+
+            <text x="1000" y="348" fill="#ffffff" font-size="14">14#储能柜</text>
+            <text x="1015" y="460" fill="#FFB800" font-size="14">{{ pcsData_14.length ? pcsData_14[0].value : '' }}</text>
+            <text x="1015" y="490" fill="#FFB800" font-size="14">{{ pcsData_14.length > 1 ? pcsData_14[1].value : '' }}</text>
+            <text x="1015" y="520" fill="#FFB800" font-size="14">{{ pcsData_14.length > 2 ? pcsData_14[2].value : '' }}</text>
+            <text x="1015" y="550" fill="#FFB800" font-size="14">{{ pcsData_14.length > 3 ? pcsData_14[3].value : '' }}</text>
+            <image
+              :xlink:href="cabinetImg"
+              x="1005"
+              y="353"
+              width="60"
+              height="60"
+              style="cursor: pointer;"
+              @click="lookDeviceDetail('14-pcs')"
+            />
+
+            <text x="1070" y="348" fill="#ffffff" font-size="14">15#储能柜</text>
+            <text x="1085" y="460" fill="#FFB800" font-size="14">{{ pcsData_15.length ? pcsData_15[0].value : '' }}</text>
+            <text x="1085" y="490" fill="#FFB800" font-size="14">{{ pcsData_15.length > 1 ? pcsData_15[1].value : '' }}</text>
+            <text x="1085" y="520" fill="#FFB800" font-size="14">{{ pcsData_15.length > 2 ? pcsData_15[2].value : '' }}</text>
+            <text x="1085" y="550" fill="#FFB800" font-size="14">{{ pcsData_15.length > 3 ? pcsData_15[3].value : '' }}</text>
+            <image
+              :xlink:href="cabinetImg"
+              x="1075"
+              y="353"
+              width="60"
+              height="60"
+              style="cursor: pointer;"
+              @click="lookDeviceDetail('15-pcs')"
+            />
+
+            <text x="1140" y="348" fill="#ffffff" font-size="14">16#储能柜</text>
+            <text x="1155" y="460" fill="#FFB800" font-size="14">{{ pcsData_16.length ? pcsData_16[0].value : '' }}</text>
+            <text x="1155" y="490" fill="#FFB800" font-size="14">{{ pcsData_16.length > 1 ? pcsData_16[1].value : '' }}</text>
+            <text x="1155" y="520" fill="#FFB800" font-size="14">{{ pcsData_16.length > 2 ? pcsData_16[2].value : '' }}</text>
+            <text x="1155" y="550" fill="#FFB800" font-size="14">{{ pcsData_16.length > 3 ? pcsData_16[3].value : '' }}</text>
+            <image
+              :xlink:href="cabinetImg"
+              x="1145"
+              y="353"
+              width="60"
+              height="60"
+              style="cursor: pointer;"
+              @click="lookDeviceDetail('16-pcs')"
+            />
+
+            <text x="1210" y="348" fill="#ffffff" font-size="14">17#储能柜</text>
+            <text x="1225" y="460" fill="#FFB800" font-size="14">{{ pcsData_17.length ? pcsData_17[0].value : '' }}</text>
+            <text x="1225" y="490" fill="#FFB800" font-size="14">{{ pcsData_17.length > 1 ? pcsData_17[1].value : '' }}</text>
+            <text x="1225" y="520" fill="#FFB800" font-size="14">{{ pcsData_17.length > 2 ? pcsData_17[2].value : '' }}</text>
+            <text x="1225" y="550" fill="#FFB800" font-size="14">{{ pcsData_17.length > 3 ? pcsData_17[3].value : '' }}</text>
+            <image
+              :xlink:href="cabinetImg"
+              x="1215"
+              y="353"
+              width="60"
+              height="60"
+              style="cursor: pointer;"
+              @click="lookDeviceDetail('17-pcs')"
+            />
+          </g>
+
+          <polyline
+            points="500,115 630,115"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-dasharray="3 3"
+          />
+          <polyline
+            points="630,55 630,185"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-width="1"
+          />
+
+          <image
+            :xlink:href="ammeterImg"
+            x="460"
+            y="90"
+            width="70"
+            height="50"
+            style="cursor: pointer;"
+            @click="lookDeviceDetail('2-ammeter')"
+          />
+          <text x="475" y="160" fill="#ffffff" font-size="14">电表3</text>
+          <g v-for="(item,index) in ammeter_2" :key="item.id">
+            <text x="410" :y="175 + ( 20 * index)" fill="#ffffff" font-size="14">
+              {{ item.name }}
+            </text>
+            <text :x="countChineseAndEnglishCharacters(item.name,410)" :y="175 + ( 20 * index)" fill="#FFB800" font-size="14">
+              {{ item.value }}
+            </text>
+          </g>
+          <image
+            :xlink:href="ammeterImg"
+            x="810"
+            y="90"
+            width="70"
+            height="50"
+            style="cursor: pointer;"
+            @click="lookDeviceDetail('3-ammeter')"
+          />
+          <text x="825" y="160" fill="#ffffff" font-size="14">电表2</text>
+          <g v-for="(item,index) in ammeter_3" :key="item.id">
+            <text x="765" :y="175 + ( 20 * index)" fill="#ffffff" font-size="14">
+              {{ item.name }}
+            </text>
+            <text :x="countChineseAndEnglishCharacters(item.name,765)" :y="175 + ( 20 * index)" fill="#FFB800" font-size="14">
+              {{ item.value }}
+            </text>
+          </g>
+
+          <polyline
+            points="840,55 840,100"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-dasharray="3 3"
+          />
+
+          <image
+            :xlink:href="chargingPileImg"
+            x="1068"
+            y="185"
+            width="70"
+            height="50"
+          />
+          <text x="1090" y="255" fill="#ffffff" font-size="12">负载</text>
+          <polyline
+            points="1100,55 1100,210"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-width="1"
+          />
+
+          <polyline
+            points="1230,115 1380,115"
+            fill="none"
+            class="g-rect-path"
+            stroke="#0094FF"
+            stroke-dasharray="3 3"
+          />
+          <image
+            :xlink:href="ammeterImg"
+            x="1180"
+            y="90"
+            width="70"
+            height="50"
+            style="cursor: pointer;"
+            @click="lookDeviceDetail('4-ammeter')"
+          />
+          <text x="1200" y="160" fill="#ffffff" font-size="14">电表1</text>
+          <g v-for="(item,index) in ammeter_4" :key="item.id">
+            <text x="1140" :y="175 + ( 20 * index)" fill="#ffffff" font-size="14">
+              {{ item.name }}
+            </text>
+            <text :x="countChineseAndEnglishCharacters(item.name,1140)" :y="175 + ( 20 * index)" fill="#FFB800" font-size="14">
+              {{ item.value }}
+            </text>
+          </g>
+
+          <rect
+            x="395"
+            y="140"
+            width="12"
+            height="22"
+            :style="{ fill: break_1.length ? getBreakColor(break_1[0].value) : '#888888', stroke: 'transparent',cursor: 'pointer' }"
+            @click="lookDeviceDetail('1-break')"
+          />
+          <rect
+            x="625"
+            y="140"
+            width="12"
+            height="22"
+            :style="{ fill: break_2.length ? getBreakColor(break_2[0].value) : '#888888', stroke: 'transparent',cursor: 'pointer' }"
+            @click="lookDeviceDetail('2-break')"
+          />
+          <rect
+            x="1095"
+            y="140"
+            width="12"
+            height="22"
+            :style="{ fill: break_3.length ? getBreakColor(break_3[0].value) : '#888888', stroke: 'transparent',cursor: 'pointer' }"
+            @click="lookDeviceDetail('3-break')"
+          />
+          <rect
+            x="1374"
+            y="140"
+            width="12"
+            height="22"
+            :style="{ fill: break_4.length ? getBreakColor(break_4[0].value) : '#888888', stroke: 'transparent',cursor: 'pointer' }"
+            @click="lookDeviceDetail('4-break')"
+          />
+          <rect
+            x="345"
+            y="265"
+            width="12"
+            height="22"
+            :style="{ fill: break_5.length ? getBreakColor(break_5[0].value) : '#888888', stroke: 'transparent',cursor: 'pointer' }"
+            @click="lookDeviceDetail('5-break')"
+          />
+          <rect
+            x="845"
+            y="265"
+            width="12"
+            height="22"
+            :style="{ fill: break_6.length ? getBreakColor(break_6[0].value) : '#888888', stroke: 'transparent',cursor: 'pointer' }"
+            @click="lookDeviceDetail('6-break')"
+          />
+        </svg>
+      </div>
+    </div>
+    <dispositionPointDialog
+      is-topology
+      :show-div-location="true"
+      :max-length="12"
+      :page-location="pageLocation"
+      :visible="show_point_dispostion"
+      @close="closePoint"
+      @getData="getDynamicPointData"
+    />
+  </div>
+</template>
+<script>
+import { DynamicConfigPoint } from '@/api/home-page/index'
+import cabinetImg from '@/assets/images/wxjd/cabinet.png'
+import chargingPileImg from '@/assets/images/home-office.png'
+import gridImg from '@/assets/images/wxjd/grid.png'
+import AY from '@/assets/images/wxjd/AY.png'
+import ammeterImg from '@/assets/images/wxjd/ammeter.png'
+import FrameImg from '@/assets/images/wxjd/frame.png'
+export default {
+  props: {
+    stationId: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      gridImg,
+      ammeterImg,
+      AY,
+      FrameImg,
+      cabinetImg,
+      chargingPileImg,
+      pageLocation: '',
+      permissionId: null,
+      loading: false,
+      show_point_dispostion: false,
+      allData: [],
+      pcsData_1: [],
+      pcsData_2: [],
+      pcsData_3: [],
+      pcsData_4: [],
+      pcsData_5: [],
+      pcsData_6: [],
+      pcsData_7: [],
+      pcsData_8: [],
+      pcsData_9: [],
+      pcsData_10: [],
+      pcsData_11: [],
+      pcsData_12: [],
+      pcsData_13: [],
+      pcsData_14: [],
+      pcsData_15: [],
+      pcsData_16: [],
+      pcsData_17: [],
+      ammeter_1: [],
+      ammeter_2: [],
+      ammeter_3: [],
+      ammeter_4: [],
+      break_1: [],
+      break_2: [],
+      break_3: [],
+      break_4: [],
+      break_5: [],
+      break_6: []
+
+    }
+  },
+  computed: {
+
+  },
+  created() {
+    setTimeout(() => {
+      if (this.$store.getters.menuList.length) {
+        this.permissionId = this.$store.getters.menuList.find(item => {
+          return item.url === this.$route.path
+        }).id
+      }
+    }, 300)
+  },
+  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')
+    },
+    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.pcsData_8 = []
+        this.pcsData_9 = []
+        this.pcsData_10 = []
+        this.pcsData_11 = []
+        this.pcsData_12 = []
+        this.pcsData_13 = []
+        this.pcsData_14 = []
+        this.pcsData_15 = []
+        this.pcsData_16 = []
+        this.pcsData_17 = []
+        this.ammeter_1 = []
+        this.ammeter_2 = []
+        this.ammeter_3 = []
+        this.ammeter_4 = []
+        this.break_1 = []
+        this.break_2 = []
+        this.break_3 = []
+        this.break_4 = []
+        this.break_5 = []
+        this.break_6 = []
+        if (res.data.length) {
+          res.data.forEach((item) => {
+            if (item.pageLocation === '1-pcs') {
+              this.pcsData_1.push(item)
+            } else if (item.pageLocation === '2-pcs') {
+              this.pcsData_2.push(item)
+            } else if (item.pageLocation === '3-pcs') {
+              this.pcsData_3.push(item)
+            } else if (item.pageLocation === '4-pcs') {
+              this.pcsData_4.push(item)
+            } else if (item.pageLocation === '5-pcs') {
+              this.pcsData_5.push(item)
+            } else if (item.pageLocation === '6-pcs') {
+              this.pcsData_6.push(item)
+            } else if (item.pageLocation === '7-pcs') {
+              this.pcsData_7.push(item)
+            } else if (item.pageLocation === '8-pcs') {
+              this.pcsData_8.push(item)
+            } else if (item.pageLocation === '9-pcs') {
+              this.pcsData_9.push(item)
+            } else if (item.pageLocation === '10-pcs') {
+              this.pcsData_10.push(item)
+            } else if (item.pageLocation === '11-pcs') {
+              this.pcsData_11.push(item)
+            } else if (item.pageLocation === '12-pcs') {
+              this.pcsData_12.push(item)
+            } else if (item.pageLocation === '13-pcs') {
+              this.pcsData_13.push(item)
+            } else if (item.pageLocation === '14-pcs') {
+              this.pcsData_14.push(item)
+            } else if (item.pageLocation === '15-pcs') {
+              this.pcsData_15.push(item)
+            } else if (item.pageLocation === '16-pcs') {
+              this.pcsData_16.push(item)
+            } else if (item.pageLocation === '17-pcs') {
+              this.pcsData_17.push(item)
+            } else if (item.pageLocation === '1-ammeter') {
+              this.ammeter_1.push(item)
+            } else if (item.pageLocation === '2-ammeter') {
+              this.ammeter_2.push(item)
+            } else if (item.pageLocation === '3-ammeter') {
+              this.ammeter_3.push(item)
+            } else if (item.pageLocation === '4-ammeter') {
+              this.ammeter_4.push(item)
+            } else if (item.pageLocation === '1-break') {
+              this.break_1.push(item)
+            } else if (item.pageLocation === '2-break') {
+              this.break_2.push(item)
+            } else if (item.pageLocation === '3-break') {
+              this.break_3.push(item)
+            } else if (item.pageLocation === '4-break') {
+              this.break_4.push(item)
+            } else if (item.pageLocation === '5-break') {
+              this.break_5.push(item)
+            } else if (item.pageLocation === '6-break') {
+              this.break_6.push(item)
+            }
+          })
+        }
+        console.log(this.pcsData_1, this.pcsData_2)
+        // this.allData = res.data
+      } 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>
diff --git a/src/views/dashboard-zhongzi/index.vue b/src/views/dashboard-zhongzi/index.vue
new file mode 100644
index 0000000..3c4c894
--- /dev/null
+++ b/src/views/dashboard-zhongzi/index.vue
@@ -0,0 +1,169 @@
+<template>
+  <div class="home-container">
+    <el-row :gutter="10" style="height: 100%;">
+      <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :offset="0" style="height: 100%; display: flex;flex-direction: column;">
+        <div class="component-wrapper">
+          <topLeft ref="leftTop" :station-id="stationId" @handleSetting="handleStationSetting" />
+        </div>
+        <div class="component-bottom">
+          <bottomLeft ref="leftBottom" :station-id="stationId" @handleSetting="handleAirSetting" />
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18" :offset="0" style="height: 100%;">
+        <topRight ref="topRight" :station-id="stationId" @handleSetting="handleSetting" @toScale="toScale" />
+      </el-col>
+    </el-row>
+
+    <dispostionDialog :visible="show_dispostion" page-location="runChart" @close="close" @getData="getDynamicData" />
+    <!--  <el-dialog
+    :append-to-body="true" title="站点拓扑" :visible.sync="dialogVisible" width="90%" top="40px" center :close-on-click-modal="false">
+
+      <topology ref="topology" :station-id="stationId" />
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
+      </span>
+
+    </el-dialog> -->
+  </div>
+</template>
+
+<script>
+import topRight from './components/top-right/index.vue'
+import topLeft from './components/top-left/index.vue'
+import bottomLeft from './components/bottom-left/index.vue'
+export default {
+  name: 'Index',
+  components: {
+    topRight, topLeft, bottomLeft
+  },
+  props: {},
+  data() {
+    return {
+      stationId: null,
+      interval: null,
+      show_dispostion: false,
+      dialogVisible: false
+    }
+  },
+  computed: {
+    currentStation() {
+      return this.$store.getters.currentStation || undefined
+    },
+    stationStatus() {
+      return this.$store.getters.stationStatus || undefined
+    },
+    language() {
+      return this.$store.getters.language || undefined
+    }
+  },
+
+  watch: {
+    currentStation: {
+      handler(val) {
+        if (val && val.id) {
+          const self = this
+          if (self.interval) {
+            clearInterval(self.interval)
+            self.interval = null
+          }
+          this.stationId = val.id
+          this.$nextTick(() => {
+            this.getAllData()
+            self.interval = setInterval(() => {
+              this.getAllData()
+            }, 30000)
+          })
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    language: {
+      handler() {
+        this.$refs.leftBottom.getData()
+      }
+    },
+    deep: true
+  },
+
+  created() {
+
+  },
+  beforeDestroy() {
+    clearInterval(this.interval)
+    this.interval = null
+  },
+  mounted() {
+
+  },
+  methods: {
+    toScale() {
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        // debugger
+        this.$refs.topology.getData()
+      })
+    },
+    handleCurveSetting() {
+      this.show_dispostion = true
+    },
+    getDynamicData() {
+      // this.$refs.bottomRight.getData()
+    },
+    close() {
+      this.show_dispostion = false
+    },
+    handleStationSetting() {
+      this.$refs.leftTop.show_point_dispostion = true
+    },
+    handleAirSetting() {
+      this.$refs.leftBottom.show_point_dispostion = true
+    },
+    handleSetting() {
+      this.$refs.topRight.show_point_dispostion = true
+    },
+    getAllData() {
+      this.$refs.leftTop.getData()
+      this.$refs.leftBottom.getData()
+      this.$refs.topRight.getData()
+      // this.$refs.bottomRight.getData()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.home-container {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  .top-wrapper {
+    width: 100%;
+    height: 100%;
+    height: 560px;
+    min-height: 560px;
+    padding-bottom: 10px;
+
+  }
+  .component-wrapper {
+      width: 100%;
+      flex: 2;
+      margin-bottom: 10px;
+
+    }
+    .component-bottom {
+      width: 100%;
+      flex: 1;
+    }
+  .bottom-wrapper {
+    width: 100%;
+    height: 100%;
+    height: 240px;
+    min-height: 240px;
+    padding-bottom: 10px;
+
+  }
+}
+</style>