update - 能源表具看板

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
   })
-}
+}

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>

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

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>

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>-->

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>-->