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