diff --git a/src/api/energy/kanban/LeadershipView/ApparentState.js b/src/api/energy/kanban/LeadershipView/ApparentState.js
index a68eb3ab..6ce44048 100644
--- a/src/api/energy/kanban/LeadershipView/ApparentState.js
+++ b/src/api/energy/kanban/LeadershipView/ApparentState.js
@@ -1,11 +1,11 @@
 import request from '@/utils/request'
-import { parseStrEmpty } from "@/utils/ruoyi";
+import { parseStrEmpty } from '@/utils/ruoyi'
 
 // 左侧数据
 export function gettreeData(query) {
   return request({
     url: '/energy/buildInfo/treeData',
-    method: 'get',
+    method: 'get'
     // params: query,
   })
 }
@@ -13,24 +13,35 @@ export function gettreeData(query) {
 // 右侧菜单
 export function gettablewareInfo(query) {
   return request({
-    url:  `/energy/report/board/tablewareInfo`,
+    url: `/energy/report/board/tablewareInfo`,
     method: 'get',
-    params: query,
+    params: query
   })
 }
+
 // 详情数据
 export function gettablewareDetailsInfo(query) {
   return request({
     url: '/energy/record/dnbInstant/tablewareDetailsInfo',
     method: 'post',
-    params: query,
+    data: query
   })
 }
+
 // 详情数据水
 export function getwaterInstantInfo(query) {
   return request({
     url: '/energy/record/waterInstant/tablewareDetailsInfo',
     method: 'post',
-    params: query,
+    data: query
+  })
+}
+
+// 详情数据水
+export function tablewareDetailsInfo(query) {
+  return request({
+    url: '/energy/report/board/tablewareDetailsInfo',
+    method: 'get',
+    params: query
   })
-}
\ No newline at end of file
+}
diff --git a/src/assets/images/ApparentState.jpeg b/src/assets/images/ApparentState.jpeg
new file mode 100644
index 00000000..a1cf8da7
Binary files /dev/null and b/src/assets/images/ApparentState.jpeg differ
diff --git a/src/assets/images/electricityModal.png b/src/assets/images/electricityModal.png
new file mode 100644
index 00000000..215c3f3b
Binary files /dev/null and b/src/assets/images/electricityModal.png differ
diff --git a/src/assets/images/electricityOne1.png b/src/assets/images/electricityOne1.png
new file mode 100644
index 00000000..140b9ff5
Binary files /dev/null and b/src/assets/images/electricityOne1.png differ
diff --git a/src/components/demo.vue b/src/components/demo.vue
new file mode 100644
index 00000000..ea056a28
--- /dev/null
+++ b/src/components/demo.vue
@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <div class="item" v-for="i in data">
+      <div :style="i.children?  `transform: translateY(calc(-${(height||[])[i.id]/2}px + ${4*vw}px + 30px));` : ''"
+           :class="i.children? 'item1 itemInb':'itemInb'" ref="item" @click="itemClick(i)"
+      >
+        <div class="icon" ref="icon" :id="i.id" :childrenId="(i.children || []).map(e=>e.id).join(',')">
+          <div class="line" v-for="item in lineData[(i.id||'')]">
+            <div v-if="!item.isTop" :style="`width:${item.width}px;height:${item.height}px;position: absolute;`">
+              <svg :style="`width:${item.width}px;height:${item.height}px;position: absolute`">
+                <path
+                  :d="`M0 0 Q${item.width/2} 0 ${item.width/2} ${item.height/2} ${item.width/2} ${item.height} ${item.width} ${item.height}`"
+                  style="stroke: #fff; stroke-width: 2px; fill: none"
+                />
+              </svg>
+            </div>
+            <div v-else
+                 :style="`width:${item.width}px;height:${item.height}px;transform: translateY(-100%);position: absolute;`"
+            >
+              <svg :style="`width:${item.width}px;height:${item.height}px;position: absolute`">
+                <path
+                  :d="`M0 ${item.height} Q${item.width/2} ${item.height} ${item.width/2} ${item.height/2}   ${item.width/2} 0   ${item.width} 0`"
+                  style="stroke: #fff; stroke-width: 2px; fill: none"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div class="span">
+          <p>{{ i.name }}</p>
+<!--          <p>{{ i.id }}</p>-->
+<!--          <p>{{ i.id }}</p>-->
+        </div>
+      </div>
+      <div v-if="(i.children || []).length>0"
+           :style="`display: inline-block;left:calc${(index+1)*7.7}vw + ${(index+1)*24}px`"
+
+      >
+        <Tree :data="i.children" :index="index+1" ref="Tree" :vw="vw" :id="i.id" @getHeight="getHeight" @itemClick="itemClick"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Tree',
+  props: ['data', 'index', 'vw', 'id'],
+  data() {
+    return {
+      height: null,
+      lineData: {}
+    }
+  },
+  watch: {
+    vw: {
+      deep: true,
+      handler() {
+        this.getHeight()
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getHeight()
+      this.$emit('getHeight')
+    })
+  },
+  methods: {
+    async getHeight() {
+      if (this.$refs.Tree) {
+        let arr = {}
+        this.$refs.Tree.forEach(e => {
+          arr[e.id] = e.$el.offsetHeight
+        })
+        this.height = arr
+      }
+      await this.$nextTick()
+      if (this.$refs?.Tree?.[0]?.$refs) {
+        let icons = this.$refs.icon
+        let icon2s = this.$refs.Tree.map(com => com.$refs.icon).flat(Infinity)
+        icons.forEach(e => {
+          let id = e.getAttribute('id')
+          let po = e.getBoundingClientRect()
+          let data = {
+            top: po.top + (po.height / 2),
+            left: po.left + po.width,
+            children: e.getAttribute('childrenId').split(',')
+          }
+          this.$set(this.lineData, id, icon2s.filter(el => {
+            return data.children.includes(el.getAttribute('id'))
+          }).map(v => {
+            let po2 = v.getBoundingClientRect()
+            let data2 = {
+              top: po2.top + (po2.height / 2),
+              left: po2.left
+            }
+            return {
+              width: data2.left - data.left,
+              height: Math.max(1, ((data.top - data2.top) > 0 ? (data.top - data2.top) : (data2.top - data.top))),
+              isTop: (data.top - data2.top) > 0
+            }
+          }))
+        })
+      }
+    },
+    itemClick(i){
+      this.$emit('itemClick',i)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+.item {
+  width: auto;
+  height: auto;
+  position: relative;
+}
+
+.itemInb {
+  display: inline-block;
+  margin-right: 5vw;
+}
+
+.icon {
+  width: 8vw;
+  height: 8vw;
+  background-image: url("~@/assets/images/electricityOne1.png");
+  background-repeat: no-repeat;
+  position: relative;
+  background-size: 100% 100%;
+
+  .line {
+    position: absolute;
+    top: 50%;
+    left: 100%;
+  }
+}
+
+.span {
+  color: #fff;
+  text-align: center;
+}
+
+.item1 {
+
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 4fd5343a..49336dec 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -150,6 +150,21 @@ export const constantRoutes = [
     component: () => import("@/views/kanban/Dryingprocess/index"),
     hidden: true,
   },
+  {
+    path: "/report/board/LeadershipViewCheart",
+    component: () => import("@/views/energy/LeadershipView/LeadershipViewChearts"),
+    hidden: true,
+  },
+  {
+    path: "/report/board/GroupHomePage",
+    component: () => import("@/views/energy/LeadershipView/GroupHomePage"),
+    hidden: true,
+  },
+  {
+    path: "/report/board/ApparentState",
+    component: () => import("@/views/energy/LeadershipView/ApparentState"),
+    hidden: true,
+  },
 
 ]
 
diff --git a/src/views/energy/LeadershipView/ApparentState/index.vue b/src/views/energy/LeadershipView/ApparentState/index.vue
new file mode 100644
index 00000000..6f7b232b
--- /dev/null
+++ b/src/views/energy/LeadershipView/ApparentState/index.vue
@@ -0,0 +1,388 @@
+<template>
+  <div id="wrapbg" class="app-container" style="height: 100vh">
+    <div class="aa">
+      <Tree :data="treeData" :index="0" :vw="vw" @itemClick="itemClick"/>
+    </div>
+
+    <div
+      v-show="ModelShow"
+      id="modalBg"
+      class="modalBg"
+      @click="ModelShow = false"
+    ></div>
+    <div v-show="ModelShow" class="modalInfo">
+      <span
+        style="
+          position: absolute;
+          top: 33%;
+          left: 17%;
+          transform: translate(-50%, -50%);
+          color: rgb(66, 183, 253);
+          font-size: 22px;
+          font-weight: 600;
+        "
+      >{{ equipment.consumption || 0 }}</span
+      >
+      <span
+        style="
+          position: absolute;
+          top: 37.5%;
+          left: 17%;
+          transform: translate(-50%, -50%);
+          color: rgb(204, 204, 204);
+          font-weight: 600;
+        "
+      >{{ energyType === 2 ? 'kwh' : 'm³' }}</span
+      >
+      <span
+        style="
+          position: absolute;
+          top: 20%;
+          left: 40%;
+          transform: translateY(-50%);
+          color: rgb(204, 204, 204);
+        "
+      >计量设备编号：<span style="color: rgb(255, 255, 255)">{{
+          equipment.monitorId
+        }}</span></span
+      >
+      <span
+        style="
+          position: absolute;
+          top: 32%;
+          left: 40%;
+          transform: translateY(-50%);
+          color: rgb(204, 204, 204);
+        "
+      >计量设备名称：<span style="color: rgb(255, 255, 255)">{{
+          equipment.monitorName
+        }}</span></span
+      >
+      <span
+        style="
+          position: absolute;
+          top: 44%;
+          left: 40%;
+          transform: translateY(-50%);
+          color: rgb(204, 204, 204);
+        "
+      >计量设备位置：<span style="color: rgb(255, 255, 255)">{{
+          equipment.address
+        }}</span></span
+      >
+      <span
+        style="
+          position: absolute;
+          top: 58.2%;
+          left: 26.1%;
+          width: 41.6%;
+          height: 6%;
+          padding-left: 20px;
+          line-height: 34px;
+          transform: translate(-50%, -50%);
+          color: rgb(170, 170, 170);
+          background-color: rgb(5, 33, 83);
+        "
+      >Ua:
+        <span style="color: rgb(204, 204, 204)">{{ equipment.va }}</span></span
+      >
+      <span
+        style="
+          position: absolute;
+          top: 64.2%;
+          left: 26.1%;
+          width: 41.6%;
+          height: 6%;
+          padding-left: 20px;
+          line-height: 34px;
+          transform: translate(-50%, -50%);
+          color: rgb(170, 170, 170);
+        "
+      >Ia:
+        <span style="color: rgb(204, 204, 204)">{{ equipment.ia }}</span></span
+      >
+      <span
+        style="
+          position: absolute;
+          top: 70.2%;
+          left: 26.1%;
+          width: 41.6%;
+          height: 6%;
+          padding-left: 20px;
+          line-height: 34px;
+          transform: translate(-50%, -50%);
+          color: rgb(170, 170, 170);
+          background-color: rgb(5, 33, 83);
+        "
+      >cosΦ:
+        <span style="color: rgb(204, 204, 204)">{{
+            equipment.glys
+          }}</span></span
+      >
+      <span
+        style="
+          position: absolute;
+          top: 76.2%;
+          left: 26.1%;
+          width: 41.6%;
+          height: 6%;
+          padding-left: 20px;
+          line-height: 34px;
+          transform: translate(-50%, -50%);
+          color: rgb(170, 170, 170);
+        "
+      >Ep:
+        <span style="color: rgb(204, 204, 204)">{{ equipment.zxyg }}</span></span
+      >
+      <span
+        style="
+          position: absolute;
+          top: 82.2%;
+          left: 26.1%;
+          width: 41.6%;
+          height: 6%;
+          padding-left: 20px;
+          line-height: 34px;
+          transform: translate(-50%, -50%);
+          color: rgb(170, 170, 170);
+          background-color: rgb(5, 33, 83);
+        "
+      >P总:
+        <span style="color: rgb(204, 204, 204)">{{ equipment.activePower }}</span></span
+      >
+      <span
+        style="
+          position: absolute;
+          top: 88.2%;
+          left: 26.1%;
+          width: 41.6%;
+          height: 6%;
+          padding-left: 20px;
+          line-height: 34px;
+          transform: translate(-50%, -50%);
+          color: rgb(170, 170, 170);
+        "
+      >Q总:
+        <span style="color: rgb(204, 204, 204)">{{ equipment.reactivePower }}</span></span
+      >
+      <span
+        style="
+          position: absolute;
+          top: 58.2%;
+          left: 71.1%;
+          width: 41.6%;
+          height: 6%;
+          padding-left: 20px;
+          line-height: 34px;
+          transform: translate(-50%, -50%);
+          color: rgb(170, 170, 170);
+          background-color: rgb(5, 33, 83);
+        "
+      >A相电流值:
+        <span style="color: rgb(204, 204, 204)">{{ equipment.ia }}</span></span
+      >
+      <span
+        style="
+          position: absolute;
+          top: 64.2%;
+          left: 71.1%;
+          width: 41.6%;
+          height: 6%;
+          padding-left: 20px;
+          line-height: 34px;
+          transform: translate(-50%, -50%);
+          color: rgb(170, 170, 170);
+        "
+      >B相电流值:
+        <span style="color: rgb(204, 204, 204)">{{
+            equipment.ib
+          }}</span></span
+      >
+      <span
+        style="
+          position: absolute;
+          top: 70.2%;
+          left: 71.1%;
+          width: 41.6%;
+          height: 6%;
+          padding-left: 20px;
+          line-height: 34px;
+          transform: translate(-50%, -50%);
+          color: rgb(170, 170, 170);
+          background-color: rgb(5, 33, 83);
+        "
+      >C相电流值:
+        <span style="color: rgb(204, 204, 204)">{{
+            equipment.ic
+          }}</span></span
+      >
+      <span
+        style="
+          position: absolute;
+          top: 76.2%;
+          left: 71.1%;
+          width: 41.6%;
+          height: 6%;
+          padding-left: 20px;
+          line-height: 34px;
+          transform: translate(-50%, -50%);
+          color: rgb(170, 170, 170);
+        "
+      >A相电压值:
+        <span style="color: rgb(204, 204, 204)">{{ equipment.va }}</span></span
+      >
+      <span
+        style="
+          position: absolute;
+          top: 82.2%;
+          left: 71.1%;
+          width: 41.6%;
+          height: 6%;
+          padding-left: 20px;
+          line-height: 34px;
+          transform: translate(-50%, -50%);
+          color: rgb(170, 170, 170);
+          background-color: rgb(5, 33, 83);
+        "
+      >B相电压值:
+        <span style="color: rgb(204, 204, 204)">{{ equipment.vb }}</span></span
+      >
+      <span
+        style="
+          position: absolute;
+          top: 88.2%;
+          left: 71.1%;
+          width: 41.6%;
+          height: 6%;
+          padding-left: 20px;
+          line-height: 34px;
+          transform: translate(-50%, -50%);
+          color: rgb(170, 170, 170);
+        "
+      >C相电压值:
+        <span style="color: rgb(204, 204, 204)">{{ equipment.vc }}</span></span
+      >
+      <div class="closeBtn"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Tree from '@/components/demo'
+import request from '@/utils/request'
+import {
+  tablewareDetailsInfo
+} from '@/api/energy/kanban/LeadershipView/ApparentState'
+
+export default {
+  name: 'Index',
+  components: {
+    Tree
+  },
+  data() {
+    return {
+      vw: document.body.clientWidth / 100,
+      treeData: [],
+      equipment: {},
+      ModelShow:false,
+      energyType:2,
+    }
+  },
+  mounted() {
+    window.onresize = () => {
+      this.vw = document.body.clientWidth / 100
+    }
+    const fun = (arr, data) => {
+      let resData = []
+      arr.forEach(v => {
+        if (v.pId === data.id) {
+          resData.push({
+            ...v,
+            children: fun(arr, v)
+          })
+        }
+      })
+      return resData.length === 0 ? null : resData
+    }
+    request({
+      url: '/energy/report/board/fixtureStatus',
+      method: 'get',
+      params: {
+        energyType: 2
+      }
+    }).then(e => {
+      let data = []
+      e.data.result.forEach(v => {
+        if (v.pId === 0) {
+          let a = {
+            ...v,
+            children: fun(e.data.result, v)
+          }
+          data.push(a)
+        }
+      })
+      this.treeData = data
+      // console.log([data[0]])
+    })
+  },
+  created() {
+  },
+  methods: {
+    itemClick(i){
+      const nowDate = this.parseTime(new Date(), '{y}-{m}-{d}')
+      tablewareDetailsInfo({
+        energyType: 2,
+        monitorId: i.title,
+        beginCollectTime:nowDate + ' 00:00:00',
+        endCollectTime:nowDate + ' 23:59:59'
+      }).then((response) => {
+        console.log(response)
+        this.equipment = response.data.result
+        this.ModelShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.aa {
+  position: absolute;
+  top: 11%;
+  left: 18%;
+  width: 80%;
+  height: 84%;
+  overflow: auto;
+}
+
+.app-container {
+  width: 100%;
+  height: 100vh;
+  background-image: url("~@/assets/images/ApparentState.jpeg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.modalInfo {
+  width: 600px;
+  height: 580px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-image: url("~@/assets/images/electricityModal.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  z-index: 2;
+}
+
+.modalBg {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 1;
+}
+</style>
diff --git a/src/views/energy/LeadershipView/GroupHomePage/index.vue b/src/views/energy/LeadershipView/GroupHomePage/index.vue
new file mode 100644
index 00000000..193a0ac8
--- /dev/null
+++ b/src/views/energy/LeadershipView/GroupHomePage/index.vue
@@ -0,0 +1,1259 @@
+<!--<template>-->
+<!--  <div class="app-container home" style="height: 100vh">-->
+<!--    <div class="left-top" style="top: 10%; left: 3%">-->
+<!--      <div class="left-top-left">-->
+<!--        <div class="title">接入园区数量</div>-->
+<!--        <div class="modal"><span>{{ connectedParksNum }}</span>个</div>-->
+<!--      </div>-->
+<!--      <div class="left-top-right">-->
+<!--        <div class="title">接入设备数量</div>-->
+<!--        <div class="modal"><span>{{ connectedDevicesNum }}</span>个</div>-->
+<!--      </div>-->
+<!--    </div>-->
+<!--    <div class="left-content" style="top: 30%; left: 2.4%">-->
+<!--      <div class="item fl" style="top: -6%">-->
+<!--        <div class="item-top">{{ dataleft.monthDnbConsumption }}kwh</div>-->
+<!--        <div class="item-bottom-left">-->
+<!--          <div class="item-bottom-left-title">-->
+<!--            同比<span>{{ dataleft.dnbMonthMoM }}%</span>-->
+<!--          </div>-->
+<!--          <img alt="" src="../../../assets/images/down.png"/>-->
+<!--        </div>-->
+<!--        <div class="item-bottom-right">-->
+<!--          <div class="item-bottom-left-title">-->
+<!--            环比<span>{{ dataleft.dnbMonthYoY }}%</span>-->
+<!--          </div>-->
+<!--          <img alt="" src="../../../assets/images/up.png"/>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="item fl" style="left: 6%; top: -6%">-->
+<!--        <div class="item-top">{{ dataleft.yearDnbConsumption }}kwh</div>-->
+<!--        <div class="item-bottom-left">-->
+<!--          <div class="item-bottom-left-title">-->
+<!--            同比<span>{{ dataleft.waterMonthMoM }}%</span>-->
+<!--          </div>-->
+<!--          <img alt="" src="../../../assets/images/down.png"/>-->
+<!--        </div>-->
+<!--        <div class="item-bottom-right">-->
+<!--          <div class="item-bottom-left-title">-->
+<!--            环比<span>{{ dataleft.waterMonthYoY }}%</span>-->
+<!--          </div>-->
+<!--          <img alt="" src="../../../assets/images/up.png"/>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="item fl">-->
+<!--        <div class="item-top">{{ dataleft.monthWaterConsumption }}kwh</div>-->
+<!--        <div class="item-bottom-left">-->
+<!--          <div class="item-bottom-left-title">-->
+<!--            同比<span>{{ dataleft.monthWaterConsumption }}%</span>-->
+<!--          </div>-->
+<!--          <img alt="" src="../../../assets/images/down.png"/>-->
+<!--        </div>-->
+<!--        <div class="item-bottom-right">-->
+<!--          <div class="item-bottom-left-title">-->
+<!--            环比<span>{{ dataleft.monthWaterConsumption }}%</span>-->
+<!--          </div>-->
+<!--          <img alt="" src="../../../assets/images/up.png"/>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="item fl" style="left: 6%">-->
+<!--        <div class="item-top">{{ dataleft.yearWaterConsumption }}kwh</div>-->
+<!--        <div class="item-bottom-left">-->
+<!--          <div class="item-bottom-left-title">-->
+<!--            同比<span>{{ dataleft.waterYearMoM }}%</span>-->
+<!--          </div>-->
+<!--          <img alt="" src="../../../assets/images/down.png"/>-->
+<!--        </div>-->
+<!--        <div class="item-bottom-right">-->
+<!--          <div class="item-bottom-left-title">-->
+<!--            环比<span>{{ dataleft.waterYearYoY }}%</span>-->
+<!--          </div>-->
+<!--          <img alt="" src="../../../assets/images/up.png"/>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
+<!--    <div-->
+<!--      class="right-top"-->
+<!--      style="-->
+<!--        width: 20%;-->
+<!--        height: 54%;-->
+<!--        position: absolute;-->
+<!--        top: 11.5%;-->
+<!--        right: 1.5%;-->
+<!--      "-->
+<!--    >-->
+<!--      <div class="right-top-title">-->
+<!--        <div-->
+<!--          :class="{ electricityWaterBg: dian1 }"-->
+<!--          class="fl dian"-->
+<!--          @click="selectDian(2)"-->
+<!--        >-->
+<!--          电量-->
+<!--        </div>-->
+<!--        <div-->
+<!--          :class="{ electricityWaterBg: shui1 }"-->
+<!--          class="fl shui"-->
+<!--          @click="selectDian(3)"-->
+<!--        >-->
+<!--          水量-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="right-top-content" style="width: 100%; height: 96%; overflow: auto" >-->
+<!--        <div v-for="(i,k) in rightItem" class="right-top-content-item" @click="toIndex(i)">-->
+<!--          <div class="TOP"><em>TOP.{{ k + 1 }}</em></div>-->
+<!--          <div class="name">{{ i.name }}</div>-->
+<!--          <div v-if="energyType == 2" class="unit">-->
+<!--            {{ i.value }}kwh-->
+<!--            &lt;!&ndash;            {{ itemscopy.yearEnergy }}kwh&ndash;&gt;-->
+<!--          </div>-->
+<!--          <div v-if="energyType == 3" class="unit">-->
+<!--            {{ i.value }}m³-->
+<!--            &lt;!&ndash;            {{ itemscopy.yearEnergy }}m³&ndash;&gt;-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
+<!--    <div-->
+<!--      id="map"-->
+<!--      class="map"-->
+<!--      style="position: absolute; width: 44%; height: 61%"-->
+<!--    ></div>-->
+<!--    <div-->
+<!--      class="bottom-left"-->
+<!--      style="-->
+<!--        width: 20vw;-->
+<!--        height: 23vh;-->
+<!--        position: absolute;-->
+<!--        bottom: 6.7%;-->
+<!--        left: 1.5%;-->
+<!--      "-->
+<!--    >-->
+<!--      <div class="bottom-left-title">-->
+<!--        <div-->
+<!--          :class="{ electricityWaterBg: dian2 }"-->
+<!--          class="fl dian"-->
+<!--          @click="selectDian2(2)"-->
+<!--        >-->
+<!--          电量-->
+<!--        </div>-->
+<!--        <div-->
+<!--          :class="{ electricityWaterBg: shui2 }"-->
+<!--          class="fl shui"-->
+<!--          @click="selectDian2(3)"-->
+<!--        >-->
+<!--          水量-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div ref="EnergyConsumptionBusinessForm" class="bottom-left-charts"></div>-->
+<!--    </div>-->
+<!--    <div-->
+<!--      class="bottom-center"-->
+<!--      style="-->
+<!--        width: 56.8%;-->
+<!--        height: 26%;-->
+<!--        position: absolute;-->
+<!--        bottom: 4vh;-->
+<!--        left: 20vw;-->
+<!--      "-->
+<!--    >-->
+<!--      <div class="bottom-center-title">-->
+<!--        <div-->
+<!--          :class="{ electricityWaterBg: dian3 }"-->
+<!--          class="fl dian"-->
+<!--          @click="selectDian3(2)"-->
+<!--        >-->
+<!--          电量-->
+<!--        </div>-->
+<!--        <div-->
+<!--          :class="{ electricityWaterBg: shui3 }"-->
+<!--          class="fl shui"-->
+<!--          @click="selectDian3(3)"-->
+<!--        >-->
+<!--          水量-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="block">-->
+<!--        <el-date-picker-->
+<!--          v-model="value1"-->
+<!--          end-placeholder="结束日期"-->
+<!--          range-separator="-&#45;&#45;"-->
+<!--          start-placeholder="开始日期"-->
+<!--          type="daterange"-->
+<!--          unlink-panels-->
+<!--          value-format="yyyy-MM-dd HH:mm:ss"-->
+<!--          @change="change(value1)"-->
+<!--        >-->
+<!--        </el-date-picker>-->
+<!--      </div>-->
+
+<!--      <div-->
+<!--        ref="BottomCenterCharts"-->
+<!--        class="bottom-center-charts"-->
+<!--        style="width: 100%; height: 100%"-->
+<!--      ></div>-->
+<!--    </div>-->
+<!--    <div-->
+<!--      class="bottom-right"-->
+<!--      style="-->
+<!--        width: 20%;-->
+<!--        height: 25%;-->
+<!--        position: absolute;-->
+<!--        bottom: 4.8%;-->
+<!--        right: 1.2%;-->
+<!--      "-->
+<!--    >-->
+<!--      <div class="bottom-right-title">-->
+<!--        <div-->
+<!--          :class="{ electricityWaterBg: dian4 }"-->
+<!--          class="fl dian"-->
+<!--          @click="selectDian4(2)"-->
+<!--        >-->
+<!--          电量-->
+<!--        </div>-->
+<!--        <div-->
+<!--          :class="{ electricityWaterBg: shui4 }"-->
+<!--          class="fl shui"-->
+<!--          @click="selectDian4(3)"-->
+<!--        >-->
+<!--          水量-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div ref="BottomRightBusinessForm" class="bottom-right-charts"></div>-->
+<!--    </div>-->
+<!--  </div>-->
+<!--</template>-->
+
+<!--<script>-->
+<!--import {-->
+<!--  getparkHomepageOverview,-->
+<!--  getfourEnergy,-->
+<!--  getpreviewPolyline,-->
+<!--  getBusinessChart,-->
+<!--  getMapData,-->
+<!--  parkEquipmentNumber,-->
+<!--  parkEnergyRanking-->
+<!--} from "@/api/kanban/LeadershipView/GroupHomePage";-->
+<!--import cityMap from "@/utils/china-main-city-map.json";-->
+<!--import url from "../../../assets/images/mapBg.png";-->
+<!--import {resizeFunc, throttle} from "@/utils/resize.js";-->
+<!--import moment from "moment";-->
+
+<!--export default {-->
+<!--  name: "Index",-->
+<!--  data() {-->
+<!--    return {-->
+<!--      dataleft: "",-->
+<!--      itemscopy: "",-->
+<!--      energyType: "2",-->
+<!--      value1: [],-->
+<!--      beginCollectTime: " ",-->
+<!--      endCollectTime: " ",-->
+<!--      dian1: true,-->
+<!--      shui1: false,-->
+<!--      dian2: true,-->
+<!--      shui2: false,-->
+<!--      dian3: true,-->
+<!--      shui3: false,-->
+<!--      dian4: true,-->
+<!--      shui4: false,-->
+<!--      connectedParksNum: null,-->
+<!--      connectedDevicesNum: null,-->
+<!--      rightItem: [-->
+<!--        {-->
+<!--          name: "西安园区",-->
+<!--          id: 'sf_hw_ems',-->
+<!--          value: '505030'-->
+<!--        }-->
+<!--      ]-->
+<!--    };-->
+<!--  },-->
+<!--  created() {-->
+<!--    var startTime = moment().startOf("months").format("yyyy-MM-DD HH:mm:ss");-->
+<!--    var endTime = moment().endOf("months").format("yyyy-MM-DD HH:mm:ss");-->
+<!--    this.value1[0] = startTime;-->
+<!--    this.value1[1] = endTime;-->
+<!--    this.beginCollectTime = startTime;-->
+<!--    this.endCollectTime = endTime;-->
+<!--  },-->
+<!--  mounted() {-->
+<!--    this.EnergyConsumptionBusinessFormCharts();-->
+<!--    this.BottomRightBusinessFormCharts();-->
+<!--    this.BottomCenterCharts();-->
+<!--    this.getParkEquipmentNumber()-->
+<!--    this.getParkEnergyRanking()-->
+<!--    getMapData().then(e => {-->
+<!--      let data = e.data.map(val => {-->
+<!--        return {-->
+<!--          name: '',-->
+<!--          name1: val.parkName,-->
+<!--          value: [val.longitude, val.latitude],-->
+<!--          id: val.poolName-->
+<!--        }-->
+<!--      })-->
+<!--      this.ChinaMap(data, document.getElementById("map"))-->
+<!--    })-->
+<!--    this.getdata();-->
+<!--  },-->
+<!--  methods: {-->
+<!--    getParkEquipmentNumber() {-->
+<!--      parkEquipmentNumber().then(e => {-->
+<!--        this.connectedParksNum = e.data.parkNumber-->
+<!--        this.connectedDevicesNum = e.data.equipmentNumber-->
+<!--      })-->
+<!--    },-->
+<!--    getParkEnergyRanking() {-->
+<!--      parkEnergyRanking(2).then(e => {-->
+<!--        this.rightItem = e.data.map(val => {-->
+<!--          return {-->
+<!--            name: val.parkName,-->
+<!--            id: val.poolName,-->
+<!--            value: val.yearEnergy-->
+<!--          }-->
+<!--        })-->
+<!--      })-->
+<!--    },-->
+<!--    BottomCenterCharts() {-->
+<!--      let arr = {-->
+<!--        type: 0,-->
+<!--        energyType: this.energyType,-->
+<!--        relationId: 1,-->
+<!--        beginCollectTime: this.beginCollectTime,-->
+<!--        endCollectTime: this.endCollectTime,-->
+<!--      };-->
+<!--      getpreviewPolyline(arr).then((res) => {-->
+<!--        let myChart = this.$echarts.init(this.$refs.BottomCenterCharts);-->
+<!--        var unit = "";-->
+<!--        var name = "";-->
+<!--        if (this.energyType == 2) {-->
+<!--          unit = "kwh";-->
+<!--          name = "电量";-->
+<!--        } else {-->
+<!--          unit = "m³";-->
+<!--          name = "水量";-->
+<!--        }-->
+
+<!--        let data = {-->
+<!--          x: res.data.energyDateList || [],-->
+<!--          y: res.data.todayValueList || [],-->
+<!--        };-->
+<!--        let max = Math.max(...data.y) + 1;-->
+<!--        let interval = Math.ceil(max / 3 / 10) * 10;-->
+<!--        let option = {-->
+<!--          grid: {-->
+<!--            containLabel: true,-->
+<!--            left: "8%",-->
+<!--            right: "2%",-->
+<!--            bottom: "18%",-->
+<!--            // top: 30,-->
+<!--            // width:'100%',-->
+<!--          },-->
+<!--          tooltip: {-->
+<!--            trigger: "axis",-->
+<!--          },-->
+<!--          xAxis: {-->
+<!--            axisLabel: {-->
+<!--              color: "#c0c3cd",-->
+<!--              fontSize: 14,-->
+<!--            },-->
+<!--            axisTick: {-->
+<!--              lineStyle: {-->
+<!--                color: "#384267",-->
+<!--              },-->
+<!--              show: true,-->
+<!--            },-->
+<!--            splitLine: {-->
+<!--              show: false,-->
+<!--            },-->
+<!--            axisLine: {-->
+<!--              lineStyle: {-->
+<!--                color: "rgba(255,255,255,0.1)",-->
+<!--                width: 1,-->
+<!--              },-->
+<!--              show: true,-->
+<!--            },-->
+<!--            data: data.x,-->
+<!--            type: "category",-->
+<!--          },-->
+<!--          yAxis: {-->
+<!--            interval,-->
+<!--            axisLabel: {-->
+<!--              color: "#c0c3cd",-->
+<!--              fontSize: 14,-->
+<!--            },-->
+<!--            axisTick: {-->
+<!--              lineStyle: {-->
+<!--                color: "#384267",-->
+<!--                width: 1,-->
+<!--              },-->
+<!--              show: true,-->
+<!--            },-->
+<!--            splitLine: {-->
+<!--              show: true,-->
+<!--              lineStyle: {-->
+<!--                color: "rgba(255,255,255,0.1)",-->
+<!--              },-->
+<!--            },-->
+<!--            axisLine: {-->
+<!--              lineStyle: {-->
+<!--                color: "rgba(255,255,255,0.1)",-->
+<!--                width: 1,-->
+<!--              },-->
+<!--              show: true,-->
+<!--            },-->
+<!--            nameTextStyle: {-->
+<!--              color: "#fff",-->
+<!--            },-->
+<!--            name: unit,-->
+<!--          },-->
+<!--          series: [-->
+<!--            {-->
+<!--              data: data.y,-->
+<!--              type: "bar",-->
+<!--              barMaxWidth: 20,-->
+<!--              barWidth: "75%",-->
+<!--              itemStyle: {-->
+<!--                color: {-->
+<!--                  x: 0,-->
+<!--                  y: 0,-->
+<!--                  x2: 0,-->
+<!--                  y2: 1,-->
+<!--                  type: "linear",-->
+<!--                  global: false,-->
+<!--                  colorStops: [-->
+<!--                    {-->
+<!--                      offset: 0,-->
+<!--                      color: "#0a8ff6",-->
+<!--                    },-->
+<!--                    {-->
+<!--                      offset: 1,-->
+<!--                      color: "#06f8f7",-->
+<!--                    },-->
+<!--                  ],-->
+<!--                },-->
+<!--              },-->
+<!--            },-->
+<!--            {-->
+<!--              // label: {-->
+<!--              //     show: true,-->
+<!--              //     position: 'top',-->
+<!--              //     distance: 10,-->
+<!--              //     color: '#0273d3',-->
+<!--              //     fontWeight: 600,-->
+<!--              //     formatter: (e) => {-->
+<!--              //         return data.y?.[e.dataIndex]-->
+<!--              //     }-->
+<!--              // },-->
+<!--              data: Array(data.y.length).fill(-->
+<!--                Math.max(...(data.y || [0])) * 1.2-->
+<!--              ),-->
+<!--              type: "bar",-->
+<!--              barMaxWidth: 20,-->
+<!--              barWidth: "75%",-->
+<!--              barGap: "-100%",-->
+<!--              itemStyle: {-->
+<!--                color: "rgba(5,50,125,0.7)",-->
+<!--              },-->
+<!--              zlevel: -1,-->
+<!--              tooltip: {-->
+<!--                show: false,-->
+<!--              },-->
+<!--            },-->
+<!--            {-->
+<!--              type: "line",-->
+<!--              stack: "总量",-->
+<!--              symbol: "circle",-->
+<!--              symbolSize: 8,-->
+<!--              itemStyle: {-->
+<!--                normal: {-->
+<!--                  borderWidth: 2,-->
+<!--                  borderColor: "#fff",-->
+<!--                  color: "rgba(0,0,0,0)",-->
+<!--                  lineStyle: {-->
+<!--                    color: "#fff",-->
+<!--                    width: 1,-->
+<!--                  },-->
+<!--                },-->
+<!--              },-->
+<!--              tooltip: {-->
+<!--                show: false,-->
+<!--              },-->
+<!--              data: data.y,-->
+<!--            },-->
+<!--          ],-->
+<!--        };-->
+<!--        myChart.setOption(option);-->
+<!--      });-->
+<!--    },-->
+<!--    EnergyConsumptionBusinessFormCharts() {-->
+<!--      const vw = window.innerWidth / 100;-->
+<!--      let arr = {-->
+<!--        energyType: this.energyType,-->
+<!--      };-->
+<!--      getBusinessChart(arr).then((res) => {-->
+<!--        let myChart = this.$echarts.init(-->
+<!--          this.$refs.EnergyConsumptionBusinessForm-->
+<!--        );-->
+<!--        let name = "分项能耗";-->
+<!--        let data = [];-->
+<!--        if (res.data) {-->
+<!--          data = res.data;-->
+<!--        } else {-->
+<!--          data = [];-->
+<!--        }-->
+<!--        // if (this.yewu) {-->
+<!--        //   data = [];-->
+<!--        // } else if (this.quyu) {-->
+<!--        //   data = res.data.build.slice(0, 5);-->
+<!--        // } else if (this.fenxiang) {-->
+<!--        //   data = res.data.subentry.slice(0, 5);-->
+<!--        // }-->
+<!--        let option = {-->
+<!--          tooltip: {-->
+<!--            trigger: "item",-->
+<!--          },-->
+<!--          title: {-->
+<!--            // textAlign: 'center',-->
+<!--            text: name + "\n占比",-->
+<!--            x: "center",-->
+<!--            y: "center",-->
+<!--            textStyle: {-->
+<!--              color: "#56bbff",-->
+<!--              fontSize: 0.8 * vw,-->
+<!--            },-->
+<!--          },-->
+
+<!--          series: [-->
+<!--            {-->
+<!--              // 鏁版嵁-->
+<!--              type: "pie",-->
+<!--              zlevel: 3,-->
+<!--              radius: ["40%", "61%"],-->
+<!--              center: ["49%", "50%"],-->
+<!--              data: data,-->
+<!--              stillShowZeroSum: true,-->
+<!--              emptyCircleStyle: {-->
+<!--                color: "#8fd400",-->
+<!--              },-->
+<!--              label: {-->
+<!--                color: "#fff",-->
+<!--                fontSize: 0.6 * vw,-->
+<!--                position: "outside",-->
+<!--                formatter: "{a|{b}  {d}%}",-->
+<!--                rich: {-->
+<!--                  a: {-->
+<!--                    color: "#fff",-->
+<!--                    padding: [-0.6 * vw, -5 * vw, 0, -5 * vw],-->
+<!--                  },-->
+<!--                },-->
+<!--              },-->
+
+<!--              labelLine: {-->
+<!--                length: 2 * vw,-->
+<!--                length2: 5 * vw,-->
+<!--              },-->
+<!--              itemStyle: {-->
+<!--                opacity: 0.6,-->
+<!--              },-->
+<!--            },-->
+<!--            {-->
+<!--              type: "pie",-->
+<!--              stillShowZeroSum: true,-->
+<!--              emptyCircleStyle: {-->
+<!--                color: "#8fd400",-->
+<!--              },-->
+<!--              radius: ["60%", "70%"],-->
+<!--              center: ["49%", "50%"],-->
+<!--              hoverAnimation: false,-->
+<!--              tooltip: {-->
+<!--                show: false,-->
+<!--              },-->
+<!--              zlevel: 4,-->
+<!--              label: {-->
+<!--                show: false,-->
+<!--              },-->
+<!--              data: data,-->
+<!--            },-->
+<!--          ],-->
+<!--        };-->
+<!--        myChart.setOption(option);-->
+<!--      });-->
+<!--    },-->
+<!--    BottomRightBusinessFormCharts() {-->
+<!--      const vw = window.innerWidth / 100;-->
+<!--      let arr = {-->
+<!--        energyType: this.energyType,-->
+<!--      };-->
+<!--      getBusinessChart(arr).then((res) => {-->
+<!--        let myChart = this.$echarts.init(this.$refs.BottomRightBusinessForm);-->
+<!--        let name = "业态能耗";-->
+<!--        let data = [];-->
+<!--        if (res.data) {-->
+<!--          data = res.data;-->
+<!--        } else {-->
+<!--          data = [];-->
+<!--        }-->
+<!--        // if (this.yewu) {-->
+<!--        //   data = [];-->
+<!--        // } else if (this.quyu) {-->
+<!--        //   data = res.data.build.slice(0, 5);-->
+<!--        // } else if (this.fenxiang) {-->
+<!--        //   data = res.data.subentry.slice(0, 5);-->
+<!--        // }-->
+<!--        let option = {-->
+<!--          tooltip: {-->
+<!--            trigger: "item",-->
+<!--          },-->
+<!--          title: {-->
+<!--            // textAlign: 'center',-->
+<!--            text: name + "\n占比",-->
+<!--            x: "center",-->
+<!--            y: "center",-->
+<!--            textStyle: {-->
+<!--              color: "#56bbff",-->
+<!--              fontSize: 0.8 * vw,-->
+<!--            },-->
+<!--          },-->
+
+<!--          series: [-->
+<!--            {-->
+<!--              // 鏁版嵁-->
+<!--              type: "pie",-->
+<!--              zlevel: 3,-->
+<!--              radius: ["40%", "61%"],-->
+<!--              center: ["49%", "50%"],-->
+<!--              data: data,-->
+<!--              stillShowZeroSum: true,-->
+<!--              emptyCircleStyle: {-->
+<!--                color: "#8fd400",-->
+<!--              },-->
+<!--              label: {-->
+<!--                color: "#fff",-->
+<!--                fontSize: 0.6 * vw,-->
+<!--                position: "outside",-->
+<!--                formatter: "{a|{b}  {d}%}",-->
+<!--                rich: {-->
+<!--                  a: {-->
+<!--                    color: "#fff",-->
+<!--                    padding: [-0.6 * vw, -5 * vw, 0, -5 * vw],-->
+<!--                  },-->
+<!--                },-->
+<!--              },-->
+
+<!--              labelLine: {-->
+<!--                length: 2 * vw,-->
+<!--                length2: 5 * vw,-->
+<!--              },-->
+<!--              itemStyle: {-->
+<!--                opacity: 0.6,-->
+<!--              },-->
+<!--            },-->
+<!--            {-->
+<!--              type: "pie",-->
+<!--              stillShowZeroSum: true,-->
+<!--              emptyCircleStyle: {-->
+<!--                color: "#8fd400",-->
+<!--              },-->
+<!--              radius: ["60%", "70%"],-->
+<!--              center: ["49%", "50%"],-->
+<!--              hoverAnimation: false,-->
+<!--              tooltip: {-->
+<!--                show: false,-->
+<!--              },-->
+<!--              zlevel: 4,-->
+<!--              label: {-->
+<!--                show: false,-->
+<!--              },-->
+<!--              data: data,-->
+<!--            },-->
+<!--          ],-->
+<!--        };-->
+<!--        myChart.setOption(option);-->
+<!--      });-->
+<!--    },-->
+<!--    getdata() {-->
+<!--      getparkHomepageOverview().then((response) => {-->
+<!--        this.dataleft = response.data;-->
+<!--      });-->
+<!--      this.getfourEnergy();-->
+<!--      this.getBusinessChart();-->
+<!--      this.getpreviewPolyline();-->
+<!--    },-->
+<!--    getfourEnergy() {-->
+<!--      getfourEnergy({-->
+<!--        energyType: this.energyType,-->
+<!--      }).then((response) => {-->
+<!--        this.itemscopy = response.data;-->
+<!--      });-->
+<!--    },-->
+<!--    getpreviewPolyline() {-->
+<!--      getpreviewPolyline({-->
+<!--        type: 0,-->
+<!--        energyType: this.energyType,-->
+<!--        relationId: 1,-->
+<!--        beginCollectTime: this.beginCollectTime,-->
+<!--        endCollectTime: this.endCollectTime,-->
+<!--      }).then((response) => {-->
+<!--        // this.itemscopy = response.data;-->
+<!--      });-->
+<!--    },-->
+<!--    getBusinessChart() {-->
+<!--      getBusinessChart({-->
+<!--        energyType: this.energyType,-->
+<!--      }).then((response) => {-->
+<!--        // this.itemscopy = response.data;-->
+<!--      });-->
+<!--    },-->
+<!--    ChinaMap(e, id) {-->
+<!--      let data = e-->
+<!--      let echarts = this.$echarts;-->
+<!--      let charts = echarts.init(id);-->
+<!--      let geoJson = cityMap;-->
+<!--      // 隐藏城市名称-->
+<!--      geoJson.features.forEach((val, index) => {-->
+<!--        val.properties.name = "".padStart(index, " ");-->
+<!--      });-->
+<!--      // 绘制地图-->
+<!--      echarts.registerMap("china", geoJson);-->
+<!--      // 重新绘制地图-->
+<!--      charts.showLoading();-->
+<!--      echarts.registerMap("map", geoJson);-->
+<!--      charts.hideLoading();-->
+<!--      const vw = window.innerWidth / 100;-->
+<!--      let option = {-->
+<!--        grid: {-->
+<!--          top: "0%",-->
+<!--          left: "0%",-->
+<!--          right: "0%",-->
+<!--          bottom: "0%",-->
+<!--        },-->
+<!--        visualMap: {-->
+<!--          type: "continuous",-->
+<!--          show: false,-->
+<!--          min: 0,-->
+<!--          max: 100,-->
+<!--          left: "left",-->
+<!--          top: "bottom",-->
+<!--          text: [" ", " "],-->
+<!--          calculable: true,-->
+<!--          // seriesIndex: [0],-->
+<!--          inRange: {-->
+<!--            color: ["#717ea0", "#427eb6", "#1890ff"],-->
+<!--          },-->
+<!--        },-->
+<!--        geo: {-->
+<!--          map: "china",-->
+<!--          aspectScale: 0.75, //长宽比-->
+<!--          zoom: 1.1,-->
+<!--          roam: false,-->
+<!--          layoutCenter: ["50%", "50%"], // position位置-->
+<!--          itemStyle: {-->
+<!--            normal: {-->
+<!--              areaColor: `#1539b1`,-->
+<!--              shadowColor: `#0a2a89`,-->
+<!--              shadowOffsetX: -6,-->
+<!--              shadowOffsetY: 10,-->
+<!--              shadowBlur: 3,-->
+<!--              borderColor: "#177fd0",-->
+<!--              borderWidth: 2,-->
+<!--            },-->
+<!--            emphasis: {-->
+<!--              disabled: false,-->
+<!--            },-->
+<!--          },-->
+<!--        },-->
+<!--        series: [-->
+<!--          // 地图标点-->
+<!--          {-->
+<!--            type: "effectScatter",-->
+<!--            coordinateSystem: "geo",-->
+<!--            showEffectOn: "emphasis",-->
+<!--            zlevel: 1,-->
+<!--            rippleEffect: {-->
+<!--              period: 15,-->
+<!--              scale: 1,-->
+<!--              brushType: "fill",-->
+<!--            },-->
+<!--            hoverAnimation: true,-->
+<!--            itemStyle: {-->
+<!--              normal: {-->
+<!--                color: "#1DE9B6",-->
+<!--                shadowBlur: 10,-->
+<!--                shadowColor: "#333",-->
+<!--              },-->
+<!--            },-->
+<!--            data: data,-->
+<!--            label: {-->
+<!--              padding: [-6 * vw, 0, 0, 5],-->
+<!--              show: true,-->
+<!--              position: "insideTop",-->
+<!--              align: "center",-->
+<!--              formatter: function (val) {-->
+<!--                return `{b|${val.data.name}}{c| }`;-->
+<!--              },-->
+<!--              rich: {-->
+<!--                b: {-->
+<!--                  padding: [-4 * vw, -4.65 * vw, 0, 0],-->
+<!--                  color: "#06f6c1",-->
+<!--                  fontSize: 14,-->
+<!--                  width: 4.65 * vw,-->
+<!--                },-->
+<!--                c: {-->
+<!--                  padding: [0, 0, 0, 0],-->
+<!--                  height: 6 * vw,-->
+<!--                  backgroundColor: {-->
+<!--                    image: url,-->
+<!--                  },-->
+<!--                },-->
+<!--              },-->
+<!--            },-->
+<!--          },-->
+<!--        ],-->
+<!--      };-->
+<!--      charts.on('click', (e) => {-->
+<!--        if (e.componentSubType === 'effectScatter') {-->
+<!--          localStorage.setItem("USER_POOL_NAME_CURRENT", e.data.id);-->
+<!--          this.$router.push({path: "/report/board/index", query: {id: e.data.id}});-->
+<!--        }-->
+<!--      })-->
+<!--      charts.on('mouseover', (e) => {-->
+<!--        if (e.componentSubType === 'effectScatter') {-->
+<!--          data[e.dataIndex].name =  data[e.dataIndex].name1-->
+<!--          charts.setOption(option)-->
+<!--        }-->
+<!--      })-->
+<!--      charts.on('mouseout', (e) => {-->
+<!--        if (e.componentSubType === 'effectScatter') {-->
+<!--          data[e.dataIndex].name =  ''-->
+<!--          charts.setOption(option)-->
+<!--        }-->
+<!--      })-->
+<!--      charts.setOption(option);-->
+<!--    },-->
+<!--    toIndex(e) {-->
+<!--      localStorage.setItem("USER_POOL_NAME_CURRENT", e.id);-->
+<!--      this.$router.push({path: "/report/board/index", query: {id: e.id}});-->
+<!--    },-->
+<!--    selectDian(energyType) {-->
+<!--      this.dian1 = !this.dian1;-->
+<!--      this.shui1 = !this.shui1;-->
+<!--      this.energyType = energyType;-->
+<!--      // this.gettreeData();-->
+<!--      this.getfourEnergy();-->
+<!--    },-->
+<!--    selectDian2(energyType) {-->
+<!--      this.dian2 = !this.dian2;-->
+<!--      this.shui2 = !this.shui2;-->
+<!--      this.energyType = energyType;-->
+<!--      // this.gettreeData();-->
+<!--      this.getBusinessChart();-->
+<!--    },-->
+<!--    selectDian3(energyType) {-->
+<!--      this.dian3 = !this.dian3;-->
+<!--      this.shui3 = !this.shui3;-->
+<!--      this.energyType = energyType;-->
+<!--      // this.gettreeData();-->
+<!--      this.BottomCenterCharts();-->
+<!--    },-->
+<!--    selectDian4(energyType) {-->
+<!--      this.dian4 = !this.dian4;-->
+<!--      this.shui4 = !this.shui4;-->
+<!--      this.energyType = energyType;-->
+<!--      // this.gettreeData();-->
+<!--      this.getBusinessChart();-->
+<!--    },-->
+<!--    change(value) {-->
+<!--      this.beginCollectTime = value[0];-->
+<!--      this.endCollectTime = value[1];-->
+<!--      this.BottomCenterCharts();-->
+<!--    },-->
+<!--  },-->
+<!--};-->
+<!--</script>-->
+<!--<style lang="scss" scoped>-->
+<!--.fl {-->
+<!--  float: left;-->
+<!--}-->
+
+<!--.fr {-->
+<!--  float: right;-->
+<!--}-->
+
+<!--.clear {-->
+<!--  clear: both;-->
+<!--}-->
+
+<!--.home {-->
+<!--  width: 100%;-->
+<!--  height: calc(100vh - 84px);-->
+<!--  background-image: url("../../../assets/images/bg.jpeg");-->
+<!--  background-repeat: no-repeat;-->
+<!--  background-size: 100% 100%;-->
+<!--  position: relative;-->
+
+<!--  .bottom-left {-->
+<!--    width: 17.2vw;-->
+<!--    height: 23vh;-->
+<!--    position: absolute;-->
+<!--    bottom: 4vh;-->
+<!--    left: 1.5vw;-->
+
+<!--    .bottom-left-title {-->
+<!--      width: 100%;-->
+<!--      height: 3.5vh;-->
+<!--      position: relative;-->
+
+<!--      div {-->
+<!--        width: 1.9vw;-->
+<!--        height: 100%;-->
+<!--        text-align: center;-->
+<!--        line-height: 3.5vh;-->
+<!--        font-size: 14px;-->
+<!--        color: white;-->
+<!--      }-->
+
+<!--      .dian {-->
+<!--        position: absolute;-->
+<!--        right: 5vw;-->
+<!--      }-->
+
+<!--      .shui {-->
+<!--        position: absolute;-->
+<!--        right: 2vw;-->
+<!--      }-->
+<!--    }-->
+
+<!--    .bottom-left-charts {-->
+<!--      width: 100%;-->
+<!--      height: 19.5vh;-->
+<!--    }-->
+<!--  }-->
+
+<!--  .bottom-center {-->
+<!--    width: 46.8vw;-->
+<!--    height: 23vh;-->
+<!--    position: absolute;-->
+<!--    bottom: 4vh;-->
+<!--    left: 20vw;-->
+
+<!--    .bottom-center-title {-->
+<!--      width: 100%;-->
+<!--      height: 3.5vh;-->
+<!--      position: relative;-->
+
+<!--      div {-->
+<!--        width: 1.9vw;-->
+<!--        height: 100%;-->
+<!--        text-align: center;-->
+<!--        line-height: 3.5vh;-->
+<!--        font-size: 14px;-->
+<!--        color: white;-->
+<!--      }-->
+
+<!--      .dian {-->
+<!--        position: absolute;-->
+<!--        right: 5vw;-->
+<!--        z-index: 1000;-->
+<!--      }-->
+
+<!--      .shui {-->
+<!--        position: absolute;-->
+<!--        right: 2vw;-->
+<!--        z-index: 1000;-->
+<!--      }-->
+<!--    }-->
+
+<!--    .block {-->
+<!--      position: absolute;-->
+<!--      right: 0%;-->
+<!--      top: 6%;-->
+<!--      padding-top: 3vh;-->
+<!--      margin-left: 1vw;-->
+<!--      z-index: 555;-->
+<!--      color: white;-->
+
+<!--      ::v-deep .el-input__inner {-->
+<!--        background-color: transparent !important;-->
+<!--        height: 34px;-->
+<!--        border: 1px solid #054ea6;-->
+<!--      }-->
+
+<!--      ::v-deep .el-range-input {-->
+<!--        background-color: transparent !important;-->
+<!--      }-->
+
+<!--      ::v-deep .el-range-editor&#45;&#45;medium .el-range-separator {-->
+<!--        color: #d0d8e7;-->
+<!--      }-->
+<!--    }-->
+
+<!--    .bottom-center-charts {-->
+<!--      width: 920px;-->
+<!--      height: 220px;-->
+<!--    }-->
+<!--  }-->
+
+<!--  .bottom-right {-->
+<!--    width: 17.2vw;-->
+<!--    height: 23vh;-->
+<!--    position: absolute;-->
+<!--    bottom: 4vh;-->
+<!--    right: 1.5vw;-->
+
+<!--    .bottom-right-title {-->
+<!--      width: 100%;-->
+<!--      height: 3.5vh;-->
+<!--      position: relative;-->
+
+<!--      div {-->
+<!--        width: 1.9vw;-->
+<!--        height: 100%;-->
+<!--        text-align: center;-->
+<!--        line-height: 3.5vh;-->
+<!--        font-size: 14px;-->
+<!--        color: white;-->
+<!--      }-->
+
+<!--      .dian {-->
+<!--        position: absolute;-->
+<!--        right: 5vw;-->
+<!--      }-->
+
+<!--      .shui {-->
+<!--        position: absolute;-->
+<!--        right: 2vw;-->
+<!--      }-->
+<!--    }-->
+
+<!--    .bottom-right-charts {-->
+<!--      width: 100%;-->
+<!--      height: 19.5vh;-->
+<!--    }-->
+<!--  }-->
+
+<!--  .right-top {-->
+<!--    width: 17.2vw;-->
+<!--    height: 50vh;-->
+<!--    position: absolute;-->
+<!--    top: 10vh;-->
+<!--    right: 1.5vw;-->
+
+<!--    .right-top-title {-->
+<!--      width: 100%;-->
+<!--      height: 3.5vh;-->
+<!--      position: relative;-->
+
+<!--      div {-->
+<!--        width: 3vw;-->
+<!--        height: 100%;-->
+<!--        text-align: center;-->
+<!--        line-height: 3vh;-->
+<!--        font-size: 14px;-->
+<!--        color: white;-->
+<!--      }-->
+
+<!--      .dian {-->
+<!--        position: absolute;-->
+<!--        right: 5vw;-->
+<!--      }-->
+
+<!--      .shui {-->
+<!--        position: absolute;-->
+<!--        right: 2vw;-->
+<!--      }-->
+<!--    }-->
+
+<!--    .right-top-content::-webkit-scrollbar{-->
+<!--      display: none;-->
+<!--    }-->
+
+<!--    .right-top-content {-->
+<!--      width: 100%;-->
+<!--      height: 46.5vh;-->
+
+<!--      .right-top-content-item {-->
+<!--        width: 94%;-->
+<!--        height: 5vh;-->
+<!--        border-bottom: 4px solid #d4a02c;-->
+<!--        margin: auto;-->
+<!--        position: relative;-->
+<!--        color: #ccc;-->
+
+<!--        .TOP {-->
+<!--          width: 3.5vw;-->
+<!--          height: 3vh;-->
+<!--          background-image: url("../../../assets/images/1.png");-->
+<!--          background-repeat: no-repeat;-->
+<!--          background-size: 100% 100%;-->
+<!--          position: absolute;-->
+<!--          top: 0.6vh;-->
+<!--          border: 1px solid #d4a02c;-->
+<!--          font-size: 12px;-->
+<!--          text-align: center;-->
+<!--          line-height: 3vh;-->
+<!--        }-->
+
+<!--        .name {-->
+<!--          position: absolute;-->
+<!--          top: 0.6vh;-->
+<!--          left: 4vw;-->
+<!--          font-weight: 800;-->
+<!--        }-->
+
+<!--        .unit {-->
+<!--          position: absolute;-->
+<!--          top: 0.8vh;-->
+<!--          right: 0vw;-->
+<!--          font-weight: 800;-->
+<!--        }-->
+<!--      }-->
+<!--    }-->
+<!--  }-->
+
+<!--  .left-top {-->
+<!--    width: 18vw;-->
+<!--    height: 16vh;-->
+<!--    position: absolute;-->
+<!--    top: 7vh;-->
+
+<!--    .left-top-left {-->
+<!--      width: 5vw;-->
+<!--      height: 8vh;-->
+<!--      position: absolute;-->
+<!--      top: 4vh;-->
+<!--      color: white;-->
+
+<!--      .title {-->
+<!--        height: 50%;-->
+<!--        font-size: 8px;-->
+<!--        line-height: 4vh;-->
+<!--      }-->
+
+<!--      .modal {-->
+<!--        height: 50%;-->
+<!--        text-align: center;-->
+
+<!--        span {-->
+<!--          color: blue;-->
+<!--          font-size: 25px;-->
+<!--        }-->
+<!--      }-->
+<!--    }-->
+
+<!--    .left-top-right {-->
+<!--      width: 5vw;-->
+<!--      height: 8vh;-->
+<!--      position: absolute;-->
+<!--      top: 4vh;-->
+<!--      right: 0;-->
+<!--      color: white;-->
+
+<!--      .title {-->
+<!--        height: 50%;-->
+<!--        font-size: 8px;-->
+<!--        line-height: 4vh;-->
+<!--      }-->
+
+<!--      .modal {-->
+<!--        height: 50%;-->
+<!--        text-align: center;-->
+
+<!--        span {-->
+<!--          color: blue;-->
+<!--          font-size: 25px;-->
+<!--        }-->
+<!--      }-->
+<!--    }-->
+<!--  }-->
+
+<!--  .left-content {-->
+<!--    width: 17.3vw;-->
+<!--    height: 35vh;-->
+<!--    position: absolute;-->
+<!--    top: 23.8vh;-->
+<!--    left: 1.7vw;-->
+
+<!--    .item {-->
+<!--      width: 50%;-->
+<!--      height: 50%;-->
+<!--      position: relative;-->
+
+<!--      // background: yellowgreen;-->
+<!--      // opacity: .5;-->
+<!--      .item-top {-->
+<!--        width: 100%;-->
+<!--        height: 6vh;-->
+<!--        text-align: center;-->
+<!--        line-height: 10vh;-->
+<!--        color: #02f7d1;-->
+<!--      }-->
+
+<!--      .item-bottom-left {-->
+<!--        width: 50%;-->
+<!--        height: 5vh;-->
+<!--        position: absolute;-->
+<!--        left: 0;-->
+<!--        bottom: 0;-->
+<!--        text-align: center;-->
+<!--        color: #02f7d1;-->
+
+<!--        .item-bottom-left-title {-->
+<!--          width: 100%;-->
+<!--          height: 2vh;-->
+<!--          font-size: 8px;-->
+<!--          position: absolute;-->
+<!--          top: 0;-->
+<!--          left: 0;-->
+<!--        }-->
+
+<!--        img {-->
+<!--          position: absolute;-->
+<!--          bottom: 0;-->
+<!--          left: 0;-->
+<!--        }-->
+<!--      }-->
+
+<!--      .item-bottom-right {-->
+<!--        width: 50%;-->
+<!--        height: 5vh;-->
+<!--        position: absolute;-->
+<!--        right: 0;-->
+<!--        bottom: 0;-->
+<!--        text-align: center;-->
+<!--        color: #02f7d1;-->
+
+<!--        .item-bottom-left-title {-->
+<!--          width: 100%;-->
+<!--          height: 2vh;-->
+<!--          font-size: 8px;-->
+<!--          position: absolute;-->
+<!--          top: 0;-->
+<!--          left: 0;-->
+<!--        }-->
+
+<!--        img {-->
+<!--          position: absolute;-->
+<!--          bottom: 0;-->
+<!--          left: 0;-->
+<!--        }-->
+<!--      }-->
+<!--    }-->
+<!--  }-->
+<!--}-->
+
+<!--.map {-->
+<!--  width: 500px;-->
+<!--  height: 500px;-->
+<!--  position: absolute;-->
+<!--  top: 65px;-->
+<!--  left: 0;-->
+<!--  right: 0;-->
+<!--  bottom: 0;-->
+<!--  margin: 0 auto;-->
+<!--}-->
+
+<!--.electricityWaterBg {-->
+<!--  background-image: url("../../../assets/images/electricityWaterBg.png");-->
+<!--  background-repeat: no-repeat;-->
+<!--  background-size: 100% 100%;-->
+<!--}-->
+<!--</style>-->
diff --git a/src/views/energy/LeadershipView/GroupHomePage/indextest.vue b/src/views/energy/LeadershipView/GroupHomePage/indextest.vue
new file mode 100644
index 00000000..0ba9bf72
--- /dev/null
+++ b/src/views/energy/LeadershipView/GroupHomePage/indextest.vue
@@ -0,0 +1,908 @@
+<!--<template>-->
+<!--  <div class="wrap">-->
+<!--    <div id="wrapbg" class="bg">-->
+<!--      <div class="map" id="map"></div>-->
+<!--      <div-->
+<!--        style="-->
+<!--          position: absolute;-->
+<!--          top: 15.5%;-->
+<!--          left: 4.7%;-->
+<!--          transform: translate(-50%, -50%);-->
+<!--          font-size: 0.8vw;-->
+<!--          color: #c4c7cc;-->
+<!--        "-->
+<!--      >-->
+<!--        接入园区数量-->
+<!--      </div>-->
+<!--      <div-->
+<!--        style="-->
+<!--          position: absolute;-->
+<!--          top: 15.5%;-->
+<!--          left: 18.5%;-->
+<!--          transform: translate(-50%, -50%);-->
+<!--          font-size: 0.8vw;-->
+<!--          color: #c4c7cc;-->
+<!--        "-->
+<!--      >-->
+<!--        接入设备数量-->
+<!--      </div>-->
+<!--      <div-->
+<!--        style="-->
+<!--          position: absolute;-->
+<!--          top: 19.5%;-->
+<!--          left: 3.7%;-->
+<!--          transform: translate(-50%, -50%);-->
+<!--          font-size: 0.8vw;-->
+<!--          color: #c4c7cc;-->
+<!--        "-->
+<!--      >-->
+<!--        <span-->
+<!--          class="parkNum"-->
+<!--          id="parkNum"-->
+<!--          style="font-size: 1.6vw; color: #02bbfd"-->
+<!--          >1</span-->
+<!--        >-->
+<!--        <span>个</span>-->
+<!--      </div>-->
+<!--      <div-->
+<!--        style="-->
+<!--          position: absolute;-->
+<!--          top: 19.5%;-->
+<!--          right: 78%;-->
+<!--          transform: translate(-50%, -50%);-->
+<!--          font-size: 0.8vw;-->
+<!--          color: #c4c7cc;-->
+<!--        "-->
+<!--      >-->
+<!--        <span-->
+<!--          class="equipmentNum"-->
+<!--          id="equipmentNum"-->
+<!--          style="font-size: 1.6vw; color: #02fee3"-->
+<!--          >28</span-->
+<!--        >-->
+<!--        <span>个</span>-->
+<!--      </div>-->
+<!--      <div class="monthElectricity" id="monthElectricity">-->
+<!--        <div class="monthElectricityNum" id="monthElectricityNum">0</div>-->
+<!--        <div class="monthElectricityTBNum" id="monthElectricityTBNum">-->
+<!--          同比 <span style="font-size: 0.8vw; color: #01b3f7">0%</span>-->
+<!--        </div>-->
+<!--        <div class="monthElectricityHBNum" id="monthElectricityHBNum">-->
+<!--          环比 <span style="font-size: 0.8vw; color: #01b3f7">0%</span>-->
+<!--        </div>-->
+<!--        <div class="monthElectricityTBImg" id="monthElectricityTBImg"></div>-->
+<!--        <div class="monthElectricityHBImg" id="monthElectricityHBImg"></div>-->
+<!--      </div>-->
+<!--      <div class="yearElectricity" id="yearElectricity">-->
+<!--        <div class="yearElectricityNum" id="yearElectricityNum">0</div>-->
+<!--        <div class="yearElectricityTBNum" id="yearElectricityTBNum">-->
+<!--          同比 <span style="font-size: 0.8vw; color: #01b3f7">0%</span>-->
+<!--        </div>-->
+<!--        <div class="yearElectricityHBNum" id="yearElectricityHBNum">-->
+<!--          环比 <span style="font-size: 0.8vw; color: #01b3f7">0%</span>-->
+<!--        </div>-->
+<!--        <div class="yearElectricityTBImg" id="yearElectricityTBImg"></div>-->
+<!--        <div class="yearElectricityHBImg" id="yearElectricityHBImg"></div>-->
+<!--      </div>-->
+<!--      <div class="monthWater" id="monthWater">-->
+<!--        <div class="monthWaterNum" id="monthWaterNum">0</div>-->
+<!--        <div class="monthWaterTBNum" id="monthWaterTBNum">-->
+<!--          同比 <span style="font-size: 0.8vw; color: #01b3f7">0%</span>-->
+<!--        </div>-->
+<!--        <div class="monthWaterHBNum" id="monthWaterHBNum">-->
+<!--          环比 <span style="font-size: 0.8vw; color: #01b3f7">0%</span>-->
+<!--        </div>-->
+<!--        <div class="monthWaterTBImg" id="monthWaterTBImg"></div>-->
+<!--        <div class="monthWaterHBImg" id="monthWaterHBImg"></div>-->
+<!--      </div>-->
+<!--      <div class="yearWater" id="yearWater">-->
+<!--        <div class="yearWaterNum" id="yearWaterNum">0</div>-->
+<!--        <div class="yearWaterTBNum" id="yearWaterTBNum">-->
+<!--          同比 <span style="font-size: 0.8vw; color: #01b3f7">0%</span>-->
+<!--        </div>-->
+<!--        <div class="yearWaterHBNum" id="yearWaterHBNum">-->
+<!--          环比 <span style="font-size: 0.8vw; color: #01b3f7">0%</span>-->
+<!--        </div>-->
+<!--        <div class="yearWaterTBImg" id="yearWaterTBImg"></div>-->
+<!--        <div class="yearWaterHBImg" id="yearWaterHBImg"></div>-->
+<!--      </div>-->
+<!--      <div class="chart1" id="chart1"></div>-->
+<!--      <div class="chart2" id="chart2"></div>-->
+<!--      <div class="chart3" id="chart3"></div>-->
+<!--      <div class="electricWaterButton1" id="electricWaterButton1">-->
+<!--        <div class="electricButton">电量</div>-->
+<!--        <div class="waterButton">水量</div>-->
+<!--      </div>-->
+<!--      <div class="electricWaterButton2" id="electricWaterButton2">-->
+<!--        <div class="electricButton">电量</div>-->
+<!--        <div class="waterButton">水量</div>-->
+<!--      </div>-->
+<!--      <div class="electricWaterButton3" id="electricWaterButton3">-->
+<!--        <div class="electricButton">电量</div>-->
+<!--        <div class="waterButton">水量</div>-->
+<!--      </div>-->
+<!--      <div class="electricWaterButton4" id="electricWaterButton4">-->
+<!--        <div class="electricButton">电量</div>-->
+<!--        <div class="waterButton">水量</div>-->
+<!--      </div>-->
+<!--      <div class="dataTime" id="dataTime">-->
+<!--        <div class="timeOne" id="timeOne">2023-01-01</div>-->
+<!--        <div class="span">至</div>-->
+<!--        <div class="timeTwo" id="timeTwo">2023-01-01</div>-->
+<!--      </div>-->
+<!--      <div class="energyConsumptionRanking" id="energyConsumptionRanking">-->
+<!--        <div class="rankOne rankItem">-->
+<!--          <div class="rankItemInfo">-->
+<!--            <div class="rankItemInfoIcon">TOP.1</div>-->
+<!--            <div class="rankItemInfoName">园区3</div>-->
+<!--            <div class="rankItemInfoNum">12344.00</div>-->
+<!--          </div>-->
+<!--          <div class="rankItemScheduleDiv">-->
+<!--            <div class="rankItemSchedule"></div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        <div class="rankTwo rankItem">-->
+<!--          <div class="rankItemInfo">-->
+<!--            <div class="rankItemInfoIcon">TOP.2</div>-->
+<!--            <div class="rankItemInfoName">园区3</div>-->
+<!--            <div class="rankItemInfoNum">12344.00</div>-->
+<!--          </div>-->
+<!--          <div class="rankItemScheduleDiv">-->
+<!--            <div class="rankItemSchedule"></div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        <div class="rankThree rankItem">-->
+<!--          <div class="rankItemInfo">-->
+<!--            <div class="rankItemInfoIcon">TOP.3</div>-->
+<!--            <div class="rankItemInfoName">园区3</div>-->
+<!--            <div class="rankItemInfoNum">12344.00</div>-->
+<!--          </div>-->
+<!--          <div class="rankItemScheduleDiv">-->
+<!--            <div class="rankItemSchedule"></div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        <div class="rankItem">-->
+<!--          <div class="rankItemInfo">-->
+<!--            <div class="rankItemInfoIcon">TOP.1</div>-->
+<!--            <div class="rankItemInfoName">园区3</div>-->
+<!--            <div class="rankItemInfoNum">12344.00</div>-->
+<!--          </div>-->
+<!--          <div class="rankItemScheduleDiv">-->
+<!--            <div class="rankItemSchedule"></div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        <div class="rankItem">-->
+<!--          <div class="rankItemInfo">-->
+<!--            <div class="rankItemInfoIcon">TOP.1</div>-->
+<!--            <div class="rankItemInfoName">园区3</div>-->
+<!--            <div class="rankItemInfoNum">12344.00</div>-->
+<!--          </div>-->
+<!--          <div class="rankItemScheduleDiv">-->
+<!--            <div class="rankItemSchedule"></div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        <div class="rankItem">-->
+<!--          <div class="rankItemInfo">-->
+<!--            <div class="rankItemInfoIcon">TOP.1</div>-->
+<!--            <div class="rankItemInfoName">园区3</div>-->
+<!--            <div class="rankItemInfoNum">12344.00</div>-->
+<!--          </div>-->
+<!--          <div class="rankItemScheduleDiv">-->
+<!--            <div class="rankItemSchedule"></div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        <div class="rankItem">-->
+<!--          <div class="rankItemInfo">-->
+<!--            <div class="rankItemInfoIcon">TOP.1</div>-->
+<!--            <div class="rankItemInfoName">园区3</div>-->
+<!--            <div class="rankItemInfoNum">12344.00</div>-->
+<!--          </div>-->
+<!--          <div class="rankItemScheduleDiv">-->
+<!--            <div class="rankItemSchedule"></div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        <div class="rankItem">-->
+<!--          <div class="rankItemInfo">-->
+<!--            <div class="rankItemInfoIcon">TOP.1</div>-->
+<!--            <div class="rankItemInfoName">园区3</div>-->
+<!--            <div class="rankItemInfoNum">12344.00</div>-->
+<!--          </div>-->
+<!--          <div class="rankItemScheduleDiv">-->
+<!--            <div class="rankItemSchedule"></div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        <div class="rankItem">-->
+<!--          <div class="rankItemInfo">-->
+<!--            <div class="rankItemInfoIcon">TOP.1</div>-->
+<!--            <div class="rankItemInfoName">园区3</div>-->
+<!--            <div class="rankItemInfoNum">12344.00</div>-->
+<!--          </div>-->
+<!--          <div class="rankItemScheduleDiv">-->
+<!--            <div class="rankItemSchedule"></div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
+<!--  </div>-->
+<!--</template>-->
+
+<!--<script>-->
+<!--export default {-->
+<!--  name: "Index",-->
+<!--  data() {-->
+<!--    return {};-->
+<!--  },-->
+<!--  mounted() {-->
+<!--    this.EnergyConsumptionBusinessFormCharts();-->
+<!--    this.BottomRightBusinessFormCharts();-->
+<!--    this.BottomCenterCharts();-->
+<!--  },-->
+<!--  methods: {-->
+<!--    EnergyConsumptionBusinessFormCharts() {-->
+<!--      let myChart = this.$echarts.init(-->
+<!--        this.$refs.EnergyConsumptionBusinessForm-->
+<!--      );-->
+<!--      myChart.setOption({-->
+<!--        tooltip: {-->
+<!--          trigger: "item",-->
+<!--        },-->
+<!--        // legend: {-->
+<!--        //   top: "30%",-->
+<!--        //   left: "65%",-->
+<!--        //   textStyle: {-->
+<!--        //     color: "white"-->
+<!--        //   }-->
+<!--        // },-->
+<!--        series: [-->
+<!--          {-->
+<!--            center: ["40%", "50%"],-->
+<!--            name: "Access From",-->
+<!--            type: "pie",-->
+<!--            radius: ["40%", "70%"],-->
+<!--            avoidLabelOverlap: false,-->
+<!--            label: {-->
+<!--              show: true,-->
+<!--              position: "center",-->
+<!--            },-->
+<!--            emphasis: {-->
+<!--              // label: {-->
+<!--              //   show: true,-->
+<!--              //   fontSize: 40,-->
+<!--              //   fontWeight: "bold"-->
+<!--              // }-->
+<!--            },-->
+<!--            labelLine: {-->
+<!--              show: false,-->
+<!--            },-->
+<!--            data: [-->
+<!--              { value: 1048, name: "Search" },-->
+<!--              { value: 735, name: "Direct" },-->
+<!--            ],-->
+<!--          },-->
+<!--        ],-->
+<!--      });-->
+<!--    },-->
+<!--    BottomCenterCharts() {-->
+<!--      let myChart = this.$echarts.init(this.$refs.BottomCenterCharts);-->
+<!--      myChart.setOption({-->
+<!--        textStyle: {-->
+<!--          color: "white",-->
+<!--        },-->
+<!--        tooltip: {-->
+<!--          trigger: "axis",-->
+<!--          axisPointer: {-->
+<!--            type: "cross",-->
+<!--            crossStyle: {-->
+<!--              color: "white",-->
+<!--            },-->
+<!--          },-->
+<!--        },-->
+<!--        xAxis: [-->
+<!--          {-->
+<!--            type: "category",-->
+<!--            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],-->
+<!--            axisPointer: {-->
+<!--              type: "shadow",-->
+<!--            },-->
+<!--          },-->
+<!--        ],-->
+<!--        yAxis: [-->
+<!--          {-->
+<!--            type: "value",-->
+<!--            name: "kwh",-->
+<!--            min: 0,-->
+<!--            max: 250,-->
+<!--            interval: 100,-->
+<!--            axisLabel: {-->
+<!--              formatter: "{value} ml",-->
+<!--            },-->
+<!--          },-->
+<!--          {-->
+<!--            type: "value",-->
+<!--            // name: 'Temperature',-->
+<!--            min: 0,-->
+<!--            max: 25,-->
+<!--            interval: 5,-->
+<!--            axisLabel: {-->
+<!--              formatter: "{value} °C",-->
+<!--            },-->
+<!--          },-->
+<!--        ],-->
+<!--        series: [-->
+<!--          {-->
+<!--            name: "Evaporation",-->
+<!--            type: "bar",-->
+<!--            tooltip: {-->
+<!--              valueFormatter: function (value) {-->
+<!--                return value + " ml";-->
+<!--              },-->
+<!--            },-->
+<!--            data: [-->
+<!--              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,-->
+<!--              3.3,-->
+<!--            ],-->
+<!--          },-->
+<!--          {-->
+<!--            name: "Precipitation",-->
+<!--            type: "bar",-->
+<!--            tooltip: {-->
+<!--              valueFormatter: function (value) {-->
+<!--                return value + " ml";-->
+<!--              },-->
+<!--            },-->
+<!--            data: [-->
+<!--              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,-->
+<!--              2.3,-->
+<!--            ],-->
+<!--          },-->
+<!--          {-->
+<!--            name: "Temperature",-->
+<!--            type: "line",-->
+<!--            yAxisIndex: 1,-->
+<!--            tooltip: {-->
+<!--              valueFormatter: function (value) {-->
+<!--                return value + " °C";-->
+<!--              },-->
+<!--            },-->
+<!--            data: [-->
+<!--              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,-->
+<!--            ],-->
+<!--          },-->
+<!--        ],-->
+<!--      });-->
+<!--    },-->
+<!--    BottomRightBusinessFormCharts() {-->
+<!--      let myChart = this.$echarts.init(this.$refs.BottomRightBusinessForm);-->
+<!--      myChart.setOption({-->
+<!--        tooltip: {-->
+<!--          trigger: "item",-->
+<!--        },-->
+<!--        // legend: {-->
+<!--        //   top: "30%",-->
+<!--        //   left: "65%",-->
+<!--        //   textStyle: {-->
+<!--        //     color: "white"-->
+<!--        //   }-->
+<!--        // },-->
+<!--        series: [-->
+<!--          {-->
+<!--            center: ["40%", "50%"],-->
+<!--            name: "Access From",-->
+<!--            type: "pie",-->
+<!--            radius: ["40%", "70%"],-->
+<!--            avoidLabelOverlap: false,-->
+<!--            label: {-->
+<!--              show: true,-->
+<!--              position: "center",-->
+<!--            },-->
+<!--            emphasis: {-->
+<!--              // label: {-->
+<!--              //   show: true,-->
+<!--              //   fontSize: 40,-->
+<!--              //   fontWeight: "bold"-->
+<!--              // }-->
+<!--            },-->
+<!--            labelLine: {-->
+<!--              show: false,-->
+<!--            },-->
+<!--            data: [-->
+<!--              { value: 1048, name: "Search" },-->
+<!--              { value: 735, name: "Direct" },-->
+<!--            ],-->
+<!--          },-->
+<!--        ],-->
+<!--      });-->
+<!--    },-->
+<!--  },-->
+<!--};-->
+<!--</script>-->
+<!--<style scoped lang="scss">-->
+<!--.bg {-->
+<!--  width: 100%;-->
+<!--  height: 100%;-->
+<!--  background-image: url("~@/img/page/bg.jpg");-->
+<!--  background-repeat: no-repeat;-->
+<!--  background-size: 100% 100%;-->
+<!--  position: absolute;-->
+<!--  overflow-y: hidden;-->
+<!--}-->
+
+<!--.map {-->
+<!--  position: absolute;-->
+<!--  width: 44%;-->
+<!--  height: 61%;-->
+<!--  left: 50%;-->
+<!--  top: 10%;-->
+<!--  transform: translateX(-50%);-->
+<!--}-->
+
+<!--.monthElectricityNum {-->
+<!--  position: absolute;-->
+<!--  top: 31.2%;-->
+<!--  left: 6.7%;-->
+<!--  color: #02f7d1;-->
+<!--  font-size: 1vw;-->
+<!--  transform: translateX(-50%);-->
+<!--}-->
+
+<!--.monthElectricityTBNum {-->
+<!--  position: absolute;-->
+<!--  top: 41%;-->
+<!--  left: 4.5%;-->
+<!--  color: #02f7d1;-->
+<!--  font-size: 0.6vw;-->
+<!--  transform: translateX(-50%);-->
+<!--}-->
+
+<!--.monthElectricityTBImg {-->
+<!--  position: absolute;-->
+<!--  top: 43%;-->
+<!--  left: 4.5%;-->
+<!--  width: 4%;-->
+<!--  height: 4%;-->
+<!--  color: #02f7d1;-->
+<!--  font-size: 0.6vw;-->
+<!--  transform: translateX(-50%);-->
+<!--  background-image: url("~@/img/page/up.png");-->
+<!--  background-repeat: no-repeat;-->
+<!--  background-size: 100% 100%;-->
+<!--}-->
+
+<!--.monthElectricityHBNum {-->
+<!--  position: absolute;-->
+<!--  top: 41%;-->
+<!--  left: 9.2%;-->
+<!--  color: #02f7d1;-->
+<!--  font-size: 0.6vw;-->
+<!--  transform: translateX(-50%);-->
+<!--}-->
+
+<!--.monthElectricityHBImg {-->
+<!--  position: absolute;-->
+<!--  top: 43%;-->
+<!--  left: 9.2%;-->
+<!--  width: 4%;-->
+<!--  height: 4%;-->
+<!--  color: #02f7d1;-->
+<!--  font-size: 0.6vw;-->
+<!--  transform: translateX(-50%);-->
+<!--  background-image: url("~@/img/page/up.png");-->
+<!--  background-repeat: no-repeat;-->
+<!--  background-size: 100% 100%;-->
+<!--}-->
+
+<!--.yearElectricityNum {-->
+<!--  position: absolute;-->
+<!--  top: 31.2%;-->
+<!--  left: 16.8%;-->
+<!--  color: #02f7d1;-->
+<!--  font-size: 1vw;-->
+<!--  transform: translateX(-50%);-->
+<!--}-->
+
+<!--.yearElectricityTBNum {-->
+<!--  position: absolute;-->
+<!--  top: 41%;-->
+<!--  left: 14.5%;-->
+<!--  color: #02f7d1;-->
+<!--  font-size: 0.6vw;-->
+<!--  transform: translateX(-50%);-->
+<!--}-->
+
+<!--.yearElectricityTBImg {-->
+<!--  position: absolute;-->
+<!--  top: 43%;-->
+<!--  left: 14.5%;-->
+<!--  width: 4%;-->
+<!--  height: 4%;-->
+<!--  color: #02f7d1;-->
+<!--  font-size: 0.6vw;-->
+<!--  transform: translateX(-50%);-->
+<!--  background-image: url("~@/img/page/up.png");-->
+<!--  background-repeat: no-repeat;-->
+<!--  background-size: 100% 100%;-->
+<!--}-->
+
+<!--.yearElectricityHBNum {-->
+<!--  position: absolute;-->
+<!--  top: 41%;-->
+<!--  left: 19.2%;-->
+<!--  color: #02f7d1;-->
+<!--  font-size: 0.6vw;-->
+<!--  transform: translateX(-50%);-->
+<!--}-->
+
+<!--.yearElectricityHBImg {-->
+<!--  position: absolute;-->
+<!--  top: 43%;-->
+<!--  left: 19.2%;-->
+<!--  width: 4%;-->
+<!--  height: 4%;-->
+<!--  color: #02f7d1;-->
+<!--  font-size: 0.6vw;-->
+<!--  transform: translateX(-50%);-->
+<!--  background-image: url("~@/img/page/up.png");-->
+<!--  background-repeat: no-repeat;-->
+<!--  background-size: 100% 100%;-->
+<!--}-->
+
+<!--.monthWaterNum {-->
+<!--  position: absolute;-->
+<!--  top: 51.2%;-->
+<!--  left: 6.7%;-->
+<!--  color: #07d1fd;-->
+<!--  font-size: 1vw;-->
+<!--  transform: translateX(-50%);-->
+<!--}-->
+
+<!--.monthWaterTBNum {-->
+<!--  position: absolute;-->
+<!--  top: 59.5%;-->
+<!--  left: 4.5%;-->
+<!--  color: #02f7d1;-->
+<!--  font-size: 0.6vw;-->
+<!--  transform: translateX(-50%);-->
+<!--}-->
+
+<!--.monthWaterTBImg {-->
+<!--  position: absolute;-->
+<!--  top: 61.5%;-->
+<!--  left: 4.5%;-->
+<!--  width: 4%;-->
+<!--  height: 4%;-->
+<!--  color: #02f7d1;-->
+<!--  font-size: 0.6vw;-->
+<!--  transform: translateX(-50%);-->
+<!--  background-image: url("~@/img/page/up.png");-->
+<!--  background-repeat: no-repeat;-->
+<!--  background-size: 100% 100%;-->
+<!--}-->
+
+<!--.monthWaterHBNum {-->
+<!--  position: absolute;-->
+<!--  top: 59.5%;-->
+<!--  left: 9.2%;-->
+<!--  color: #02f7d1;-->
+<!--  font-size: 0.6vw;-->
+<!--  transform: translateX(-50%);-->
+<!--}-->
+
+<!--.monthWaterHBImg {-->
+<!--  position: absolute;-->
+<!--  top: 61.5%;-->
+<!--  left: 9.2%;-->
+<!--  width: 4%;-->
+<!--  height: 4%;-->
+<!--  color: #02f7d1;-->
+<!--  font-size: 0.6vw;-->
+<!--  transform: translateX(-50%);-->
+<!--  background-image: url("~@/img/page/up.png");-->
+<!--  background-repeat: no-repeat;-->
+<!--  background-size: 100% 100%;-->
+<!--}-->
+
+<!--.yearWaterNum {-->
+<!--  position: absolute;-->
+<!--  top: 51.2%;-->
+<!--  left: 16.8%;-->
+<!--  color: #07d1fd;-->
+<!--  font-size: 1vw;-->
+<!--  transform: translateX(-50%);-->
+<!--}-->
+
+<!--.yearWaterTBNum {-->
+<!--  position: absolute;-->
+<!--  top: 59.5%;-->
+<!--  left: 14.5%;-->
+<!--  color: #02f7d1;-->
+<!--  font-size: 0.6vw;-->
+<!--  transform: translateX(-50%);-->
+<!--}-->
+
+<!--.yearWaterTBImg {-->
+<!--  position: absolute;-->
+<!--  top: 61.5%;-->
+<!--  left: 14.5%;-->
+<!--  width: 4%;-->
+<!--  height: 4%;-->
+<!--  color: #02f7d1;-->
+<!--  font-size: 0.6vw;-->
+<!--  transform: translateX(-50%);-->
+<!--  background-image: url("~@/img/page/up.png");-->
+<!--  background-repeat: no-repeat;-->
+<!--  background-size: 100% 100%;-->
+<!--}-->
+
+<!--.yearWaterHBNum {-->
+<!--  position: absolute;-->
+<!--  top: 59.5%;-->
+<!--  left: 19.2%;-->
+<!--  color: #02f7d1;-->
+<!--  font-size: 0.6vw;-->
+<!--  transform: translateX(-50%);-->
+<!--}-->
+
+<!--.yearWaterHBImg {-->
+<!--  position: absolute;-->
+<!--  top: 61.5%;-->
+<!--  left: 19.2%;-->
+<!--  width: 4%;-->
+<!--  height: 4%;-->
+<!--  color: #02f7d1;-->
+<!--  font-size: 0.6vw;-->
+<!--  transform: translateX(-50%);-->
+<!--  background-image: url("~@/img/page/up.png");-->
+<!--  background-repeat: no-repeat;-->
+<!--  background-size: 100% 100%;-->
+<!--}-->
+
+<!--.chart1 {-->
+<!--  position: absolute;-->
+<!--  top: 74.5%;-->
+<!--  left: 2.2%;-->
+<!--  width: 19%;-->
+<!--  height: 20%;-->
+<!--}-->
+
+<!--.chart2 {-->
+<!--  position: absolute;-->
+<!--  top: 74.5%;-->
+<!--  left: 79.2%;-->
+<!--  width: 19%;-->
+<!--  height: 20%;-->
+<!--}-->
+
+<!--.chart3 {-->
+<!--  position: absolute;-->
+<!--  top: 76.5%;-->
+<!--  left: 23.2%;-->
+<!--  width: 53%;-->
+<!--  height: 18%;-->
+<!--}-->
+
+<!--.electricWaterButton1 .electricButton {-->
+<!--  position: absolute;-->
+<!--  top: 70.9%;-->
+<!--  left: 12.8%;-->
+<!--  font-size: 0.9vw;-->
+<!--  color: #fff;-->
+<!--  cursor: pointer;-->
+<!--  padding: 0 18px;-->
+<!--  background-image: url("~@/img/common/electricityWaterBg.png");-->
+<!--  background-size: 100% 100%;-->
+<!--  background-repeat: no-repeat;-->
+<!--}-->
+
+<!--.electricWaterButton1 .waterButton {-->
+<!--  position: absolute;-->
+<!--  top: 70.9%;-->
+<!--  left: 16.3%;-->
+<!--  font-size: 0.9vw;-->
+<!--  color: #ccc;-->
+<!--  cursor: pointer;-->
+<!--  padding: 0 18px;-->
+<!--  background-size: 100% 100%;-->
+<!--  background-repeat: no-repeat;-->
+<!--}-->
+
+<!--.electricWaterButton2 .electricButton {-->
+<!--  position: absolute;-->
+<!--  top: 70.9%;-->
+<!--  left: 67.8%;-->
+<!--  font-size: 0.9vw;-->
+<!--  color: #fff;-->
+<!--  cursor: pointer;-->
+<!--  padding: 0 18px;-->
+<!--  background-image: url("~@/img/common/electricityWaterBg.png");-->
+<!--  background-size: 100% 100%;-->
+<!--  background-repeat: no-repeat;-->
+<!--}-->
+
+<!--.electricWaterButton2 .waterButton {-->
+<!--  position: absolute;-->
+<!--  top: 70.9%;-->
+<!--  left: 71.3%;-->
+<!--  font-size: 0.9vw;-->
+<!--  color: #ccc;-->
+<!--  cursor: pointer;-->
+<!--  padding: 0 18px;-->
+<!--  background-size: 100% 100%;-->
+<!--  background-repeat: no-repeat;-->
+<!--}-->
+
+<!--.electricWaterButton3 .electricButton {-->
+<!--  position: absolute;-->
+<!--  top: 70.9%;-->
+<!--  left: 89.6%;-->
+<!--  font-size: 0.9vw;-->
+<!--  color: #fff;-->
+<!--  cursor: pointer;-->
+<!--  padding: 0 18px;-->
+<!--  background-image: url("~@/img/common/electricityWaterBg.png");-->
+<!--  background-size: 100% 100%;-->
+<!--  background-repeat: no-repeat;-->
+<!--}-->
+
+<!--.electricWaterButton3 .waterButton {-->
+<!--  position: absolute;-->
+<!--  top: 70.9%;-->
+<!--  left: 93.3%;-->
+<!--  font-size: 0.9vw;-->
+<!--  color: #ccc;-->
+<!--  cursor: pointer;-->
+<!--  padding: 0 18px;-->
+<!--  background-size: 100% 100%;-->
+<!--  background-repeat: no-repeat;-->
+<!--}-->
+
+<!--.electricWaterButton4 .electricButton {-->
+<!--  position: absolute;-->
+<!--  top: 11.9%;-->
+<!--  left: 89.6%;-->
+<!--  font-size: 0.9vw;-->
+<!--  color: #fff;-->
+<!--  cursor: pointer;-->
+<!--  padding: 0 18px;-->
+<!--  background-image: url("~@/img/common/electricityWaterBg.png");-->
+<!--  background-size: 100% 100%;-->
+<!--  background-repeat: no-repeat;-->
+<!--}-->
+
+<!--.electricWaterButton4 .waterButton {-->
+<!--  position: absolute;-->
+<!--  top: 11.9%;-->
+<!--  left: 93.3%;-->
+<!--  font-size: 0.9vw;-->
+<!--  color: #ccc;-->
+<!--  cursor: pointer;-->
+<!--  padding: 0 18px;-->
+<!--  background-size: 100% 100%;-->
+<!--  background-repeat: no-repeat;-->
+<!--}-->
+
+<!--.dataTime {-->
+<!--  position: absolute;-->
+<!--  width: 13%;-->
+<!--  height: 3%;-->
+<!--  top: 75.2%;-->
+<!--  right: 25%;-->
+<!--  line-height: 3vh;-->
+<!--  font-size: 0.8vw;-->
+<!--  border: 1px solid #054ea6;-->
+<!--  background: url("~@/img/common/time.png") no-repeat scroll 5% center-->
+<!--    transparent;-->
+<!--  padding-left: 33px;-->
+<!--  min-width: 185px;-->
+<!--}-->
+
+<!--.timeOne,-->
+<!--.timeTwo {-->
+<!--  color: #fff;-->
+<!--  display: inline-block;-->
+<!--  font-size: 0.8vw;-->
+<!--  height: 3vh;-->
+<!--  line-height: 3vh;-->
+<!--}-->
+
+<!--.span {-->
+<!--  color: #fff;-->
+<!--  display: inline-block;-->
+<!--  line-height: 3vh;-->
+<!--  padding: 0 4px;-->
+<!--}-->
+
+<!--.energyConsumptionRanking {-->
+<!--  position: absolute;-->
+<!--  width: 17.7%;-->
+<!--  height: 50.9%;-->
+<!--  top: 15.2%;-->
+<!--  right: 1.8%;-->
+<!--  padding: 0 1vw;-->
+<!--}-->
+
+<!--.rankItem {-->
+<!--  width: 100%;-->
+<!--  height: 10%;-->
+<!--  margin-top: 0.5vh;-->
+<!--  position: relative;-->
+<!--}-->
+
+<!--.rankItemInfo {-->
+<!--  width: 100%;-->
+<!--  height: calc(100% - 7px);-->
+<!--  position: relative;-->
+<!--}-->
+
+<!--.rankOne .rankItemInfoIcon {-->
+<!--  background-image: url("~@/img/page/1.png");-->
+<!--}-->
+
+<!--.rankTwo .rankItemInfoIcon {-->
+<!--  background-image: url("~@/img/page/2.png");-->
+<!--}-->
+
+<!--.rankThree .rankItemInfoIcon {-->
+<!--  background-image: url("~@/img/page/3.png");-->
+<!--}-->
+
+<!--.rankOne .rankItemSchedule {-->
+<!--  background-color: #d4a02c;-->
+<!--}-->
+
+<!--.rankTwo .rankItemSchedule {-->
+<!--  background-color: #f1efed;-->
+<!--}-->
+
+<!--.rankThree .rankItemSchedule {-->
+<!--  background-color: #e38b45;-->
+<!--}-->
+
+<!--.rankItemInfoIcon {-->
+<!--  background-image: url("~@/img/page/4.png");-->
+<!--  background-repeat: no-repeat;-->
+<!--  background-size: 100% 100%;-->
+<!--  display: inline-block;-->
+<!--  padding: 4px 12px 4px 8px;-->
+<!--  color: #ccc;-->
+<!--  font-style: italic;-->
+<!--  position: absolute;-->
+<!--  font-size: 0.8vw;-->
+<!--  top: 50%;-->
+<!--  transform: translateY(-50%);-->
+<!--}-->
+
+<!--.rankItemInfoName {-->
+<!--  margin-left: 22px;-->
+<!--  color: #ccc;-->
+<!--  display: inline-block;-->
+<!--  position: absolute;-->
+<!--  top: 50%;-->
+<!--  left: 50px;-->
+<!--  transform: translateY(-50%);-->
+<!--}-->
+
+<!--.rankItemInfoNum {-->
+<!--  position: absolute;-->
+<!--  top: 50%;-->
+<!--  right: 1%;-->
+<!--  color: #ccc;-->
+<!--  transform: translateY(-50%);-->
+<!--}-->
+
+<!--.rankItemScheduleDiv {-->
+<!--  width: 100%;-->
+<!--  margin-top: 4px;-->
+<!--  height: 3px;-->
+<!--  background-color: #042a63;-->
+<!--  position: relative;-->
+<!--}-->
+
+<!--.rankItemSchedule {-->
+<!--  position: absolute;-->
+<!--  top: 0;-->
+<!--  height: 100%;-->
+<!--  left: 0;-->
+<!--  width: 20%;-->
+<!--  background-color: #0763c0;-->
+<!--}-->
+<!--</style>-->
diff --git a/src/views/energy/LeadershipView/LeadershipViewChearts/index.vue b/src/views/energy/LeadershipView/LeadershipViewChearts/index.vue
new file mode 100644
index 00000000..e34158ae
--- /dev/null
+++ b/src/views/energy/LeadershipView/LeadershipViewChearts/index.vue
@@ -0,0 +1,1611 @@
+<!--<template>-->
+<!--  <div class="app-container home" style="height: 100vh; overflow: hidden">-->
+<!--    <div class="title-left fl" @click="link1()">首页</div>-->
+<!--    <div class="title-left2 fl" @click="link2()">能耗预览</div>-->
+<!--    <div class="title-right fl" @click="link3()">表具状态</div>-->
+<!--    <div class="title-right2 fl" @click="link4()">进入后台</div>-->
+<!--    <div class="data">-->
+<!--      <div class="select" style="top: 6%; left: 0.6%">-->
+<!--        <select class="selectOne" @change="SeleteType($event)">-->
+<!--          <option value="0">建筑</option>-->
+<!--          <option value="1">业态</option>-->
+<!--          <option value="2">分项</option>-->
+<!--        </select>-->
+<!--        <select-->
+<!--          v-model="relationId"-->
+<!--          class="selectTwo"-->
+<!--          @change="SeleteRegion(relationId)"-->
+<!--        >-->
+<!--          <option-->
+<!--            v-for="(item, index) in RegionList"-->
+<!--            :selected="RegionList[0]"-->
+<!--            :value="item.relationId"-->
+<!--            :key="index"-->
+<!--            :label="item.unitName"-->
+<!--          >-->
+<!--            &lt;!&ndash; {{ item.unitName }} &ndash;&gt;-->
+<!--          </option>-->
+<!--        </select>-->
+<!--      </div>-->
+<!--      <div class="SelectTime" style="top: 5.7%; left: 10%">-->
+<!--        <el-date-picker-->
+<!--          v-model="value1"-->
+<!--          type="daterange"-->
+<!--          unlink-panels-->
+<!--          range-separator="-&#45;&#45;"-->
+<!--          :start-placeholder="beginCollectTime"-->
+<!--          :end-placeholder="endCollectTime"-->
+<!--          value-format="yyyy-MM-dd HH:mm:ss"-->
+<!--          @change="SeleteDate(value1)"-->
+<!--        >-->
+<!--        </el-date-picker>-->
+<!--      </div>-->
+<!--      <div class="DosageSwitching" style="top: 9.6%; left: 57%">-->
+<!--        <div-->
+<!--          class="ElectricQuantity"-->
+<!--          :class="{ electricityWaterBg: dian1 }"-->
+<!--          @click="ClickDian1(2)"-->
+<!--        >-->
+<!--          电量-->
+<!--        </div>-->
+<!--        <div-->
+<!--          class="WaterQuantity"-->
+<!--          :class="{ electricityWaterBg: shui1 }"-->
+<!--          @click="ClickDian1(3)"-->
+<!--        >-->
+<!--          水量-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="BusinessSwitching" style="top: 9.2%; right: 0%">-->
+<!--        <div-->
+<!--          @click="ClickDian2(2)"-->
+<!--          :class="{ electricityWaterBg: dian2 }"-->
+<!--          class="Business"-->
+<!--        >-->
+<!--          电量-->
+<!--        </div>-->
+<!--        <div-->
+<!--          @click="ClickDian2(3)"-->
+<!--          :class="{ electricityWaterBg: shui2 }"-->
+<!--          class="Region"-->
+<!--        >-->
+<!--          水量-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="LineLossBusinessSwitching" style="top: 53%; right: 0%">-->
+<!--        <div-->
+<!--          @click="ClickDian3(2)"-->
+<!--          :class="{ electricityWaterBg: dian3 }"-->
+<!--          class="LineLossBusinessSwitching-Business"-->
+<!--        >-->
+<!--          电量-->
+<!--        </div>-->
+<!--        <div-->
+<!--          @click="ClickDian3(3)"-->
+<!--          :class="{ electricityWaterBg: shui3 }"-->
+<!--          class="LineLossBusinessSwitching-Region"-->
+<!--        >-->
+<!--          水量-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="Description" style="top: 16%; left: 5%">-->
+<!--        <div class="Description-title">合计电量</div>-->
+<!--        <div class="Description-footer">{{ sumEnergyValue }}</div>-->
+<!--        <div class="Description-kwh">{{ energyType1 == 2 ? "kwh" : "m³" }}</div>-->
+<!--      </div>-->
+<!--      <div class="LineLoss" style="bottom: 14%; left: 5%">-->
+<!--        <div class="LineLoss-footer">{{ lossSum }}</div>-->
+<!--        <div class="LineLoss-kwh">{{ energyType1 == 2 ? "kwh" : "m³" }}</div>-->
+<!--      </div>-->
+<!--      <div-->
+<!--        class="TodyChart"-->
+<!--        ref="TodyChart"-->
+<!--        style="width: 48%; top: 15%; left: 15%"-->
+<!--      ></div>-->
+<!--      <div-->
+<!--        class="MonthOnMonth"-->
+<!--        ref="MonthOnMonth"-->
+<!--        style="width: 27%; height: 22vh; position: absolute; top: 43%; left: 3%"-->
+<!--      ></div>-->
+<!--      <div-->
+<!--        class="YearOnYear"-->
+<!--        ref="YearOnYear"-->
+<!--        style="-->
+<!--          width: 27vw;-->
+<!--          height: 22vh;-->
+<!--          position: absolute;-->
+<!--          top: 43%;-->
+<!--          left: 33.8%;-->
+<!--        "-->
+<!--      ></div>-->
+<!--      <div-->
+<!--        class="RingGraph"-->
+<!--        ref="RingGraph"-->
+<!--        style="width: 48%; height: 22%; position: absolute; top: 70%; left: 16%"-->
+<!--      ></div>-->
+<!--      <div-->
+<!--        class="EnergyConsumption"-->
+<!--        ref="EnergyConsumption"-->
+<!--        style="top: 13%; right: 1%"-->
+<!--      ></div>-->
+<!--      <div-->
+<!--        class="LineLossRanking"-->
+<!--        ref="LineLossRanking"-->
+<!--        style="bottom: 9%; right: 0.4%"-->
+<!--      ></div>-->
+<!--    </div>-->
+<!--    <div class="dateRight" id="dateRight">{{ gettimedata }}</div>-->
+<!--  </div>-->
+<!--</template>-->
+
+<!--<script>-->
+<!--import {-->
+<!--  selectTypeSubset,-->
+<!--  previewPolyline,-->
+<!--  previewenergyRank,-->
+<!--  previewlineLossRank,-->
+<!--  previewLineLossLine,-->
+<!--} from "@/api/kanban/LeadershipViewChearts";-->
+<!--import moment from "moment";-->
+<!--export default {-->
+<!--  name: "Index",-->
+<!--  data() {-->
+<!--    return {-->
+<!--      version: "3.6.2",-->
+<!--      type: "0",-->
+<!--      RegionList: [],-->
+<!--      dian1: true,-->
+<!--      shui1: false,-->
+<!--      dian2: true,-->
+<!--      shui2: false,-->
+<!--      dian3: true,-->
+<!--      shui3: false,-->
+<!--      QueryDataObject: {},-->
+<!--      energyType1: "2",-->
+<!--      value1: [],-->
+<!--      beginCollectTime: "",-->
+<!--      endCollectTime: "",-->
+<!--      gettimedata: "",-->
+<!--      relationId: "",-->
+<!--      option1: "0",-->
+<!--      sumEnergyValue: "",-->
+<!--      lossSum: "",-->
+<!--    };-->
+<!--  },-->
+<!--  mounted() {-->
+<!--    var startTime = moment().startOf('months').format('yyyy-MM-DD HH:mm:ss')-->
+<!--    //console.log('zhuanhuahou',this.dateRangeone)-->
+<!--    var endTime = moment().endOf('months').format("yyyy-MM-DD HH:mm:ss");-->
+
+<!--    this.value1[0] = startTime;-->
+<!--    this.value1[1] = endTime;-->
+<!--    console.log(this.value1);-->
+<!--    this.QueryDataObject.beginCollectTime = startTime;-->
+<!--    this.QueryDataObject.endCollectTime = endTime;-->
+<!--    this.beginCollectTime = moment(startTime).format("yyyy-MM-DD");-->
+<!--    this.endCollectTime = moment(endTime).format("yyyy-MM-DD");-->
+<!--    this.selectTypeSubset(this.type);-->
+<!--    this.QueryDataObject.type = "0";-->
+<!--    this.gettime();-->
+<!--  },-->
+<!--  methods: {-->
+<!--    gettime() {-->
+<!--      this.gettimedata = moment().format("YYYY年MM月DD日 HH:mm:ss ");-->
+<!--      setInterval(() => {-->
+<!--        this.gettimedata = moment().format("YYYY年MM月DD日 HH:mm:ss ");-->
+<!--      }, 1000);-->
+<!--    },-->
+<!--    //左侧第一个选择类型下拉框 回调函数-->
+<!--    link1() {-->
+<!--      this.$router.push({ path: "/report/board/index" });-->
+<!--    },-->
+<!--    link2() {-->
+<!--      this.$router.push({ path: "/report/board/LeadershipViewCheart" });-->
+<!--    },-->
+<!--    link3() {-->
+<!--      this.$router.push({ path: "/report/board/ApparentState" });-->
+<!--    },-->
+<!--    link4() {-->
+<!--      this.$router.push({ path: "/powerUse/ElectricityPreview" });-->
+<!--    },-->
+<!--    SeleteType(e) {-->
+<!--      this.type = e.target.value;-->
+<!--      this.QueryDataObject.type = e.target.value;-->
+<!--      this.selectTypeSubset(this.type);-->
+<!--    },-->
+<!--    //左侧第二个选择区域下拉框 获取数据-->
+<!--    selectTypeSubset(type) {-->
+<!--      selectTypeSubset(type).then((res) => {-->
+<!--        this.RegionList = res.data;-->
+<!--        this.QueryDataObject.relationId = this.RegionList[0].relationId;-->
+<!--        this.relationId = this.RegionList[0].relationId;-->
+<!--        this.initTodyChartCharts(this.energyType1);-->
+<!--        this.initMonthOnMonthCharts(this.energyType1);-->
+<!--        this.initYearOnYearCharts(this.energyType1);-->
+<!--        this.initRingGraphCharts(this.energyType1);-->
+<!--        this.initLineLossRankingCharts(this.energyType1);-->
+<!--        this.initEnergyConsumptionCharts(this.energyType1);-->
+<!--      });-->
+<!--    },-->
+<!--    //左侧第二个选择区域下拉框 回调函数-->
+<!--    SeleteRegion(value) {-->
+<!--      this.QueryDataObject.relationId = value;-->
+<!--      this.relationId = value;-->
+<!--      console.log("QueryDataObject", this.QueryDataObject);-->
+<!--      this.initTodyChartCharts(this.energyType1);-->
+<!--      this.initMonthOnMonthCharts(this.energyType1);-->
+<!--      this.initYearOnYearCharts(this.energyType1);-->
+<!--      this.initRingGraphCharts(this.energyType1);-->
+<!--      this.initLineLossRankingCharts(this.energyType1);-->
+<!--      this.initEnergyConsumptionCharts(this.energyType1);-->
+<!--    },-->
+<!--    //左上角选择时间之后 回调函数-->
+<!--    SeleteDate(e) {-->
+<!--      this.QueryDataObject.beginCollectTime = e[0];-->
+<!--      this.QueryDataObject.endCollectTime = e[1];-->
+<!--      this.initTodyChartCharts(this.energyType1);-->
+<!--      this.initMonthOnMonthCharts(this.energyType1);-->
+<!--      this.initYearOnYearCharts(this.energyType1);-->
+<!--      this.initRingGraphCharts(this.energyType1);-->
+<!--      this.initLineLossRankingCharts(this.energyType1);-->
+<!--      this.initEnergyConsumptionCharts(this.energyType1);-->
+<!--    },-->
+<!--    ClickDian1(energyType1) {-->
+<!--      this.dian1 = !this.dian1;-->
+<!--      this.shui1 = !this.shui1;-->
+<!--      this.energyType1 = energyType1;-->
+<!--      this.initTodyChartCharts(this.energyType1);-->
+<!--      this.initMonthOnMonthCharts(this.energyType1);-->
+<!--      this.initYearOnYearCharts(this.energyType1);-->
+<!--      this.initRingGraphCharts(this.energyType1);-->
+<!--    },-->
+<!--    ClickDian2(energyType1) {-->
+<!--      this.dian2 = !this.dian2;-->
+<!--      this.shui2 = !this.shui2;-->
+<!--      this.energyType1 = energyType1;-->
+<!--      this.initEnergyConsumptionCharts(this.energyType1);-->
+<!--    },-->
+<!--    ClickDian3(energyType1) {-->
+<!--      this.dian3 = !this.dian3;-->
+<!--      this.shui3 = !this.shui3;-->
+<!--      this.energyType1 = energyType1;-->
+<!--      console.log(energyType1);-->
+<!--      this.initLineLossRankingCharts(this.energyType1);-->
+<!--    },-->
+<!--    initTodyChartCharts(energyType) {-->
+<!--      let arr = {-->
+<!--        type: this.QueryDataObject.type,-->
+<!--        relationId: this.QueryDataObject.relationId,-->
+<!--        beginCollectTime: this.QueryDataObject.beginCollectTime,-->
+<!--        endCollectTime: this.QueryDataObject.endCollectTime,-->
+<!--        energyType,-->
+<!--      };-->
+<!--      previewPolyline(arr).then((res) => {-->
+<!--        let myChart = this.$echarts.init(this.$refs.TodyChart);-->
+<!--        this.sumEnergyValue = res.data.sumEnergyValue;-->
+<!--        var unit = "";-->
+<!--        var name = "";-->
+<!--        if (energyType == 2) {-->
+<!--          unit = "kwh";-->
+<!--          name = "电量";-->
+<!--        } else {-->
+<!--          unit = "m³";-->
+<!--          name = "水量";-->
+<!--        }-->
+
+<!--        let data = {-->
+<!--          x:-->
+<!--            res.data.energyDateList?.map(-->
+<!--              (val) => val?.split("-")?.[2] + "日"-->
+<!--            ) || [],-->
+<!--          y: res.data.todayValueList,-->
+<!--        };-->
+<!--        let max = Math.max(...data.y) + 1;-->
+<!--        let interval = Math.ceil(max / 3 / 10) * 10;-->
+<!--        let option = {-->
+<!--          grid: {-->
+<!--            containLabel: true,-->
+<!--            left: "2%",-->
+<!--            right: "2%",-->
+<!--            bottom: "8%",-->
+<!--          },-->
+<!--          tooltip: {-->
+<!--            trigger: "axis",-->
+<!--          },-->
+<!--          title: {-->
+<!--            show: true,-->
+<!--            left: "center",-->
+<!--            top: "8px",-->
+<!--            text: "当月" + name + "走势图",-->
+<!--            textStyle: {-->
+<!--              color: "white",-->
+<!--              fontSize: "12",-->
+<!--            },-->
+<!--          },-->
+<!--          xAxis: {-->
+<!--            axisLabel: {-->
+<!--              color: "#c0c3cd",-->
+<!--              fontSize: 14,-->
+<!--            },-->
+<!--            axisTick: {-->
+<!--              lineStyle: {-->
+<!--                color: "#384267",-->
+<!--              },-->
+<!--              show: true,-->
+<!--            },-->
+<!--            splitLine: {-->
+<!--              show: false,-->
+<!--            },-->
+<!--            axisLine: {-->
+<!--              lineStyle: {-->
+<!--                color: "rgba(255,255,255,0.1)",-->
+<!--                width: 1,-->
+<!--              },-->
+<!--              show: true,-->
+<!--            },-->
+<!--            data: data.x,-->
+<!--            type: "category",-->
+<!--          },-->
+<!--          yAxis: {-->
+<!--            interval,-->
+<!--            axisLabel: {-->
+<!--              color: "#c0c3cd",-->
+<!--              fontSize: 14,-->
+<!--            },-->
+<!--            axisTick: {-->
+<!--              lineStyle: {-->
+<!--                color: "#384267",-->
+<!--                width: 1,-->
+<!--              },-->
+<!--              show: true,-->
+<!--            },-->
+<!--            splitLine: {-->
+<!--              show: true,-->
+<!--              lineStyle: {-->
+<!--                color: "rgba(255,255,255,0.1)",-->
+<!--              },-->
+<!--            },-->
+<!--            axisLine: {-->
+<!--              lineStyle: {-->
+<!--                color: "rgba(255,255,255,0.1)",-->
+<!--                width: 1,-->
+<!--              },-->
+<!--              show: true,-->
+<!--            },-->
+<!--            nameTextStyle: {-->
+<!--              color: "#fff",-->
+<!--            },-->
+<!--            name: unit,-->
+<!--          },-->
+<!--          series: [-->
+<!--            {-->
+<!--              data: data.y,-->
+<!--              type: "bar",-->
+<!--              barMaxWidth: 20,-->
+<!--              barWidth: "75%",-->
+<!--              itemStyle: {-->
+<!--                color: {-->
+<!--                  x: 0,-->
+<!--                  y: 0,-->
+<!--                  x2: 0,-->
+<!--                  y2: 1,-->
+<!--                  type: "linear",-->
+<!--                  global: false,-->
+<!--                  colorStops: [-->
+<!--                    {-->
+<!--                      offset: 0,-->
+<!--                      color: "#0a8ff6",-->
+<!--                    },-->
+<!--                    {-->
+<!--                      offset: 1,-->
+<!--                      color: "#06f8f7",-->
+<!--                    },-->
+<!--                  ],-->
+<!--                },-->
+<!--              },-->
+<!--            },-->
+<!--            {-->
+<!--              // label: {-->
+<!--              //     show: true,-->
+<!--              //     position: 'top',-->
+<!--              //     distance: 10,-->
+<!--              //     color: '#0273d3',-->
+<!--              //     fontWeight: 600,-->
+<!--              //     formatter: (e) => {-->
+<!--              //         return data.y?.[e.dataIndex]-->
+<!--              //     }-->
+<!--              // },-->
+<!--              data: Array(data.y?.length).fill(-->
+<!--                Math.max(...(data.y || [0])) * 1.2-->
+<!--              ),-->
+<!--              type: "bar",-->
+<!--              barMaxWidth: 20,-->
+<!--              barWidth: "75%",-->
+<!--              barGap: "-100%",-->
+<!--              itemStyle: {-->
+<!--                color: "rgba(5,50,125,0.7)",-->
+<!--              },-->
+<!--              zlevel: -1,-->
+<!--              tooltip: {-->
+<!--                show: false,-->
+<!--              },-->
+<!--            },-->
+<!--            {-->
+<!--              type: "line",-->
+<!--              stack: "总量",-->
+<!--              symbol: "circle",-->
+<!--              symbolSize: 8,-->
+<!--              itemStyle: {-->
+<!--                normal: {-->
+<!--                  borderWidth: 2,-->
+<!--                  borderColor: "#fff",-->
+<!--                  color: "rgba(0,0,0,0)",-->
+<!--                  lineStyle: {-->
+<!--                    color: "#fff",-->
+<!--                    width: 1,-->
+<!--                  },-->
+<!--                },-->
+<!--              },-->
+<!--              tooltip: {-->
+<!--                show: false,-->
+<!--              },-->
+<!--              data: data.y,-->
+<!--            },-->
+<!--          ],-->
+<!--        };-->
+<!--        myChart.setOption(option);-->
+<!--      });-->
+<!--    },-->
+<!--    initMonthOnMonthCharts(energyType) {-->
+<!--      let arr = {-->
+<!--        type: this.QueryDataObject.type,-->
+<!--        relationId: this.QueryDataObject.relationId,-->
+<!--        beginCollectTime: this.QueryDataObject.beginCollectTime,-->
+<!--        endCollectTime: this.QueryDataObject.endCollectTime,-->
+<!--        energyType,-->
+<!--      };-->
+<!--      let optionData = {-->
+<!--        nameOne: "今日",-->
+<!--        colorOne: "#088df7",-->
+<!--        nameTwo: "昨日",-->
+<!--        colorTwo: "#01fbed",-->
+<!--      };-->
+<!--      previewPolyline(arr).then((res) => {-->
+<!--        let myChart = this.$echarts.init(this.$refs.MonthOnMonth);-->
+<!--        var unit = "";-->
+<!--        var name = "";-->
+<!--        if (energyType == 2) {-->
+<!--          unit = "kwh";-->
+<!--          name = "电量";-->
+<!--        } else {-->
+<!--          unit = "m³";-->
+<!--          name = "水量";-->
+<!--        }-->
+<!--        let data = {-->
+<!--          x:-->
+<!--            res.data.energyDateList.map((val) => val?.split("-")?.[2] + "日") ||-->
+<!--            [],-->
+<!--          one: res.data.todayValueList,-->
+<!--          two: res.data.yesterdayList,-->
+<!--        };-->
+<!--        let option = {-->
+<!--          grid: {-->
+<!--            left: "5%",-->
+<!--            right: "5%",-->
+<!--            top: "15%",-->
+<!--            bottom: "1%",-->
+<!--            containLabel: true,-->
+<!--          },-->
+<!--          legend: {-->
+<!--            textStyle: {-->
+<!--              color: "#fff",-->
+<!--            },-->
+<!--          },-->
+<!--          tooltip: {-->
+<!--            trigger: "axis",-->
+<!--            axisPointer: {-->
+<!--              type: "cross",-->
+<!--              crossStyle: {-->
+<!--                color: "#999",-->
+<!--              },-->
+<!--              lineStyle: {-->
+<!--                type: "dashed",-->
+<!--              },-->
+<!--            },-->
+<!--          },-->
+<!--          xAxis: [-->
+<!--            {-->
+<!--              type: "category",-->
+<!--              boundaryGap: false,-->
+<!--              axisLabel: {-->
+<!--                color: "#fff",-->
+<!--                margin: 14,-->
+<!--                textStyle: {-->
+<!--                  fontSize: 14,-->
+<!--                },-->
+<!--                // rotate: 20,-->
+<!--              },-->
+<!--              axisLine: {-->
+<!--                show: true,-->
+<!--                lineStyle: {-->
+<!--                  color: "#397cbc",-->
+<!--                },-->
+<!--              },-->
+<!--              axisTick: {-->
+<!--                show: false,-->
+<!--              },-->
+<!--              splitLine: {-->
+<!--                show: false,-->
+<!--                lineStyle: {-->
+<!--                  color: "#195384",-->
+<!--                },-->
+<!--              },-->
+<!--              data: data.x,-->
+<!--            },-->
+<!--          ],-->
+<!--          yAxis: {-->
+<!--            name: unit,-->
+<!--            type: "value",-->
+<!--            nameTextStyle: {-->
+<!--              color: "#82A9EF",-->
+<!--            },-->
+<!--            min: 0,-->
+<!--            axisLabel: {-->
+<!--              formatter: "{value}",-->
+<!--              textStyle: {-->
+<!--                color: "#82A9EF",-->
+<!--                fontSize: 14,-->
+<!--              },-->
+<!--            },-->
+<!--            axisLine: {-->
+<!--              show: true,-->
+<!--              lineStyle: {-->
+<!--                color: "#27b4c2",-->
+<!--              },-->
+<!--            },-->
+<!--            axisTick: {-->
+<!--              // show: false-->
+<!--            },-->
+<!--            splitLine: {-->
+<!--              show: true,-->
+<!--              lineStyle: {-->
+<!--                color: "#11366e",-->
+<!--              },-->
+<!--            },-->
+<!--          },-->
+<!--          series: [-->
+<!--            {-->
+<!--              name: optionData.nameOne ? optionData.nameOne : "",-->
+<!--              type: "line",-->
+<!--              stack: "",-->
+<!--              symbol: "circle",-->
+<!--              symbolSize: 8,-->
+<!--              itemStyle: {-->
+<!--                normal: {-->
+<!--                  borderWidth: 2,-->
+<!--                  borderColor: optionData?.colorOne-->
+<!--                    ? optionData?.colorOne-->
+<!--                    : "#FFFF00",-->
+<!--                  color: "#fff",-->
+<!--                  lineStyle: {-->
+<!--                    color: optionData?.colorOne-->
+<!--                      ? optionData?.colorOne-->
+<!--                      : "#FFFF00",-->
+<!--                    width: 1,-->
+<!--                  },-->
+<!--                },-->
+<!--              },-->
+<!--              markPoint: {-->
+<!--                itemStyle: {-->
+<!--                  normal: {-->
+<!--                    color: "red",-->
+<!--                  },-->
+<!--                },-->
+<!--              },-->
+<!--              data: data.one,-->
+<!--            },-->
+<!--            {-->
+<!--              name: optionData?.nameTwo ? optionData?.nameTwo : "",-->
+<!--              type: "line",-->
+<!--              stack: "",-->
+<!--              symbol: "circle",-->
+<!--              symbolSize: 8,-->
+
+<!--              itemStyle: {-->
+<!--                normal: {-->
+<!--                  borderWidth: 2,-->
+<!--                  borderColor: optionData?.colorTwo-->
+<!--                    ? optionData?.colorTwo-->
+<!--                    : "#F64D5F",-->
+<!--                  color: "#fff",-->
+<!--                  lineStyle: {-->
+<!--                    color: optionData?.colorTwo-->
+<!--                      ? optionData?.colorTwo-->
+<!--                      : "#F64D5F",-->
+<!--                    width: 1,-->
+<!--                  },-->
+<!--                },-->
+<!--              },-->
+<!--              data: data.two,-->
+<!--            },-->
+<!--          ],-->
+<!--        };-->
+<!--        myChart.setOption(option);-->
+<!--      });-->
+<!--    },-->
+<!--    initYearOnYearCharts(energyType) {-->
+<!--      let arr = {-->
+<!--        type: this.QueryDataObject.type,-->
+<!--        relationId: this.QueryDataObject.relationId,-->
+<!--        beginCollectTime: this.QueryDataObject.beginCollectTime,-->
+<!--        endCollectTime: this.QueryDataObject.endCollectTime,-->
+<!--        energyType,-->
+<!--      };-->
+<!--      let optionData = {-->
+<!--        nameOne: "今年",-->
+<!--        colorOne: "#849dff",-->
+<!--        nameTwo: "去年",-->
+<!--        colorTwo: "#6fe076",-->
+<!--      };-->
+<!--      previewPolyline(arr).then((res) => {-->
+<!--        let myChart = this.$echarts.init(this.$refs.YearOnYear);-->
+<!--        var unit = "";-->
+<!--        var name = "";-->
+<!--        if (energyType == 2) {-->
+<!--          unit = "kwh";-->
+<!--          name = "电量";-->
+<!--        } else {-->
+<!--          unit = "m³";-->
+<!--          name = "水量";-->
+<!--        }-->
+<!--        let data = {-->
+<!--          x:-->
+<!--            res.data.energyDateList.map((val) => val?.split("-")?.[2] + "日") ||-->
+<!--            [],-->
+<!--          one: res.data.todayValueList,-->
+<!--          two: res.data.lastYearList,-->
+<!--        };-->
+<!--        let option = {-->
+<!--          grid: {-->
+<!--            left: "5%",-->
+<!--            right: "5%",-->
+<!--            top: "15%",-->
+<!--            bottom: "1%",-->
+<!--            containLabel: true,-->
+<!--          },-->
+<!--          legend: {-->
+<!--            textStyle: {-->
+<!--              color: "#fff",-->
+<!--            },-->
+<!--          },-->
+<!--          tooltip: {-->
+<!--            trigger: "axis",-->
+<!--            axisPointer: {-->
+<!--              type: "cross",-->
+<!--              crossStyle: {-->
+<!--                color: "#999",-->
+<!--              },-->
+<!--              lineStyle: {-->
+<!--                type: "dashed",-->
+<!--              },-->
+<!--            },-->
+<!--          },-->
+<!--          xAxis: [-->
+<!--            {-->
+<!--              type: "category",-->
+<!--              boundaryGap: false,-->
+<!--              axisLabel: {-->
+<!--                color: "#fff",-->
+<!--                margin: 14,-->
+<!--                textStyle: {-->
+<!--                  fontSize: 14,-->
+<!--                },-->
+<!--                // rotate: 20,-->
+<!--              },-->
+<!--              axisLine: {-->
+<!--                show: true,-->
+<!--                lineStyle: {-->
+<!--                  color: "#397cbc",-->
+<!--                },-->
+<!--              },-->
+<!--              axisTick: {-->
+<!--                show: false,-->
+<!--              },-->
+<!--              splitLine: {-->
+<!--                show: false,-->
+<!--                lineStyle: {-->
+<!--                  color: "#195384",-->
+<!--                },-->
+<!--              },-->
+<!--              data: data.x,-->
+<!--            },-->
+<!--          ],-->
+<!--          yAxis: {-->
+<!--            name: unit,-->
+<!--            type: "value",-->
+<!--            nameTextStyle: {-->
+<!--              color: "#82A9EF",-->
+<!--            },-->
+<!--            min: 0,-->
+<!--            axisLabel: {-->
+<!--              formatter: "{value}",-->
+<!--              textStyle: {-->
+<!--                color: "#82A9EF",-->
+<!--                fontSize: 14,-->
+<!--              },-->
+<!--            },-->
+<!--            axisLine: {-->
+<!--              show: true,-->
+<!--              lineStyle: {-->
+<!--                color: "#27b4c2",-->
+<!--              },-->
+<!--            },-->
+<!--            axisTick: {-->
+<!--              // show: false-->
+<!--            },-->
+<!--            splitLine: {-->
+<!--              show: true,-->
+<!--              lineStyle: {-->
+<!--                color: "#11366e",-->
+<!--              },-->
+<!--            },-->
+<!--          },-->
+<!--          series: [-->
+<!--            {-->
+<!--              name: optionData.nameOne ? optionData.nameOne : "",-->
+<!--              type: "line",-->
+<!--              stack: "",-->
+<!--              symbol: "circle",-->
+<!--              symbolSize: 8,-->
+<!--              itemStyle: {-->
+<!--                normal: {-->
+<!--                  borderWidth: 2,-->
+<!--                  borderColor: optionData?.colorOne-->
+<!--                    ? optionData?.colorOne-->
+<!--                    : "#FFFF00",-->
+<!--                  color: "#fff",-->
+<!--                  lineStyle: {-->
+<!--                    color: optionData?.colorOne-->
+<!--                      ? optionData?.colorOne-->
+<!--                      : "#FFFF00",-->
+<!--                    width: 1,-->
+<!--                  },-->
+<!--                },-->
+<!--              },-->
+<!--              markPoint: {-->
+<!--                itemStyle: {-->
+<!--                  normal: {-->
+<!--                    color: "red",-->
+<!--                  },-->
+<!--                },-->
+<!--              },-->
+<!--              data: data.one,-->
+<!--            },-->
+<!--            {-->
+<!--              name: optionData?.nameTwo ? optionData?.nameTwo : "",-->
+<!--              type: "line",-->
+<!--              stack: "",-->
+<!--              symbol: "circle",-->
+<!--              symbolSize: 8,-->
+
+<!--              itemStyle: {-->
+<!--                normal: {-->
+<!--                  borderWidth: 2,-->
+<!--                  borderColor: optionData?.colorTwo-->
+<!--                    ? optionData?.colorTwo-->
+<!--                    : "#F64D5F",-->
+<!--                  color: "#fff",-->
+<!--                  lineStyle: {-->
+<!--                    color: optionData?.colorTwo-->
+<!--                      ? optionData?.colorTwo-->
+<!--                      : "#F64D5F",-->
+<!--                    width: 1,-->
+<!--                  },-->
+<!--                },-->
+<!--              },-->
+<!--              data: data.two,-->
+<!--            },-->
+<!--          ],-->
+<!--        };-->
+<!--        myChart.setOption(option);-->
+<!--      });-->
+<!--    },-->
+<!--    initRingGraphCharts(energyType) {-->
+<!--      let arr = {-->
+<!--        type: this.QueryDataObject.type,-->
+<!--        relationId: this.QueryDataObject.relationId,-->
+<!--        beginCollectTime: this.QueryDataObject.beginCollectTime,-->
+<!--        endCollectTime: this.QueryDataObject.endCollectTime,-->
+<!--        energyType,-->
+<!--      };-->
+<!--      previewLineLossLine(arr).then((res) => {-->
+<!--        let myChart = this.$echarts.init(this.$refs.RingGraph);-->
+<!--        this.lossSum = res.data.lossSum;-->
+<!--        var unit = "";-->
+<!--        var name = "";-->
+<!--        if (energyType == 2) {-->
+<!--          unit = "kwh";-->
+<!--          name = "电量";-->
+<!--        } else {-->
+<!--          unit = "m³";-->
+<!--          name = "水量";-->
+<!--        }-->
+<!--        let optionData = {-->
+<!--          bgColor: "#09fa95",-->
+<!--        };-->
+<!--        let data = { x: res.data.nameList, y: res.data.valueList };-->
+<!--        let max = Math.max(...data.y) + 1;-->
+<!--        let interval = Math.ceil(max / 3 / 10) * 10;-->
+<!--        let option = {-->
+<!--          grid: {-->
+<!--            containLabel: true,-->
+<!--            left: "2%",-->
+<!--            right: "2%",-->
+<!--            bottom: "1%",-->
+<!--            // top: 30,-->
+<!--            // width:'100%',-->
+<!--          },-->
+<!--          tooltip: {-->
+<!--            trigger: "axis",-->
+<!--          },-->
+<!--          xAxis: {-->
+<!--            axisLabel: {-->
+<!--              color: "#c0c3cd",-->
+<!--              fontSize: 14,-->
+<!--            },-->
+<!--            axisTick: {-->
+<!--              lineStyle: {-->
+<!--                color: "#384267",-->
+<!--              },-->
+<!--              show: true,-->
+<!--            },-->
+<!--            splitLine: {-->
+<!--              show: false,-->
+<!--            },-->
+<!--            axisLine: {-->
+<!--              lineStyle: {-->
+<!--                color: "rgba(255,255,255,0.1)",-->
+<!--                width: 1,-->
+<!--              },-->
+<!--              show: true,-->
+<!--            },-->
+<!--            data: data.x,-->
+<!--            type: "category",-->
+<!--          },-->
+<!--          yAxis: {-->
+<!--            interval,-->
+<!--            axisLabel: {-->
+<!--              color: "#c0c3cd",-->
+<!--              fontSize: 14,-->
+<!--            },-->
+<!--            axisTick: {-->
+<!--              lineStyle: {-->
+<!--                color: "#384267",-->
+<!--                width: 1,-->
+<!--              },-->
+<!--              show: true,-->
+<!--            },-->
+<!--            splitLine: {-->
+<!--              show: true,-->
+<!--              lineStyle: {-->
+<!--                color: "rgba(255,255,255,0.1)",-->
+<!--              },-->
+<!--            },-->
+<!--            axisLine: {-->
+<!--              lineStyle: {-->
+<!--                color: "rgba(255,255,255,0.1)",-->
+<!--                width: 1,-->
+<!--              },-->
+<!--              show: true,-->
+<!--            },-->
+<!--            nameTextStyle: {-->
+<!--              color: "#fff",-->
+<!--            },-->
+<!--            name: unit,-->
+<!--          },-->
+<!--          series: [-->
+<!--            {-->
+<!--              data: data.y,-->
+<!--              type: "bar",-->
+<!--              barMaxWidth: 20,-->
+<!--              barWidth: "75%",-->
+<!--              itemStyle: {-->
+<!--                color: {-->
+<!--                  x: 0,-->
+<!--                  y: 0,-->
+<!--                  x2: 0,-->
+<!--                  y2: 1,-->
+<!--                  type: "linear",-->
+<!--                  global: false,-->
+<!--                  colorStops: [-->
+<!--                    {-->
+<!--                      offset: 0,-->
+<!--                      color: optionData.bgColor-->
+<!--                        ? optionData.bgColor-->
+<!--                        : "#0a8ff6",-->
+<!--                    },-->
+<!--                    {-->
+<!--                      offset: 1,-->
+<!--                      color: "#06f8f7",-->
+<!--                    },-->
+<!--                  ],-->
+<!--                },-->
+<!--              },-->
+<!--            },-->
+<!--            {-->
+<!--              // label: {-->
+<!--              //     show: true,-->
+<!--              //     position: 'top',-->
+<!--              //     distance: 10,-->
+<!--              //     color: '#0273d3',-->
+<!--              //     fontWeight: 600,-->
+<!--              //     formatter: (e) => {-->
+<!--              //         return data.y?.[e.dataIndex]-->
+<!--              //     }-->
+<!--              // },-->
+<!--              data: Array(data.y.length).fill(-->
+<!--                Math.max(...(data.y || [0])) * 1.2-->
+<!--              ),-->
+<!--              type: "bar",-->
+<!--              barMaxWidth: 20,-->
+<!--              barWidth: "75%",-->
+<!--              barGap: "-100%",-->
+<!--              itemStyle: {-->
+<!--                color: "rgba(5,50,125,0.7)",-->
+<!--              },-->
+<!--              zlevel: -1,-->
+<!--              tooltip: {-->
+<!--                show: false,-->
+<!--              },-->
+<!--            },-->
+<!--            {-->
+<!--              type: "line",-->
+<!--              stack: "鎬婚噺",-->
+<!--              symbol: "circle",-->
+<!--              symbolSize: 8,-->
+<!--              itemStyle: {-->
+<!--                normal: {-->
+<!--                  borderWidth: 2,-->
+<!--                  borderColor: "#fff",-->
+<!--                  color: "rgba(0,0,0,0)",-->
+<!--                  lineStyle: {-->
+<!--                    color: "#fff",-->
+<!--                    width: 1,-->
+<!--                  },-->
+<!--                },-->
+<!--              },-->
+<!--              tooltip: {-->
+<!--                show: false,-->
+<!--              },-->
+<!--              data: data.y,-->
+<!--            },-->
+<!--          ],-->
+<!--        };-->
+<!--        myChart.setOption(option);-->
+<!--      });-->
+<!--    },-->
+<!--    initEnergyConsumptionCharts(energyType) {-->
+<!--      let arr = {-->
+<!--        type: this.QueryDataObject.type,-->
+<!--        relationId: this.QueryDataObject.relationId,-->
+<!--        beginCollectTime: this.QueryDataObject.beginCollectTime,-->
+<!--        endCollectTime: this.QueryDataObject.endCollectTime,-->
+<!--        energyType,-->
+<!--      };-->
+<!--      previewenergyRank(arr).then((res) => {-->
+<!--        let myChart = this.$echarts.init(this.$refs.EnergyConsumption);-->
+<!--        let data = [];-->
+<!--        res.data.nameList.forEach((item, index) => {-->
+<!--          var a = {};-->
+<!--          a.name = item;-->
+<!--          a.value = res.data.valueList[index];-->
+<!--          data.push(a);-->
+<!--        });-->
+<!--        // for (let index = 0; index < res.data.nameList.length; index++) {-->
+<!--        //   console.log(res.data.nameList[index])-->
+<!--        // }-->
+<!--        let optionData = { color: "#26A4FF" };-->
+<!--        data = data.slice(0, 5);-->
+<!--        data.sort((a, b) => {-->
+<!--          return a.value - b.value;-->
+<!--        });-->
+<!--        const total = 1600; // 鏁版嵁鎬绘暟-->
+<!--        const totalArr = [];-->
+<!--        data.forEach((item) => {-->
+<!--          totalArr.push(total);-->
+<!--        });-->
+<!--        let option = {-->
+<!--          grid: {-->
+<!--            left: "80",-->
+<!--            right: "5%",-->
+<!--            top: "5%",-->
+<!--            bottom: "1%",-->
+<!--            containLabel: true,-->
+<!--          },-->
+<!--          tooltip: {-->
+<!--            trigger: "axis",-->
+<!--            show: true,-->
+<!--            axisPointer: {-->
+<!--              type: "none",-->
+<!--            },-->
+<!--            formatter: function (e) {-->
+<!--              return `${e[0].data.name}\n${e[0].marker}${e[0].data.value}`;-->
+<!--            },-->
+<!--          },-->
+<!--          xAxis: {-->
+<!--            // max: total,-->
+<!--            splitLine: {-->
+<!--              show: false,-->
+<!--            },-->
+<!--            axisLine: {-->
+<!--              show: true,-->
+<!--            },-->
+<!--            axisLabel: {-->
+<!--              show: true,-->
+<!--            },-->
+<!--            axisTick: {-->
+<!--              show: true,-->
+<!--            },-->
+<!--          },-->
+<!--          yAxis: [-->
+<!--            {-->
+<!--              type: "category",-->
+<!--              inverse: false,-->
+<!--              data: data,-->
+<!--              axisLine: {-->
+<!--                show: true,-->
+<!--              },-->
+<!--              axisTick: {-->
+<!--                show: false,-->
+<!--              },-->
+<!--              axisLabel: {-->
+<!--                show: false,-->
+<!--              },-->
+<!--            },-->
+<!--          ],-->
+
+<!--          series: [-->
+<!--            {-->
+<!--              type: "pictorialBar",-->
+<!--              symbol: "rect",-->
+<!--              symbolRepeat: "fixed",-->
+<!--              symbolMargin: "2",-->
+<!--              symbolClip: true,-->
+<!--              symbolSize: [5, 20],-->
+<!--              data: data,-->
+<!--              label: {-->
+<!--                normal: {-->
+<!--                  formatter: "{b}",-->
+<!--                  textStyle: {-->
+<!--                    color: "rgba(160, 172, 188, 1)",-->
+<!--                    fontSize: 13,-->
+<!--                    fontWeight: "bold",-->
+<!--                  },-->
+<!--                  position: "left",-->
+<!--                  distance: 10, // 鍚戝彸鍋忕Щ浣嶇疆-->
+<!--                  show: true,-->
+<!--                },-->
+<!--              },-->
+<!--              itemStyle: {-->
+<!--                color: optionData.color ? optionData.color : "#26a4ff",-->
+<!--              },-->
+<!--              z: 10,-->
+<!--            },-->
+<!--            {-->
+<!--              type: "pictorialBar",-->
+<!--              itemStyle: {-->
+<!--                normal: {-->
+<!--                  opacity: 0.2,-->
+<!--                },-->
+<!--              },-->
+<!--              animationDuration: 0,-->
+<!--              symbolRepeat: "fixed",-->
+<!--              symbolMargin: "2",-->
+<!--              symbol: "rect",-->
+<!--              symbolSize: [5, 20],-->
+<!--              data: totalArr, // value鍊�-->
+<!--              z: 5,-->
+<!--              tooltip: {-->
+<!--                show: false,-->
+<!--              },-->
+<!--            },-->
+<!--          ],-->
+<!--        };-->
+<!--        myChart.setOption(option);-->
+<!--      });-->
+<!--    },-->
+<!--    initLineLossRankingCharts(energyType) {-->
+<!--      let arr = {-->
+<!--        type: this.QueryDataObject.type,-->
+<!--        relationId: this.QueryDataObject.relationId,-->
+<!--        beginCollectTime: this.QueryDataObject.beginCollectTime,-->
+<!--        endCollectTime: this.QueryDataObject.endCollectTime,-->
+<!--        energyType,-->
+<!--      };-->
+<!--      previewlineLossRank(arr).then((res) => {-->
+<!--        let myChart = this.$echarts.init(this.$refs.LineLossRanking);-->
+<!--        let data = [];-->
+<!--        res.data.nameList.forEach((item, index) => {-->
+<!--          var a = {};-->
+<!--          a.name = item;-->
+<!--          a.value = res.data.valueList[index];-->
+<!--          data.push(a);-->
+<!--        });-->
+<!--        // for (let index = 0; index < res.data.nameList.length; index++) {-->
+<!--        //   console.log(res.data.nameList[index])-->
+<!--        // }-->
+<!--        let optionData = { color: "#09f8f2" };-->
+<!--        data = data.slice(0, 5);-->
+<!--        data.sort((a, b) => {-->
+<!--          return a.value - b.value;-->
+<!--        });-->
+<!--        const total = 1600; // 鏁版嵁鎬绘暟-->
+<!--        const totalArr = [];-->
+<!--        data.forEach((item) => {-->
+<!--          totalArr.push(total);-->
+<!--        });-->
+<!--        let option = {-->
+<!--          grid: {-->
+<!--            left: "80",-->
+<!--            right: "5%",-->
+<!--            top: "5%",-->
+<!--            bottom: "1%",-->
+<!--            containLabel: true,-->
+<!--          },-->
+<!--          tooltip: {-->
+<!--            trigger: "axis",-->
+<!--            show: true,-->
+<!--            axisPointer: {-->
+<!--              type: "none",-->
+<!--            },-->
+<!--            formatter: function (e) {-->
+<!--              return `${e[0].data.name}\n${e[0].marker}${e[0].data.value}`;-->
+<!--            },-->
+<!--          },-->
+<!--          xAxis: {-->
+<!--            // max: total,-->
+<!--            splitLine: {-->
+<!--              show: false,-->
+<!--            },-->
+<!--            axisLine: {-->
+<!--              show: true,-->
+<!--            },-->
+<!--            axisLabel: {-->
+<!--              show: true,-->
+<!--            },-->
+<!--            axisTick: {-->
+<!--              show: true,-->
+<!--            },-->
+<!--          },-->
+<!--          yAxis: [-->
+<!--            {-->
+<!--              type: "category",-->
+<!--              inverse: false,-->
+<!--              data: data,-->
+<!--              axisLine: {-->
+<!--                show: true,-->
+<!--              },-->
+<!--              axisTick: {-->
+<!--                show: false,-->
+<!--              },-->
+<!--              axisLabel: {-->
+<!--                show: false,-->
+<!--              },-->
+<!--            },-->
+<!--          ],-->
+
+<!--          series: [-->
+<!--            {-->
+<!--              type: "pictorialBar",-->
+<!--              symbol: "rect",-->
+<!--              symbolRepeat: "fixed",-->
+<!--              symbolMargin: "2",-->
+<!--              symbolClip: true,-->
+<!--              symbolSize: [5, 20],-->
+<!--              data: data,-->
+<!--              label: {-->
+<!--                normal: {-->
+<!--                  formatter: "{b}",-->
+<!--                  textStyle: {-->
+<!--                    color: "rgba(160, 172, 188, 1)",-->
+<!--                    fontSize: 13,-->
+<!--                    fontWeight: "bold",-->
+<!--                  },-->
+<!--                  position: "left",-->
+<!--                  distance: 10, // 鍚戝彸鍋忕Щ浣嶇疆-->
+<!--                  show: true,-->
+<!--                },-->
+<!--              },-->
+<!--              itemStyle: {-->
+<!--                color: optionData.color ? optionData.color : "#26a4ff",-->
+<!--              },-->
+<!--              z: 10,-->
+<!--            },-->
+<!--            {-->
+<!--              type: "pictorialBar",-->
+<!--              itemStyle: {-->
+<!--                normal: {-->
+<!--                  opacity: 0.2,-->
+<!--                },-->
+<!--              },-->
+<!--              animationDuration: 0,-->
+<!--              symbolRepeat: "fixed",-->
+<!--              symbolMargin: "2",-->
+<!--              symbol: "rect",-->
+<!--              symbolSize: [5, 20],-->
+<!--              data: totalArr, // value鍊�-->
+<!--              z: 5,-->
+<!--              tooltip: {-->
+<!--                show: false,-->
+<!--              },-->
+<!--            },-->
+<!--          ],-->
+<!--        };-->
+<!--        myChart.setOption(option);-->
+<!--      });-->
+<!--    },-->
+<!--    genData(count) {-->
+<!--      // prettier-ignore-->
+<!--      const nameList = [-->
+<!--        '赵', '钱', '孙', '姚', '强', '贾', '路', '娄', '危'-->
+<!--      ];-->
+<!--      const legendData = [];-->
+<!--      const seriesData = [];-->
+<!--      for (var i = 0; i < count; i++) {-->
+<!--        var name =-->
+<!--          Math.random() > 0.65-->
+<!--            ? makeWord(4, 1) + "·" + makeWord(3, 0)-->
+<!--            : makeWord(2, 1);-->
+<!--        legendData.push(name);-->
+<!--        seriesData.push({-->
+<!--          name: name,-->
+<!--          value: Math.round(Math.random() * 100000),-->
+<!--        });-->
+<!--      }-->
+<!--      return {-->
+<!--        legendData: legendData,-->
+<!--        seriesData: seriesData,-->
+<!--      };-->
+<!--      function makeWord(max, min) {-->
+<!--        const nameLen = Math.ceil(Math.random() * max + min);-->
+<!--        const name = [];-->
+<!--        for (var i = 0; i < nameLen; i++) {-->
+<!--          name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);-->
+<!--        }-->
+<!--        return name.join("");-->
+<!--      }-->
+<!--    },-->
+<!--    goTarget(href) {-->
+<!--      window.open(href, "_blank");-->
+<!--    },-->
+<!--  },-->
+<!--};-->
+<!--</script>-->
+<!--<style lang="scss" scoped></style>-->
+<!--<style scoped lang="scss">-->
+<!--.fl {-->
+<!--  float: left;-->
+<!--}-->
+
+<!--.fr {-->
+<!--  float: right;-->
+<!--}-->
+<!--.app-container {-->
+<!--  .title-left,.title-left2,.title-right,.title-right2{-->
+<!--    cursor: pointer;-->
+<!--  }-->
+<!--}-->
+<!--.home {-->
+<!--  width: 100%;-->
+<!--  height: calc(100vh - 84px);-->
+<!--  background-image: url("../../../assets/images/backgroundImgneng.jpg");-->
+<!--  background-repeat: no-repeat;-->
+<!--  background-size: 100% 100%;-->
+<!--  position: relative;-->
+
+<!--  .electricityWaterBg {-->
+<!--    background-image: url("../../../assets/images/electricityWaterBg.png");-->
+<!--    background-repeat: no-repeat;-->
+<!--    background-size: 100% 100%;-->
+<!--  }-->
+
+<!--  .title-left {-->
+<!--    width: 4rem;-->
+<!--    height: 1.2rem;-->
+<!--    position: absolute;-->
+<!--    left: 14%;-->
+<!--    top: 2.3%;-->
+<!--    color: #ccc;-->
+<!--    text-align: center;-->
+<!--    font-size: 0.9vw;-->
+<!--    background-repeat: no-repeat;-->
+<!--    background-size: 100% 100%;-->
+<!--    background-position: bottom;-->
+<!--    z-index: 1000;-->
+<!--  }-->
+
+<!--  .title-left2 {-->
+<!--    width: 6rem;-->
+<!--    height: 1.2rem;-->
+<!--    position: absolute;-->
+<!--    left: 23.5%;-->
+<!--    top: 2%;-->
+<!--    color: #ccc;-->
+<!--    text-align: center;-->
+<!--    font-size: 0.9vw;-->
+<!--    background-repeat: no-repeat;-->
+<!--    background-size: 100% 100%;-->
+<!--    background-position: bottom;-->
+<!--    background-image: url("../../../assets/images/indexSpanBg.png");-->
+<!--    z-index: 1000;-->
+<!--  }-->
+
+<!--  .title-right {-->
+<!--    width: 6rem;-->
+<!--    height: 1.2rem;-->
+<!--    position: absolute;-->
+<!--    right: 19.3%;-->
+<!--    top: 2%;-->
+<!--    color: white;-->
+<!--    text-align: center;-->
+<!--    font-size: 0.9vw;-->
+<!--    background-repeat: no-repeat;-->
+<!--    background-size: 100% 100%;-->
+<!--    z-index: 1000;-->
+<!--    // background-position: bottom;-->
+<!--  }-->
+
+<!--  .title-right2 {-->
+<!--    width: 6rem;-->
+<!--    height: 1.2rem;-->
+<!--    position: absolute;-->
+<!--    right: 9.5%;-->
+<!--    top: 2%;-->
+<!--    color: #ccc;-->
+<!--    text-align: center;-->
+<!--    font-size: 0.9vw;-->
+<!--    background-repeat: no-repeat;-->
+<!--    background-size: 100% 100%;-->
+<!--    background-position: bottom;-->
+<!--    z-index: 1000;-->
+<!--  }-->
+
+<!--  .data {-->
+<!--    width: 100%;-->
+<!--    height: 100vh;-->
+<!--    position: relative;-->
+
+<!--    .select {-->
+<!--      position: absolute;-->
+<!--      top: 5vh;-->
+
+<!--      select {-->
+<!--        width: 4vw;-->
+<!--        text-align: center;-->
+<!--        border: 1px solid #054ea6;-->
+<!--        background: rgba(#ffffff, $alpha: 0);-->
+<!--        color: #ffffff;-->
+<!--        font-size: 12px;-->
+<!--        margin-right: 10px;-->
+<!--        option {-->
+<!--          color: black;-->
+<!--        }-->
+<!--      }-->
+<!--    }-->
+
+<!--    .SelectTime {-->
+<!--      width: 17vw;-->
+<!--      height: 5vh;-->
+<!--      position: absolute;-->
+<!--      top: 5vh;-->
+<!--      left: 9vw;-->
+<!--      color: white;-->
+<!--      ::v-deep .el-input__inner {-->
+<!--        background-color: transparent !important;-->
+<!--        height: 2.5vh;-->
+<!--        border: 1px solid #054ea6;-->
+<!--      }-->
+
+<!--      ::v-deep .el-range-input {-->
+<!--        background-color: transparent !important;-->
+<!--      }-->
+<!--      ::v-deep .el-range-editor&#45;&#45;medium .el-range__icon,-->
+<!--      .el-range-editor&#45;&#45;medium .el-range__close-icon {-->
+<!--        line-height: 16px;-->
+<!--      }-->
+<!--      ::v-deep .el-range-editor&#45;&#45;medium .el-range-separator {-->
+<!--        line-height: 16px;-->
+<!--        color: #d0d8e7;-->
+<!--      }-->
+<!--    }-->
+
+<!--    .MonthOnMonth {-->
+<!--      width: 23vw;-->
+<!--      height: 22vh;-->
+<!--      position: absolute;-->
+<!--      top: 37vh;-->
+<!--      left: 3vw;-->
+<!--    }-->
+
+<!--    .YearOnYear {-->
+<!--      width: 23vw;-->
+<!--      height: 22vh;-->
+<!--      position: absolute;-->
+<!--      top: 37vh;-->
+<!--      left: 29.5vw;-->
+<!--    }-->
+
+<!--    .DosageSwitching {-->
+<!--      width: 6vw;-->
+<!--      height: 3vh;-->
+<!--      position: absolute;-->
+<!--      top: 8.2vh;-->
+<!--      left: 47vw;-->
+<!--      color: white;-->
+<!--      z-index: 100;-->
+
+<!--      div {-->
+<!--        width: 50%;-->
+<!--        float: left;-->
+<!--        text-align: center;-->
+<!--        font-size: 10px;-->
+<!--        line-height: 3vh;-->
+<!--      }-->
+<!--    }-->
+
+<!--    .BusinessSwitching {-->
+<!--      width: 9vw;-->
+<!--      height: 3vh;-->
+<!--      position: absolute;-->
+<!--      top: 8.2vh;-->
+<!--      right: 0.5vw;-->
+<!--      color: white;-->
+<!--      z-index: 100;-->
+
+<!--      div {-->
+<!--        width: 33%;-->
+<!--        float: left;-->
+<!--        text-align: center;-->
+<!--        font-size: 10px;-->
+<!--        line-height: 3vh;-->
+<!--      }-->
+<!--    }-->
+
+<!--    .LineLossBusinessSwitching {-->
+<!--      width: 9vw;-->
+<!--      height: 3vh;-->
+<!--      position: absolute;-->
+<!--      top: 47.8vh;-->
+<!--      right: 0.5vw;-->
+<!--      color: white;-->
+<!--      z-index: 100;-->
+<!--      div {-->
+<!--        width: 33%;-->
+<!--        float: left;-->
+<!--        text-align: center;-->
+<!--        font-size: 10px;-->
+<!--        line-height: 3vh;-->
+<!--      }-->
+<!--    }-->
+
+<!--    .Description {-->
+<!--      width: 5vw;-->
+<!--      height: 15vh;-->
+<!--      position: absolute;-->
+<!--      top: 13vh;-->
+<!--      left: 4vw;-->
+<!--      color: white;-->
+<!--      text-align: center;-->
+<!--      font-size: 6px;-->
+
+<!--      .Description-title {-->
+<!--        width: 100%;-->
+<!--        height: 33%;-->
+<!--        position: absolute;-->
+<!--        text-align: center;-->
+<!--        top: 0;-->
+<!--        left: 0;-->
+<!--      }-->
+
+<!--      .Description-footer {-->
+<!--        width: 100%;-->
+<!--        height: 33%;-->
+<!--        position: absolute;-->
+<!--        text-align: center;-->
+<!--        top: 7.8vh;-->
+<!--        left: 0.4vw;-->
+<!--        font-size: 22px;-->
+<!--        color: #4db3fa;-->
+<!--      }-->
+
+<!--      .Description-kwh {-->
+<!--        width: 100%;-->
+<!--        height: 34%;-->
+<!--        position: absolute;-->
+<!--        text-align: center;-->
+<!--        top: 11vh;-->
+<!--        left: 0;-->
+<!--      }-->
+<!--    }-->
+
+<!--    .LineLoss {-->
+<!--      width: 5vw;-->
+<!--      height: 15vh;-->
+<!--      position: absolute;-->
+<!--      bottom: 22vh;-->
+<!--      left: 4vw;-->
+<!--      color: white;-->
+<!--      text-align: center;-->
+<!--      font-size: 6px;-->
+
+<!--      .LineLoss-footer {-->
+<!--        width: 100%;-->
+<!--        height: 33%;-->
+<!--        position: absolute;-->
+<!--        text-align: center;-->
+<!--        top: 8.8vh;-->
+<!--        left: 0.4vw;-->
+<!--        font-size: 22px;-->
+<!--        color: #4db3fa;-->
+<!--      }-->
+
+<!--      .LineLoss-kwh {-->
+<!--        width: 100%;-->
+<!--        height: 34%;-->
+<!--        position: absolute;-->
+<!--        text-align: center;-->
+<!--        top: 12vh;-->
+<!--        left: 0;-->
+<!--      }-->
+<!--    }-->
+
+<!--    .TodyChart {-->
+<!--      width: 50%;-->
+<!--      height: 23%;-->
+<!--      position: absolute;-->
+<!--      top: 124px;-->
+<!--      left: 21rem;-->
+<!--    }-->
+
+<!--    .RingGraph {-->
+<!--      width: 40vw;-->
+<!--      height: 25vh;-->
+<!--      position: absolute;-->
+<!--      top: 64vh;-->
+<!--      left: 21rem;-->
+<!--    }-->
+
+<!--    .MonthChart {-->
+<!--      width: 50%;-->
+<!--      height: 25%;-->
+<!--      position: absolute;-->
+<!--      top: 227px;-->
+<!--      left: 13rem;-->
+<!--    }-->
+
+<!--    .EnergyConsumption {-->
+<!--      width: 32%;-->
+<!--      height: 35%;-->
+<!--      position: absolute;-->
+<!--      top: 86px;-->
+<!--      right: 0.4rem;-->
+<!--    }-->
+
+<!--    .LineLossRanking {-->
+<!--      width: 32%;-->
+<!--      height: 34%;-->
+<!--      position: absolute;-->
+<!--      bottom: 17vh;-->
+<!--      right: 0.4rem;-->
+<!--    }-->
+<!--  }-->
+<!--}-->
+<!--.dateRight {-->
+<!--  position: absolute;-->
+<!--  top: 8.3%;-->
+<!--  right: 2%;-->
+<!--  transform: translateY(-50%);-->
+<!--  color: #fff;-->
+<!--  // font-size: 18px;-->
+<!--}-->
+<!--</style>-->
diff --git a/src/views/energy/LeadershipView/LeadershipViewChearts/index2.vue b/src/views/energy/LeadershipView/LeadershipViewChearts/index2.vue
new file mode 100644
index 00000000..fe67f61c
--- /dev/null
+++ b/src/views/energy/LeadershipView/LeadershipViewChearts/index2.vue
@@ -0,0 +1,749 @@
+<!--<template>-->
+<!--  <div class="wrap">-->
+<!--    <div id="wrapbg" class="bg">-->
+<!--      <div class="dateRight" id="dateRight"></div>-->
+<!--      <div class="title" id="title">-->
+<!--        <div class="title1" id="title1">当月电量走势图</div>-->
+<!--        <div class="title2" id="title2">合计电量</div>-->
+<!--      </div>-->
+<!--      <div class="selectOneButton"></div>-->
+<!--      <select class="selectOne" id="selectOne" onchange="selectOneChange()">-->
+<!--        <option label="建筑" value="0"></option>-->
+<!--        <option label="业态" value="1"></option>-->
+<!--        <option label="分项" value="2"></option>-->
+<!--      </select>-->
+
+<!--      <div class="selectTwoButton"></div>-->
+<!--      <select class="selectTwo" id="selectTwo"></select>-->
+
+<!--      <div class="dataTime" id="dataTime">-->
+<!--        <div class="timeOne" id="timeOne">2023-01-01</div>-->
+<!--        <div class="span">至</div>-->
+<!--        <div class="timeTwo" id="timeTwo">2023-01-01</div>-->
+<!--      </div>-->
+
+<!--      <div class="login" id="login" @click="gopage('/report/board/index')">-->
+<!--        进入后台-->
+<!--      </div>-->
+<!--      <div class="topRight" id="topRight">-->
+<!--        <div class="toIndex" @click="gopage('/report/index')">首页</div>-->
+<!--        <div class="toEnergyPreview"  @click="gopage('/report/LeadershipView/LeadershipViewChearts')">能耗预览</div>-->
+<!--        <div class="toState" @click="gopage('/report/LeadershipView/ApparentState')">表具状态</div>-->
+<!--      </div>-->
+<!--      <div class="totalElectricWaterQuantity" id="totalElectricWaterQuantity">-->
+<!--        0-->
+<!--      </div>-->
+<!--      <div class="totalLineLoss" id="totalLineLoss">0</div>-->
+<!--      <div class="kwh">kwh</div>-->
+<!--      <div class="kwh" style="top: 85.7%">kwh</div>-->
+<!--      <div class="previewElectricWaterButton" id="previewElectricWaterButton">-->
+<!--        <div class="electricButton">电量</div>-->
+<!--        <div class="waterButton">水量</div>-->
+<!--      </div>-->
+<!--      <div class="rankingElectricWaterButton" id="rankingElectricWaterButton">-->
+<!--        <div class="electricButton">电量</div>-->
+<!--        <div class="waterButton">水量</div>-->
+<!--      </div>-->
+<!--      <div-->
+<!--        class="lineLossPreviewElectricWaterButton"-->
+<!--        id="lineLossPreviewElectricWaterButton"-->
+<!--      >-->
+<!--        <div class="electricButton">电量</div>-->
+<!--        <div class="waterButton">水量</div>-->
+<!--      </div>-->
+
+<!--      <div class="trendChart" id="trendChart"></div>-->
+<!--      <div class="linkRelativeRatio" id="linkRelativeRatio"></div>-->
+<!--      <div class="onYearOnYearBasis" id="onYearOnYearBasis"></div>-->
+<!--      <div class="lineLoss" id="lineLoss"></div>-->
+<!--      <div class="EnergyConsumptionRanking" id="EnergyConsumptionRanking"></div>-->
+<!--      <div class="LineLossRanking" id="LineLossRanking"></div>-->
+<!--    </div>-->
+<!--  </div>-->
+<!--</template>-->
+
+<!--<script>-->
+<!--import {-->
+<!--  selectTypeSubset,-->
+<!--  previewPolyline,-->
+<!--} from "@/api/kanban/LeadershipViewChearts";-->
+<!--import { resizeFunc, throttle } from "@/utils/resize.js";-->
+<!--export default {-->
+<!--  name: "Index",-->
+<!--  data() {-->
+<!--    return {-->
+<!--      version: "3.6.2",-->
+<!--      value1: "",-->
+<!--      type: "0",-->
+<!--      RegionList: [],-->
+<!--      dian1: true,-->
+<!--      shui1: false,-->
+<!--      QueryDataObject: {},-->
+<!--      energyType1: "2",-->
+<!--    };-->
+<!--  },-->
+<!--  mounted() {-->
+<!--    resizeFunc(1905, 1080, "wrapbg")();-->
+<!--    // this.selectTypeSubset(this.type);-->
+<!--    // this.QueryDataObject.type = "0";-->
+<!--    // this.initTodyChartCharts(2);-->
+<!--    // this.initEnergyConsumptionCharts();-->
+<!--    // this.initMonthOnMonthCharts();-->
+<!--    // this.initYearOnYearCharts();-->
+<!--    // this.initRingGraphCharts();-->
+<!--    // this.initLineLossRankingCharts();-->
+<!--  },-->
+<!--  methods: {-->
+<!--    gopage(path) {-->
+<!--      this.$router.push({ path: path });-->
+<!--    },-->
+<!--    //左侧第一个选择类型下拉框 回调函数-->
+<!--    SeleteType(e) {-->
+<!--      this.type = e.target.value;-->
+<!--      this.QueryDataObject.type = e.target.value;-->
+<!--      this.selectTypeSubset(this.type);-->
+<!--    },-->
+<!--    //左侧第二个选择区域下拉框 获取数据-->
+<!--    selectTypeSubset(type) {-->
+<!--      selectTypeSubset(type).then((res) => {-->
+<!--        this.RegionList = res.data;-->
+<!--        console.log("RegionList", this.RegionList);-->
+<!--        this.QueryDataObject.relationId = this.RegionList[0].relationId;-->
+<!--        console.log("QueryDataObject", this.QueryDataObject);-->
+<!--      });-->
+<!--    },-->
+<!--    //左侧第二个选择区域下拉框 回调函数-->
+<!--    SeleteRegion(e) {-->
+<!--      this.QueryDataObject.relationId = e.target.value;-->
+<!--      console.log("QueryDataObject", this.QueryDataObject);-->
+<!--    },-->
+<!--    //左上角选择时间之后 回调函数-->
+<!--    SeleteDate(e) {-->
+<!--      this.QueryDataObject.beginCollectTime = e[0].slice(0, 10);-->
+<!--      this.QueryDataObject.endCollectTime = e[1].slice(0, 10);-->
+<!--      console.log("QueryDataObject", this.QueryDataObject);-->
+<!--    },-->
+<!--    ClickDian1() {-->
+<!--      this.dian1 = !this.dian1;-->
+<!--      this.shui1 = !this.shui1;-->
+<!--      this.energyType1 = "3";-->
+<!--    },-->
+<!--    initTodyChartCharts(energyType) {-->
+<!--      let arr = {-->
+<!--        type: this.QueryDataObject.type,-->
+<!--        relationId: this.QueryDataObject.relationId,-->
+<!--        beginCollectTime: this.QueryDataObject.beginCollectTime,-->
+<!--        endCollectTime: this.QueryDataObject.endCollectTime,-->
+<!--        energyType,-->
+<!--      };-->
+<!--      console.log("arr", arr);-->
+<!--      previewPolyline(arr).then((res) => {-->
+<!--        console.log("res", res);-->
+<!--      });-->
+<!--      let myChart = this.$echarts.init(this.$refs.TodyChart);-->
+<!--      myChart.setOption({-->
+<!--        legend: {-->
+<!--          lineStyle: {-->
+<!--            color: "#808080",-->
+<!--          },-->
+<!--        },-->
+<!--        color: "white",-->
+<!--        textStyle: {-->
+<!--          color: "white",-->
+<!--        },-->
+<!--        title: {-->
+<!--          show: true,-->
+<!--          left: "center",-->
+<!--          top: "14px",-->
+<!--          text: "当月电量走势图",-->
+<!--          textStyle: {-->
+<!--            color: "white",-->
+<!--            fontSize: "12",-->
+<!--          },-->
+<!--        },-->
+<!--        xAxis: {-->
+<!--          type: "category",-->
+<!--          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],-->
+<!--        },-->
+<!--        yAxis: {-->
+<!--          type: "value",-->
+<!--        },-->
+<!--        series: [-->
+<!--          {-->
+<!--            data: [820, 932, 901, 934, 1290, 1330, 1320],-->
+<!--            type: "line",-->
+<!--            smooth: true,-->
+<!--          },-->
+<!--        ],-->
+<!--      });-->
+<!--    },-->
+<!--    initRingGraphCharts() {-->
+<!--      let myChart = this.$echarts.init(this.$refs.RingGraph);-->
+<!--      myChart.setOption({-->
+<!--        legend: {-->
+<!--          lineStyle: {-->
+<!--            color: "#808080",-->
+<!--          },-->
+<!--        },-->
+<!--        color: "white",-->
+<!--        textStyle: {-->
+<!--          color: "white",-->
+<!--        },-->
+<!--        title: {-->
+<!--          show: true,-->
+<!--          left: "center",-->
+<!--          top: "14px",-->
+<!--          textStyle: {-->
+<!--            color: "white",-->
+<!--            fontSize: "12",-->
+<!--          },-->
+<!--        },-->
+<!--        xAxis: {-->
+<!--          type: "category",-->
+<!--          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],-->
+<!--        },-->
+<!--        yAxis: {-->
+<!--          type: "value",-->
+<!--        },-->
+<!--        series: [-->
+<!--          {-->
+<!--            data: [20, 60, 90, 130, 120, 110, 100],-->
+<!--            type: "line",-->
+<!--            smooth: true,-->
+<!--          },-->
+<!--        ],-->
+<!--      });-->
+<!--    },-->
+<!--    initMonthOnMonthCharts() {-->
+<!--      let myChart = this.$echarts.init(this.$refs.MonthOnMonth);-->
+<!--      myChart.setOption({-->
+<!--        textStyle: {-->
+<!--          color: "white",-->
+<!--        },-->
+<!--        tooltip: {-->
+<!--          trigger: "axis",-->
+<!--        },-->
+<!--        legend: {-->
+<!--          data: ["今日", "昨日"],-->
+<!--          textStyle: {-->
+<!--            color: "white",-->
+<!--          },-->
+<!--        },-->
+<!--        grid: {-->
+<!--          left: "3%",-->
+<!--          right: "4%",-->
+<!--          bottom: "3%",-->
+<!--          containLabel: true,-->
+<!--        },-->
+<!--        xAxis: {-->
+<!--          type: "category",-->
+<!--          boundaryGap: false,-->
+<!--          data: ["Mon", "Tue", "Wed"],-->
+<!--        },-->
+<!--        yAxis: {-->
+<!--          type: "value",-->
+<!--        },-->
+<!--        series: [-->
+<!--          {-->
+<!--            name: "今日",-->
+<!--            type: "line",-->
+<!--            stack: "Total",-->
+<!--            data: [120, 132, 101, 134, 90, 230, 210],-->
+<!--          },-->
+<!--          {-->
+<!--            name: "昨日",-->
+<!--            type: "line",-->
+<!--            stack: "Total",-->
+<!--            data: [220, 182, 191, 234, 290, 330, 310],-->
+<!--          },-->
+<!--        ],-->
+<!--      });-->
+<!--    },-->
+<!--    initYearOnYearCharts() {-->
+<!--      let myChart = this.$echarts.init(this.$refs.YearOnYear);-->
+<!--      myChart.setOption({-->
+<!--        textStyle: {-->
+<!--          color: "white",-->
+<!--        },-->
+<!--        tooltip: {-->
+<!--          trigger: "axis",-->
+<!--        },-->
+<!--        legend: {-->
+<!--          data: ["今年", "去年"],-->
+<!--          textStyle: {-->
+<!--            color: "white",-->
+<!--          },-->
+<!--        },-->
+<!--        grid: {-->
+<!--          left: "3%",-->
+<!--          right: "4%",-->
+<!--          bottom: "3%",-->
+<!--          containLabel: true,-->
+<!--        },-->
+<!--        xAxis: {-->
+<!--          type: "category",-->
+<!--          boundaryGap: false,-->
+<!--          data: ["Mon", "Tue", "Wed"],-->
+<!--        },-->
+<!--        yAxis: {-->
+<!--          type: "value",-->
+<!--        },-->
+<!--        series: [-->
+<!--          {-->
+<!--            name: "今年",-->
+<!--            type: "line",-->
+<!--            stack: "Total",-->
+<!--            data: [120, 132, 101, 134, 90, 230, 210],-->
+<!--          },-->
+<!--          {-->
+<!--            name: "去年",-->
+<!--            type: "line",-->
+<!--            stack: "Total",-->
+<!--            data: [220, 182, 191, 234, 290, 330, 310],-->
+<!--          },-->
+<!--        ],-->
+<!--      });-->
+<!--    },-->
+<!--    initEnergyConsumptionCharts() {-->
+<!--      let myChart = this.$echarts.init(this.$refs.EnergyConsumption);-->
+<!--      myChart.setOption({-->
+<!--        legend: {-->
+<!--          lineStyle: {-->
+<!--            color: "#808080",-->
+<!--          },-->
+<!--        },-->
+<!--        color: "white",-->
+<!--        textStyle: {-->
+<!--          color: "white",-->
+<!--        },-->
+<!--        title: {-->
+<!--          show: true,-->
+<!--          left: "center",-->
+<!--          top: "14px",-->
+<!--          textStyle: {-->
+<!--            color: "white",-->
+<!--            fontSize: "12",-->
+<!--          },-->
+<!--        },-->
+<!--        xAxis: {-->
+<!--          type: "value",-->
+<!--        },-->
+<!--        yAxis: {-->
+<!--          type: "category",-->
+<!--          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],-->
+<!--        },-->
+<!--        series: [-->
+<!--          {-->
+<!--            data: [120, 200, 150, 80, 70, 110, 130],-->
+<!--            type: "bar",-->
+<!--            itemStyle: {-->
+<!--              color: "blue",-->
+<!--            },-->
+<!--          },-->
+<!--        ],-->
+<!--      });-->
+<!--    },-->
+<!--    initLineLossRankingCharts() {-->
+<!--      let myChart = this.$echarts.init(this.$refs.LineLossRanking);-->
+<!--      myChart.setOption({-->
+<!--        legend: {-->
+<!--          lineStyle: {-->
+<!--            color: "#808080",-->
+<!--          },-->
+<!--        },-->
+<!--        color: "white",-->
+<!--        textStyle: {-->
+<!--          color: "white",-->
+<!--        },-->
+<!--        title: {-->
+<!--          show: true,-->
+<!--          left: "center",-->
+<!--          top: "14px",-->
+<!--          textStyle: {-->
+<!--            color: "white",-->
+<!--            fontSize: "12",-->
+<!--          },-->
+<!--        },-->
+<!--        xAxis: {-->
+<!--          type: "value",-->
+<!--        },-->
+<!--        yAxis: {-->
+<!--          type: "category",-->
+<!--          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],-->
+<!--        },-->
+<!--        series: [-->
+<!--          {-->
+<!--            data: [120, 200, 150, 80, 70, 110, 130],-->
+<!--            type: "bar",-->
+<!--            itemStyle: {-->
+<!--              color: "blue",-->
+<!--            },-->
+<!--          },-->
+<!--        ],-->
+<!--      });-->
+<!--    },-->
+<!--    genData(count) {-->
+<!--      // prettier-ignore-->
+<!--      const nameList = [-->
+<!--        '赵', '钱', '孙', '姚', '强', '贾', '路', '娄', '危'-->
+<!--      ];-->
+<!--      const legendData = [];-->
+<!--      const seriesData = [];-->
+<!--      for (var i = 0; i < count; i++) {-->
+<!--        var name =-->
+<!--          Math.random() > 0.65-->
+<!--            ? makeWord(4, 1) + "·" + makeWord(3, 0)-->
+<!--            : makeWord(2, 1);-->
+<!--        legendData.push(name);-->
+<!--        seriesData.push({-->
+<!--          name: name,-->
+<!--          value: Math.round(Math.random() * 100000),-->
+<!--        });-->
+<!--      }-->
+<!--      return {-->
+<!--        legendData: legendData,-->
+<!--        seriesData: seriesData,-->
+<!--      };-->
+<!--      function makeWord(max, min) {-->
+<!--        const nameLen = Math.ceil(Math.random() * max + min);-->
+<!--        const name = [];-->
+<!--        for (var i = 0; i < nameLen; i++) {-->
+<!--          name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);-->
+<!--        }-->
+<!--        return name.join("");-->
+<!--      }-->
+<!--    },-->
+<!--    goTarget(href) {-->
+<!--      window.open(href, "_blank");-->
+<!--    },-->
+<!--  },-->
+<!--};-->
+<!--</script>-->
+
+<!--<style scoped lang="scss">-->
+<!--.wrap {-->
+<!--  width: 100vw;-->
+<!--  height: 100vh;-->
+<!--  background-color: rgb(12, 21, 78);-->
+<!--}-->
+<!--.bg {-->
+<!--  width: 1920px;-->
+<!--  height: 1080px;-->
+<!--  background-image: url("~@/img/energyPreview/backgroundImg.jpg");-->
+<!--  background-repeat: no-repeat;-->
+<!--  background-size: auto auto;-->
+<!--  position: absolute;-->
+<!--  overflow-y: hidden;-->
+<!--}-->
+
+<!--.trendChart {-->
+<!--  position: absolute;-->
+<!--  width: 46%;-->
+<!--  height: 15%;-->
+<!--  top: 21%;-->
+<!--  left: 17%;-->
+<!--}-->
+
+<!--.linkRelativeRatio {-->
+<!--  position: absolute;-->
+<!--  width: 29%;-->
+<!--  height: 25%;-->
+<!--  top: 44%;-->
+<!--  left: 3%;-->
+<!--}-->
+
+<!--.onYearOnYearBasis {-->
+<!--  position: absolute;-->
+<!--  width: 29%;-->
+<!--  height: 25%;-->
+<!--  top: 44%;-->
+<!--  left: 34%;-->
+<!--}-->
+
+<!--.lineLoss {-->
+<!--  position: absolute;-->
+<!--  width: 46%;-->
+<!--  height: 17%;-->
+<!--  top: 76%;-->
+<!--  left: 17%;-->
+<!--}-->
+
+<!--.EnergyConsumptionRanking {-->
+<!--  position: absolute;-->
+<!--  width: 31%;-->
+<!--  height: 35%;-->
+<!--  top: 16%;-->
+<!--  left: 67%;-->
+<!--}-->
+
+<!--.LineLossRanking {-->
+<!--  position: absolute;-->
+<!--  width: 31%;-->
+<!--  height: 35%;-->
+<!--  top: 59%;-->
+<!--  left: 67%;-->
+<!--}-->
+
+<!--.toIndex {-->
+<!--  position: absolute;-->
+<!--  transform: translate(-50%, -50%);-->
+<!--  top: 3%;-->
+<!--  right: 80%;-->
+<!--  font-size: 1vw;-->
+<!--  cursor: pointer;-->
+<!--  padding: 0 20px;-->
+<!--  color: #ccc;-->
+<!--}-->
+
+<!--.toEnergyPreview {-->
+<!--  position: absolute;-->
+<!--  transform: translate(-50%, -50%);-->
+<!--  top: 3%;-->
+<!--  right: 68%;-->
+<!--  cursor: pointer;-->
+<!--  font-size: 1vw;-->
+<!--  color: #fff;-->
+<!--  padding: 0 20px;-->
+<!--  background-image: url("~@/img/common/indexSpanBg.png");-->
+<!--  background-size: 100% 50%;-->
+<!--  background-repeat: no-repeat;-->
+<!--  background-position: bottom;-->
+<!--}-->
+
+<!--.toState {-->
+<!--  position: absolute;-->
+<!--  transform: translate(-50%, -50%);-->
+<!--  top: 3%;-->
+<!--  right: 16%;-->
+<!--  font-size: 1vw;-->
+<!--  padding: 0 20px;-->
+<!--  color: #ccc;-->
+<!--  background-repeat: no-repeat;-->
+<!--  background-position: bottom;-->
+<!--  cursor: pointer;-->
+<!--  background-size: 100% 50%;-->
+<!--}-->
+
+<!--.totalElectricWaterQuantity {-->
+<!--  position: absolute;-->
+<!--  top: 26.8%;-->
+<!--  left: 8.7%;-->
+<!--  font-size: 28px;-->
+<!--  color: #4db3fa;-->
+<!--  font-weight: 600;-->
+<!--  transform: translate(-50%, -50%);-->
+<!--}-->
+
+<!--.totalLineLoss {-->
+<!--  position: absolute;-->
+<!--  top: 82.8%;-->
+<!--  left: 8.7%;-->
+<!--  font-size: 28px;-->
+<!--  color: #4db3fa;-->
+<!--  font-weight: 600;-->
+<!--  transform: translate(-50%, -50%);-->
+<!--}-->
+
+<!--.kwh {-->
+<!--  position: absolute;-->
+<!--  top: 29.7%;-->
+<!--  left: 8.7%;-->
+<!--  font-size: 1vw;-->
+<!--  transform: translate(-50%, -50%);-->
+<!--  color: #c7c3c4;-->
+<!--}-->
+
+<!--.previewElectricWaterButton .electricButton {-->
+<!--  position: absolute;-->
+<!--  top: 11.9%;-->
+<!--  left: 54.8%;-->
+<!--  font-size: 0.9vw;-->
+<!--  color: #fff;-->
+<!--  cursor: pointer;-->
+<!--  padding: 0 18px;-->
+<!--  background-image: url("~@/img/common/electricityWaterBg.png");-->
+<!--  background-size: 100% 100%;-->
+<!--  background-repeat: no-repeat;-->
+<!--}-->
+
+<!--.previewElectricWaterButton .waterButton {-->
+<!--  position: absolute;-->
+<!--  top: 11.9%;-->
+<!--  left: 58.8%;-->
+<!--  font-size: 0.9vw;-->
+<!--  color: #ccc;-->
+<!--  cursor: pointer;-->
+<!--  padding: 0 18px;-->
+<!--  background-size: 100% 100%;-->
+<!--  background-repeat: no-repeat;-->
+<!--}-->
+
+<!--.rankingElectricWaterButton .electricButton {-->
+<!--  position: absolute;-->
+<!--  top: 11.9%;-->
+<!--  left: 88.2%;-->
+<!--  font-size: 0.9vw;-->
+<!--  color: #fff;-->
+<!--  padding: 0 18px;-->
+<!--  background-image: url("~@/img/common/electricityWaterBg.png");-->
+<!--  background-size: 100% 100%;-->
+<!--  cursor: pointer;-->
+<!--  background-repeat: no-repeat;-->
+<!--}-->
+
+<!--.rankingElectricWaterButton .waterButton {-->
+<!--  position: absolute;-->
+<!--  top: 11.9%;-->
+<!--  left: 92.2%;-->
+<!--  font-size: 0.9vw;-->
+<!--  color: #ccc;-->
+<!--  padding: 0 18px;-->
+<!--  background-size: 100% 100%;-->
+<!--  cursor: pointer;-->
+<!--  background-repeat: no-repeat;-->
+<!--}-->
+
+<!--.lineLossPreviewElectricWaterButton .electricButton {-->
+<!--  position: absolute;-->
+<!--  top: 55.7%;-->
+<!--  left: 88.2%;-->
+<!--  font-size: 0.9vw;-->
+<!--  color: #fff;-->
+<!--  padding: 0 18px;-->
+<!--  background-image: url("~@/img/common/electricityWaterBg.png");-->
+<!--  background-size: 100% 100%;-->
+<!--  background-repeat: no-repeat;-->
+<!--  cursor: pointer;-->
+<!--}-->
+
+<!--.lineLossPreviewElectricWaterButton .waterButton {-->
+<!--  position: absolute;-->
+<!--  top: 55.7%;-->
+<!--  left: 92.2%;-->
+<!--  font-size: 0.9vw;-->
+<!--  cursor: pointer;-->
+<!--  color: #ccc;-->
+<!--  padding: 0 18px;-->
+<!--  background-size: 100% 100%;-->
+<!--  background-repeat: no-repeat;-->
+<!--}-->
+
+<!--.selectOne option,-->
+<!--.selectTwo option {-->
+<!--  color: #000;-->
+<!--}-->
+
+<!--.selectOne,-->
+<!--.selectTwo {-->
+<!--  appearance: none;-->
+<!--  -moz-appearance: none;-->
+<!--  -webkit-appearance: none;-->
+<!--  color: #fff;-->
+<!--  border: 0;-->
+<!--  position: absolute;-->
+<!--  width: 5.4%;-->
+<!--  height: 3%;-->
+<!--  top: 7.2%;-->
+<!--  padding-left: 1.52%;-->
+<!--  background: rgba(0, 0, 0, 0);-->
+<!--}-->
+
+<!--.selectOne {-->
+<!--  left: 1.5%;-->
+<!--}-->
+
+<!--.selectTwo {-->
+<!--  left: 7%;-->
+<!--}-->
+
+<!--.selectOneButton,-->
+<!--.selectTwoButton {-->
+<!--  position: absolute;-->
+<!--  width: 5.4%;-->
+<!--  height: 3%;-->
+<!--  top: 7.2%;-->
+<!--  border: 1px solid #054ea6;-->
+<!--  background: url("~@/img/common/selectButton.png") no-repeat scroll 90% center-->
+<!--    transparent;-->
+<!--}-->
+
+<!--.selectOneButton {-->
+<!--  left: 1.5%;-->
+<!--}-->
+
+<!--.selectTwoButton {-->
+<!--  left: 7%;-->
+<!--}-->
+
+<!--.dataTime {-->
+<!--  position: absolute;-->
+<!--  width: 13%;-->
+<!--  height: 3%;-->
+<!--  top: 7.2%;-->
+<!--  left: 13%;-->
+<!--  line-height: 30px;-->
+<!--  font-size: 16px;-->
+<!--  border: 1px solid #054ea6;-->
+<!--  background: url("~@/img/common/time.png") no-repeat scroll 5% center-->
+<!--    transparent;-->
+<!--  padding-left: 33px;-->
+<!--  min-width: 185px;-->
+<!--}-->
+
+<!--.timeOne,-->
+<!--.timeTwo {-->
+<!--  color: #fff;-->
+<!--  display: inline-block;-->
+<!--  font-size: 16px;-->
+<!--  height: 30px;-->
+<!--  line-height: 30px;-->
+<!--}-->
+
+<!--.span {-->
+<!--  color: #fff;-->
+<!--  display: inline-block;-->
+<!--  line-height: 3vh;-->
+<!--  padding: 0 4px;-->
+<!--}-->
+
+<!--.dateRight {-->
+<!--  position: absolute;-->
+<!--  top: 8.8%;-->
+<!--  right: 2%;-->
+<!--  transform: translateY(-50%);-->
+<!--  color: #fff;-->
+<!--}-->
+
+<!--.title1 {-->
+<!--  transform: translate(-50%, -50%);-->
+<!--  position: absolute;-->
+<!--  top: 19.1%;-->
+<!--  left: 41%;-->
+<!--  color: #fff;-->
+<!--  font-size: 0.8vw;-->
+<!--}-->
+
+<!--.title2 {-->
+<!--  transform: translate(-50%, -50%);-->
+<!--  position: absolute;-->
+<!--  top: 19.1%;-->
+<!--  left: 8.6%;-->
+<!--  color: #fff;-->
+<!--  font-size: 0.8vw;-->
+<!--}-->
+
+<!--.login {-->
+<!--  position: absolute;-->
+<!--  transform: translate(-50%, -50%);-->
+<!--  top: 3%;-->
+<!--  right: 6%;-->
+<!--  text-align: center;-->
+<!--  font-size: 1vw;-->
+<!--  padding: 0 20px;-->
+<!--  background-repeat: no-repeat;-->
+<!--  background-position: bottom;-->
+<!--  background-size: 100% 50%;-->
+<!--  color: #ccc;-->
+<!--  cursor: pointer;-->
+<!--}-->
+<!--</style>-->