|
|
@@ -15,12 +15,12 @@
|
|
|
<div class="flex-margin flex w100" :class="` home-one-animation${k}`">
|
|
|
<div class="flex-auto">
|
|
|
<span class="font30">{{ v.num1 }}</span>
|
|
|
-<!-- <span class="ml5 font16" :style="{ color: v.color1 }">{{ v.num2 }}%</span>-->
|
|
|
+ <!-- <span class="ml5 font16" :style="{ color: v.color1 }">{{ v.num2 }}%</span>-->
|
|
|
<div class="mt10">{{ v.num3 }}</div>
|
|
|
</div>
|
|
|
-<!-- <div class="home-card-item-icon flex" :style="{ background: `var(${v.color2})` }">-->
|
|
|
-<!-- <i class="flex-margin font32" :class="v.num4" :style="{ color: `var(${v.color3})` }"></i>-->
|
|
|
-<!-- </div>-->
|
|
|
+ <!-- <div class="home-card-item-icon flex" :style="{ background: `var(${v.color2})` }">-->
|
|
|
+ <!-- <i class="flex-margin font32" :class="v.num4" :style="{ color: `var(${v.color3})` }"></i>-->
|
|
|
+ <!-- </div>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -28,17 +28,30 @@
|
|
|
<el-row :gutter="15" class="home-card-two mb15">
|
|
|
<el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16">
|
|
|
<div class="home-card-item">
|
|
|
- <el-date-picker
|
|
|
- @change="loadStationStat"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
- v-model="state.dateRange"
|
|
|
- type="daterange"
|
|
|
- unlink-panels
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始时间"
|
|
|
- end-placeholder="结束时间"
|
|
|
- :shortcuts="shortcuts"
|
|
|
- />
|
|
|
+ <div class="w100 trend-header">
|
|
|
+ <div style="width: 300px">
|
|
|
+ <el-date-picker
|
|
|
+ @change="loadStationStat"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ v-model="state.dateRange"
|
|
|
+ type="daterange"
|
|
|
+ unlink-panels
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ :shortcuts="shortcuts"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="trend-summary">
|
|
|
+ 总服务费:
|
|
|
+ <el-tag type="success">{{ u.fmt.fmtMoney(state.homeOneExtra.serviceMoney) }}元</el-tag>
|
|
|
+ 总电量:
|
|
|
+ <el-tag type="danger">{{ state.homeOneExtra.totalPower }}Kwh</el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div style="height: 100%;padding: 20px;" ref="homeLineRef"></div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -82,7 +95,7 @@ const defaultTime = ref<[Date, Date]>([
|
|
|
])
|
|
|
|
|
|
const state = reactive({
|
|
|
- dateRange:[u.date.format(start,"YYYY-MM-DD"),u.date.format(end,"YYYY-MM-DD")],
|
|
|
+ dateRange: [u.date.format(start, "YYYY-MM-DD"), u.date.format(end, "YYYY-MM-DD")],
|
|
|
global: {
|
|
|
homeChartOne: null,
|
|
|
homeChartTwo: null,
|
|
|
@@ -145,68 +158,13 @@ const state = reactive({
|
|
|
color3: '--el-color-danger',
|
|
|
},
|
|
|
],
|
|
|
- homeThree: [
|
|
|
- {
|
|
|
- icon: 'iconfont icon-yangan',
|
|
|
- label: '浅粉红',
|
|
|
- value: '2.1%OBS/M',
|
|
|
- iconColor: '#F72B3F',
|
|
|
- },
|
|
|
- {
|
|
|
- icon: 'iconfont icon-wendu',
|
|
|
- label: '深红(猩红)',
|
|
|
- value: '30℃',
|
|
|
- iconColor: '#91BFF8',
|
|
|
- },
|
|
|
- {
|
|
|
- icon: 'iconfont icon-shidu',
|
|
|
- label: '淡紫红',
|
|
|
- value: '57%RH',
|
|
|
- iconColor: '#88D565',
|
|
|
- },
|
|
|
- {
|
|
|
- icon: 'iconfont icon-shidu',
|
|
|
- label: '弱紫罗兰红',
|
|
|
- value: '107w',
|
|
|
- iconColor: '#88D565',
|
|
|
- },
|
|
|
- {
|
|
|
- icon: 'iconfont icon-zaosheng',
|
|
|
- label: '中紫罗兰红',
|
|
|
- value: '57DB',
|
|
|
- iconColor: '#FBD4A0',
|
|
|
- },
|
|
|
- {
|
|
|
- icon: 'iconfont icon-zaosheng',
|
|
|
- label: '紫罗兰',
|
|
|
- value: '57PV',
|
|
|
- iconColor: '#FBD4A0',
|
|
|
- },
|
|
|
- {
|
|
|
- icon: 'iconfont icon-zaosheng',
|
|
|
- label: '暗紫罗兰',
|
|
|
- value: '517Cpd',
|
|
|
- iconColor: '#FBD4A0',
|
|
|
- },
|
|
|
- {
|
|
|
- icon: 'iconfont icon-zaosheng',
|
|
|
- label: '幽灵白',
|
|
|
- value: '12kg',
|
|
|
- iconColor: '#FBD4A0',
|
|
|
- },
|
|
|
- {
|
|
|
- icon: 'iconfont icon-zaosheng',
|
|
|
- label: '海军蓝',
|
|
|
- value: '64fm',
|
|
|
- iconColor: '#FBD4A0',
|
|
|
- },
|
|
|
- ],
|
|
|
myCharts: [] as EmptyArrayType,
|
|
|
charts: {
|
|
|
theme: '',
|
|
|
bgColor: '',
|
|
|
color: '#303133',
|
|
|
},
|
|
|
+ homeOneExtra: {}
|
|
|
});
|
|
|
|
|
|
const shortcuts = [
|
|
|
@@ -240,13 +198,13 @@ const shortcuts = [
|
|
|
]
|
|
|
|
|
|
// 折线图
|
|
|
-const initLineChart = (dataList:Array<any>) => {
|
|
|
+const initLineChart = (dataList: Array<any>) => {
|
|
|
if (!state.global.dispose.some((b: any) => b === state.global.homeChartOne)) state.global.homeChartOne.dispose();
|
|
|
state.global.homeChartOne = markRaw(echarts.init(homeLineRef.value, state.charts.theme));
|
|
|
|
|
|
- u.sort(dataList,"statTime")
|
|
|
+ u.sort(dataList, "statTime")
|
|
|
|
|
|
- let xAxis = dataList.map(k=>k.statTime)
|
|
|
+ let xAxis = dataList.map(k => k.statTime)
|
|
|
const option = {
|
|
|
backgroundColor: state.charts.bgColor,
|
|
|
title: {
|
|
|
@@ -265,7 +223,7 @@ const initLineChart = (dataList:Array<any>) => {
|
|
|
{
|
|
|
type: 'value',
|
|
|
name: '费用/元 充电量/度',
|
|
|
- position:'left',
|
|
|
+ position: 'left',
|
|
|
splitLine: {show: true, lineStyle: {type: 'dashed', color: '#f5f5f5'}},
|
|
|
},
|
|
|
],
|
|
|
@@ -276,10 +234,10 @@ const initLineChart = (dataList:Array<any>) => {
|
|
|
symbolSize: 6,
|
|
|
symbol: 'circle',
|
|
|
smooth: true,
|
|
|
- data: dataList.map(k=>k.totalPower),
|
|
|
+ data: dataList.map(k => k.totalPower),
|
|
|
// data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
|
|
|
lineStyle: {color: '#68a7a0'},
|
|
|
- itemStyle: {color: '#68a7a0', borderColor: '#68a7a0',barBorderRadius: 5},
|
|
|
+ itemStyle: {color: '#68a7a0', borderColor: '#68a7a0', barBorderRadius: 5},
|
|
|
areaStyle: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{offset: 0, color: '#25b8d2'},
|
|
|
@@ -287,45 +245,45 @@ const initLineChart = (dataList:Array<any>) => {
|
|
|
]),
|
|
|
},
|
|
|
},
|
|
|
-/* {
|
|
|
- name: '总金额',
|
|
|
- type: 'line',
|
|
|
- symbolSize: 6,
|
|
|
- symbol: 'circle',
|
|
|
- smooth: true,
|
|
|
- data: dataList.map(k=>u.fmt.fmtMoney(k.totalMoney)),
|
|
|
- lineStyle: {color: '#fe9a8b'},
|
|
|
- itemStyle: {color: '#fe9a8b', borderColor: '#fe9a8b'},
|
|
|
- areaStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- {offset: 0, color: '#fe9a8bb3'},
|
|
|
- {offset: 1, color: '#fe9a8b03'},
|
|
|
- ]),
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: '电费',
|
|
|
- type: 'line',
|
|
|
- symbolSize: 6,
|
|
|
- symbol: 'circle',
|
|
|
- smooth: true,
|
|
|
- data: dataList.map(k=>u.fmt.fmtMoney(k.elecMoney)),
|
|
|
- lineStyle: {color: '#b5fe8b'},
|
|
|
- itemStyle: {color: '#b5fe8b', borderColor: '#b5fe8b'},
|
|
|
- areaStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- {offset: 0, color: '#b5fe8b'},
|
|
|
- {offset: 1, color: '#fe9a8b03'},
|
|
|
- ]),
|
|
|
- },
|
|
|
- },*/
|
|
|
+ /* {
|
|
|
+ name: '总金额',
|
|
|
+ type: 'line',
|
|
|
+ symbolSize: 6,
|
|
|
+ symbol: 'circle',
|
|
|
+ smooth: true,
|
|
|
+ data: dataList.map(k=>u.fmt.fmtMoney(k.totalMoney)),
|
|
|
+ lineStyle: {color: '#fe9a8b'},
|
|
|
+ itemStyle: {color: '#fe9a8b', borderColor: '#fe9a8b'},
|
|
|
+ areaStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {offset: 0, color: '#fe9a8bb3'},
|
|
|
+ {offset: 1, color: '#fe9a8b03'},
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '电费',
|
|
|
+ type: 'line',
|
|
|
+ symbolSize: 6,
|
|
|
+ symbol: 'circle',
|
|
|
+ smooth: true,
|
|
|
+ data: dataList.map(k=>u.fmt.fmtMoney(k.elecMoney)),
|
|
|
+ lineStyle: {color: '#b5fe8b'},
|
|
|
+ itemStyle: {color: '#b5fe8b', borderColor: '#b5fe8b'},
|
|
|
+ areaStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {offset: 0, color: '#b5fe8b'},
|
|
|
+ {offset: 1, color: '#fe9a8b03'},
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },*/
|
|
|
{
|
|
|
name: '服务费',
|
|
|
type: 'line',
|
|
|
symbolSize: 6,
|
|
|
symbol: 'circle',
|
|
|
smooth: true,
|
|
|
- data: dataList.map(k=>u.fmt.fmtMoney(k.serviceMoney)),
|
|
|
+ data: dataList.map(k => u.fmt.fmtMoney(k.serviceMoney)),
|
|
|
lineStyle: {color: '#3770ff'},
|
|
|
itemStyle: {color: '#3770ff', borderColor: '#3770ff'},
|
|
|
areaStyle: {
|
|
|
@@ -361,7 +319,7 @@ const initLineChart = (dataList:Array<any>) => {
|
|
|
state.myCharts.push(state.global.homeChartOne);
|
|
|
};
|
|
|
// 饼图
|
|
|
-const initPieChart = (dataMap:any) => {
|
|
|
+const initPieChart = (dataMap: any) => {
|
|
|
if (!state.global.dispose.some((b: any) => b === state.global.homeChartTwo)) state.global.homeChartTwo.dispose();
|
|
|
state.global.homeChartTwo = markRaw(echarts.init(homePieRef.value, state.charts.theme));
|
|
|
var getname = ['空闲', '已连接', '充电中'];
|
|
|
@@ -369,7 +327,7 @@ const initPieChart = (dataMap:any) => {
|
|
|
// var data = [dataMap["0"]||0,dataMap["1"]||0,dataMap["2"]||0];
|
|
|
var data = [];
|
|
|
for (var i = 0; i < getname.length; i++) {
|
|
|
- data.push({name: getname[i], value: dataMap[`${i}`]||0});
|
|
|
+ data.push({name: getname[i], value: dataMap[`${i}`] || 0});
|
|
|
}
|
|
|
|
|
|
const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#E790E8'];
|
|
|
@@ -463,33 +421,34 @@ const initEchartsResize = () => {
|
|
|
window.addEventListener('resize', initEchartsResizeFun);
|
|
|
};
|
|
|
|
|
|
-const loadCurrentEquipmentStatus = ()=>{
|
|
|
- $get(`equipment/statEquipmentStatus`).then((res:any)=>{
|
|
|
+const loadCurrentEquipmentStatus = () => {
|
|
|
+ $get(`equipment/statEquipmentStatus`).then((res: any) => {
|
|
|
console.log(res)
|
|
|
- initPieChart(res||{});
|
|
|
+ initPieChart(res || {});
|
|
|
})
|
|
|
}
|
|
|
|
|
|
|
|
|
-const loadStationStat = ()=>{
|
|
|
+const loadStationStat = () => {
|
|
|
let start = state.dateRange[0]
|
|
|
let end = state.dateRange[1]
|
|
|
- let size = u.date.diff(new Date(start),new Date(end))+1;
|
|
|
- $get(`stat/stationStat`,{startTime:start,endTime:end,type:'day',pageSize:size}).then((res:any)=>{
|
|
|
+ let size = u.date.diff(new Date(start), new Date(end)) + 1;
|
|
|
+ $get(`stat/stationStat`, {startTime: start, endTime: end, type: 'day', pageSize: size}).then((res: any) => {
|
|
|
console.log(res)
|
|
|
+ state.homeOneExtra = res.extraData
|
|
|
initLineChart(res.list);
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-const loadStationStatToday = ()=>{
|
|
|
- $get(`stat/stationTodayStat`).then((res:any)=>{
|
|
|
+const loadStationStatToday = () => {
|
|
|
+ $get(`stat/stationTodayStat`).then((res: any) => {
|
|
|
console.log(res)
|
|
|
- if(!u.isEmptyOrNull(res)){
|
|
|
- let {chargeUsers,totalOrders,totalPower,totalMoney,elecMoney,serviceMoney} = res
|
|
|
+ if (!u.isEmptyOrNull(res)) {
|
|
|
+ let {chargeUsers, totalOrders, totalPower, totalMoney, elecMoney, serviceMoney} = res
|
|
|
state.homeOne[0].num1 = totalPower;
|
|
|
state.homeOne[1].num1 = u.fmt.fmtMoney(totalMoney);
|
|
|
- state.homeOne[2].num1 = u.fmt.fmtMoney(elecMoney);
|
|
|
- state.homeOne[3].num1 = u.fmt.fmtMoney(serviceMoney);
|
|
|
+ state.homeOne[2].num1 = u.fmt.fmtMoney(elecMoney);
|
|
|
+ state.homeOne[3].num1 = u.fmt.fmtMoney(serviceMoney);
|
|
|
state.homeOne[4].num1 = chargeUsers;
|
|
|
state.homeOne[5].num1 = totalOrders;
|
|
|
}
|
|
|
@@ -646,4 +605,13 @@ $homeNavLengh: 8;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.trend-header {
|
|
|
+ display: inline-flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .trend-summary {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|