<template>
<div class="publicPage layoutFlex layoutFlexRow fp">
<!-- <div class="layoutFlexRowItemAuto layoutFlex layoutFlexColumn">
<div class="layoutFlexColumnItemAuto relt">
<reportChart-item class="fpw abs z3" :chartName="chartName" chartsType="1" :index="1" :xAxisData="xAxisDatac1" :barOptionSeries="barOptionSeriesc1" :yAxisName="'近10日充电量趋势'" :colors="colors[0]" :gridData="{top: 30,left:20,right:30,bottom:0}" :legendShow="false"></reportChart-item>
</div>
<div class="layoutFlexColumnItemAuto relt hasMarginTop">
<reportChart-item class="fpw abs z3" :chartName="''" chartsType="2" :index="2" :xAxisData="xAxisDatac2" :barOptionSeries="barOptionSeriesc2" :yAxisName="'当日充电功率曲线'" :colors="colors[0]" :gridData="{top: 30,left:20,right:30,bottom:0}" :legendShow="false"></reportChart-item>
</div>
</div>
<el-dialog class="publicModal" :title="dialogTitle" :visible.sync="showDialogVisible" :close-on-click-modal="false" @closed="dialogCancel">
<span>121121313</span>
</el-dialog> -->
<div class="contentPage layoutFlex layoutFlexRow fph">
<div class="contentLeft layoutFlexRowItem">left
</div>
<div class="contentCenter layoutFlexRowItemAuto layoutFlex layoutFlexColumn layoutFlexSpaceAround">
<div class="centerTop layoutFlexColumnItem"></div>
<div class="centerBot layoutFlexColumnItemAuto"></div>
</div>
<div class="contentRight layoutFlexRowItem">right</div>
</div>
</div>
</template>
<script>
import ReportChart from "../components/ReportChart";
import * as echarts from "echarts";
import dataList from "../../static/data.json";
export default {
name: "home",
data() {
return {
// timer: 0,
// dialogTitle: "弹框1", //弹框标题
// showDialogVisible: false, //弹框可见
// colors: [["#01ffdb"], ["#93ff76"], ["#2769fa"], ["#f88b02"]],
// // =-=-===-==-图表部分数据-=-=-==-=-=-=---=-==-=-=-==--=
// chartsType: "2", //图表类型 1--bar 2--line 3--pie
// chartName: "", //图表名称
// yAxisName: "", //Y轴显示的label
// xAxisDatac1: [], // 充电曲线
// barOptionSeriesc1: [], // 充电曲线
// xAxisDatac2: [], // 充电曲线
// barOptionSeriesc2: [], // 充电曲线
};
},
computed: {},
watch: {},
created: function () {},
mounted: function () {
// this.getOne();
// this.getTwo();
//this.getChargeAllDataMonth();
//this.timer = setInterval(() => {
// // 获取充电部分数据
// this.getChargeAllDataMonth();
// }, 30000);
},
methods: {
// 获取充电统计 电费服务费和充电次数曲线
// getOne() {
// var _this = this;
// _this.xAxisDatac1 = [];
// _this.barOptionSeriesc1 = [];
// _this.xAxisDatac1 = dataList.data.xAxisData.slice(-10).map((item, index, arr) => String(item).substr(-5));
// _this.xTAxisData = _this.xAxisDatac1; // mark
// _this.barOptionSeriesc1.push({
// name: "电量",
// data: dataList.data.electricity.ALL.slice(-10),
// });
// },
// getTwo() {
// var _this = this;
// _this.xAxisDatac2 = [];
// _this.barOptionSeriesc2 = [];
// _this.xAxisDatac2= dataList.data.xAxisData.slice(-10).map((item, index, arr) => String(item).substr(-5));
// _this.xTAxisData = _this.xAxisDatac2; // mark
// _this.barOptionSeriesc2.push({
// name: "电量",
// data: dataList.data.electricity.ALL.slice(-10),
// });
// },
// // 获取充电统计 电费服务费和充电次数曲线
// getChargeAllDataMonth() {
// var _this = this;
// var obj = {
// companyId: "",
// date: null,
// stationIdList: [],
// };
// $.ajax({
// type: "POST",
// url: publicData.chargeurl + "/8202/overview/GetChartToMonthByStationIds",
// data: JSON.stringify(obj),
// dataType: "json",
// contentType: "application/json",
// success: function (response) {
// // 电量曲线
// if (response.code == 200) {
// _this.xAxisDatac1 = [];
// _this.barOptionSeriesc1 = [];
// _this.xAxisDatac1 = response.data.xAxisData.slice(-10).map((item, index, arr) => String(item).substr(-5));
// _this.xTAxisData = _this.xAxisDatac1; // mark
// _this.barOptionSeriesc1.push({
// name: "电量",
// data: response.data.electricity.ALL.slice(-10),
// });
// } else if (response.code == 400) {
// _this.getChargeAllDataMonth();
// }
// },
// });
// },
// //关闭弹框
// dialogCancel() {
// this.showDialogVisible = false;
// },
},
beforeRouteLeave(to, from, next) {
// clearInterval(this.timer);
//next();
},
components: {
"reportChart-item": ReportChart,
},
};
</script>
<style lang="scss" scoped>
//@import "../css/public.css";
.publicPage {
padding:20px 30px;
// background-color: #0e1a26;
}
.trianglel{
border-left:14px solid #00f9ff;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
width:0px;
height:0px;
}
// .publicModal {
// height: 70%;
// left: 12.5%;
// top: 15%;
// min-height: 360px;
// width: 75%;
// background-color: #0e1a26;
// box-shadow: 0px 0px 30px rgba(64, 158, 255, 0.5);
// border-radius: 6px;
// }
.contentPage{
width: 98%;
color: red;
padding:1% 1% 1% 1%;
// padding:20px 0px 10px 0px;
}
.contentLeft{
width: 22%;
// width: 425px;
// height: 920px;
background-image: url("../assets/img/left.png");
background-size: 100% 100%;
}
.contentCenter{
}
.centerTop{
width: 84%;
height: 52.86%;
// width: 900px;
// height: 481px;
margin: 0 auto;
text-align: center;
background-image: url("../assets/img/centerTop.png");
background-size: 100% 100%;
}
.centerBot{
width: 83%;
height: 43.7%;
// width: 891px;
// height: 398px;
margin: 0 auto;
text-align: center;
background-image: url("../assets/img/centerBot.png");
background-size: 100% 100%;
}
.contentRight{
width: 22%;
// width: 425px;
// height: 920px;
background-image: url("../assets/img/left.png");
background-size: 100% 100%;
}
</style>
