You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1260 lines
38 KiB
Vue
1260 lines
38 KiB
Vue
<!--<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-->
|
|
<!-- <!– {{ itemscopy.yearEnergy }}kwh–>-->
|
|
<!-- </div>-->
|
|
<!-- <div v-if="energyType == 3" class="unit">-->
|
|
<!-- {{ i.value }}m³-->
|
|
<!-- <!– {{ itemscopy.yearEnergy }}m³–>-->
|
|
<!-- </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="---"-->
|
|
<!-- 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--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>-->
|