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.
750 lines
22 KiB
Vue
750 lines
22 KiB
Vue
<!--<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>-->
|