首页图表对接

admin-web/src/views/admin/index.vue

@@ -37,7 +37,7 @@
               end-placeholder="结束时间"
               :shortcuts="shortcuts"
           />
-          <div style="height: 100%" ref="homeLineRef"></div>
+          <div style="height: 100%;padding: 20px;" ref="homeLineRef"></div>
         </div>
       </el-col>
       <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8" class="home-media">
@@ -83,6 +83,8 @@ import * as echarts from 'echarts';
 import {storeToRefs} from 'pinia';
 import {useThemeConfig} from '/@/stores/themeConfig';
 import {useTagsViewRoutes} from '/@/stores/tagsViewRoutes';
+import {$get} from "/@/utils/request";
+import u from "/@/utils/u";
 
 // 定义变量内容
 const homeLineRef = ref();
@@ -98,6 +100,7 @@ const start = new Date()
 start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
 
 const state = reactive({
+
   dateRange:[start,end],
   global: {
     homeChartOne: null,
@@ -256,9 +259,13 @@ const shortcuts = [
 ]
 
 // 折线图
-const initLineChart = () => {
+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")
+
+  let xAxis = dataList.map(k=>k.statTime)
   const option = {
     backgroundColor: state.charts.bgColor,
     title: {
@@ -270,7 +277,8 @@ const initLineChart = () => {
     tooltip: {trigger: 'axis'},
     legend: {data: ['充电量', '总金额','电费','服务费',], right: 0},
     xAxis: {
-      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+      data: xAxis,
+      // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
     },
     yAxis: [
       {
@@ -286,7 +294,8 @@ const initLineChart = () => {
         symbolSize: 6,
         symbol: 'circle',
         smooth: true,
-        data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
+        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: '#25b8d2'},
         itemStyle: {color: '#25b8d2', borderColor: '#25b8d2'},
         areaStyle: {
@@ -302,7 +311,7 @@ const initLineChart = () => {
         symbolSize: 6,
         symbol: 'circle',
         smooth: true,
-        data: [0, 31.1, 32.4, 45.1, 43.3, 43.3, 43.3, 31.1, 20.4, 45.1, 73.3, 40],
+        data: dataList.map(k=>u.fmt.fmtMoney(k.totalPower)),
         lineStyle: {color: '#fe9a8b'},
         itemStyle: {color: '#fe9a8b', borderColor: '#fe9a8b'},
         areaStyle: {
@@ -318,7 +327,7 @@ const initLineChart = () => {
         symbolSize: 6,
         symbol: 'circle',
         smooth: true,
-        data: [0, 21.1, 30.4, 35.1, 53.3, 33.3, 53.3, 41.1, 20.4, 55.1, 43.3, 40],
+        data: dataList.map(k=>u.fmt.fmtMoney(k.elecMoney)),
         lineStyle: {color: '#b5fe8b'},
         itemStyle: {color: '#b5fe8b', borderColor: '#b5fe8b'},
         areaStyle: {
@@ -334,7 +343,7 @@ const initLineChart = () => {
         symbolSize: 6,
         symbol: 'circle',
         smooth: true,
-        data: [0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4, 0],
+        data: dataList.map(k=>u.fmt.fmtMoney(k.serviceMoney)),
         lineStyle: {color: '#9E87FF'},
         itemStyle: {color: '#9E87FF', borderColor: '#9E87FF'},
         areaStyle: {
@@ -370,15 +379,17 @@ const initLineChart = () => {
   state.myCharts.push(state.global.homeChartOne);
 };
 // 饼图
-const initPieChart = () => {
+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 = ['空闲', '已连接', '充电中'];
-  var getvalue = [34.2, 38.87, 17.88];
+  // var getvalue = [34.2, 38.87, 17.88];
+  // 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: getvalue[i]});
+    data.push({name: getname[i], value: dataMap[`${i}`]||0});
   }
+
   const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#E790E8'];
   const option = {
     backgroundColor: state.charts.bgColor,
@@ -387,7 +398,7 @@ const initPieChart = () => {
       x: 'left',
       textStyle: {fontSize: '15', color: state.charts.color},
     },
-    tooltip: {trigger: 'item', formatter: '{b} <br/> {c}%'},
+    tooltip: {trigger: 'item', formatter: '{b} <br/> {c}'},
     graphic: {
       elements: [
         {
@@ -455,136 +466,6 @@ const initPieChart = () => {
   state.myCharts.push(state.global.homeChartTwo);
 };
 // 柱状图
-const initBarChart = () => {
-  if (!state.global.dispose.some((b: any) => b === state.global.homeCharThree)) state.global.homeCharThree.dispose();
-  state.global.homeCharThree = markRaw(echarts.init(homeBarRef.value, state.charts.theme));
-  const option = {
-    backgroundColor: state.charts.bgColor,
-    title: {
-      text: '地热开发利用',
-      x: 'left',
-      textStyle: {fontSize: '15', color: state.charts.color},
-    },
-    tooltip: {trigger: 'axis'},
-    legend: {data: ['供温', '回温', '压力值(Mpa)'], right: 0},
-    grid: {top: 70, right: 80, bottom: 30, left: 80},
-    xAxis: [
-      {
-        type: 'category',
-        data: ['1km', '2km', '3km', '4km', '5km', '6km'],
-        boundaryGap: true,
-        axisTick: {show: false},
-      },
-    ],
-    yAxis: [
-      {
-        name: '供回温度(℃）',
-        nameLocation: 'middle',
-        nameTextStyle: {padding: [3, 4, 50, 6]},
-        splitLine: {show: true, lineStyle: {type: 'dashed', color: '#f5f5f5'}},
-        axisLine: {show: false},
-        axisTick: {show: false},
-        axisLabel: {color: state.charts.color, formatter: '{value} '},
-      },
-      {
-        name: '压力值(Mpa)',
-        nameLocation: 'middle',
-        nameTextStyle: {padding: [50, 4, 5, 6]},
-        splitLine: {show: false},
-        axisLine: {show: false},
-        axisTick: {show: false},
-        axisLabel: {color: state.charts.color, formatter: '{value} '},
-      },
-    ],
-    series: [
-      {
-        name: '供温',
-        type: 'line',
-        smooth: true,
-        showSymbol: true,
-        // 矢量画五角星
-        symbol: 'path://M150 0 L80 175 L250 75 L50 75 L220 175 Z',
-        symbolSize: 12,
-        yAxisIndex: 0,
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {offset: 0, color: 'rgba(250,180,101,0.3)'},
-            {offset: 1, color: 'rgba(250,180,101,0)'},
-          ]),
-          shadowColor: 'rgba(250,180,101,0.2)',
-          shadowBlur: 20,
-        },
-        itemStyle: {color: '#FF8000'},
-        // data中可以使用对象，value代表相应的值，另外可加入自定义的属性
-        data: [
-          {value: 1, stationName: 's1'},
-          {value: 3, stationName: 's2'},
-          {value: 4, stationName: 's3'},
-          {value: 9, stationName: 's4'},
-          {value: 3, stationName: 's5'},
-          {value: 2, stationName: 's6'},
-        ],
-      },
-      {
-        name: '回温',
-        type: 'line',
-        smooth: true,
-        showSymbol: true,
-        symbol: 'emptyCircle',
-        symbolSize: 12,
-        yAxisIndex: 0,
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(
-              0,
-              0,
-              0,
-              1,
-              [
-                {offset: 0, color: 'rgba(199, 237, 250,0.5)'},
-                {offset: 1, color: 'rgba(199, 237, 250,0.2)'},
-              ],
-              false
-          ),
-        },
-        itemStyle: {
-          color: '#3bbc86',
-        },
-        data: [
-          {value: 31, stationName: 's1'},
-          {value: 36, stationName: 's2'},
-          {value: 54, stationName: 's3'},
-          {value: 24, stationName: 's4'},
-          {value: 73, stationName: 's5'},
-          {value: 22, stationName: 's6'},
-        ],
-      },
-      {
-        name: '压力值(Mpa)',
-        type: 'bar',
-        barWidth: 30,
-        yAxisIndex: 1,
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {offset: 0, color: 'rgba(108,80,243,0.3)'},
-            {offset: 1, color: 'rgba(108,80,243,0)'},
-          ]),
-          //柱状图圆角
-          borderRadius: [30, 30, 0, 0],
-        },
-        data: [
-          {value: 11, stationName: 's1'},
-          {value: 34, stationName: 's2'},
-          {value: 54, stationName: 's3'},
-          {value: 39, stationName: 's4'},
-          {value: 63, stationName: 's5'},
-          {value: 24, stationName: 's6'},
-        ],
-      },
-    ],
-  };
-  state.global.homeCharThree.setOption(option);
-  state.myCharts.push(state.global.homeCharThree);
-};
 // 批量设置 echarts resize
 const initEchartsResizeFun = () => {
   nextTick(() => {
@@ -599,11 +480,49 @@ const initEchartsResizeFun = () => {
 const initEchartsResize = () => {
   window.addEventListener('resize', initEchartsResizeFun);
 };
+
+const loadCurrentEquipmentStatus = ()=>{
+  $get(`equipment/statEquipmentStatus`).then((res:any)=>{
+    console.log(res)
+    initPieChart(res||{});
+  })
+}
+
+
+const loadStationStat = ()=>{
+  $get(`stat/stationStat`,{startTime:state.dateRange[0],endTime:state.dateRange[1],type:'day'}).then((res:any)=>{
+    console.log(res)
+    initLineChart(res.list);
+  })
+}
+
+const loadStationStatToday = ()=>{
+  $get(`stat/stationTodayStat`).then((res:any)=>{
+    console.log(res)
+    if(!u.isEmptyOrNull(res.list)){
+      let {chargeUsers,totalOrders,totalPower,totalMoney,elecMoney,serviceMoney}  = res.list[0]
+      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[4].num1 = chargeUsers;
+      state.homeOne[5].num1 = totalOrders;
+    }
+
+  })
+}
 // 页面加载时
 onMounted(() => {
   console.error("home onMounted")
   NProgress.done();
   initEchartsResize();
+  //加载充电走势数据
+  loadStationStat()
+  //今日统计数据
+  loadStationStatToday();
+
+  //加载充电桩状态
+  loadCurrentEquipmentStatus();
 });
 // 由于页面缓存原因，keep-alive
 onActivated(() => {
@@ -625,14 +544,14 @@ watch(
         state.charts.bgColor = isIsDark ? 'transparent' : '';
         state.charts.color = isIsDark ? '#dadada' : '#303133';
         setTimeout(() => {
-          initLineChart();
+          loadStationStat()
         }, 500);
         setTimeout(() => {
-          initPieChart();
+          loadCurrentEquipmentStatus();
         }, 700);
-        setTimeout(() => {
-          initBarChart();
-        }, 1000);
+        // setTimeout(() => {
+        //   initBarChart();
+        // }, 1000);
       });
     },
     {
@@ -700,7 +619,7 @@ $homeNavLengh: 8;
   .home-card-two,
   .home-card-three {
     .home-card-item {
-      height: 580px;
+      height: 780px;
       width: 100%;
       overflow: hidden;
 

service/src/main/java/com/kym/service/miniapp/impl/ChargeOrderServiceImpl.java

@@ -82,7 +82,7 @@ public class ChargeOrderServiceImpl extends ServiceImpl<ChargeOrderMapper, Charg
     public PageBean<StationStatVo> stationStat(StatQueryParam params) {
         PageHelper.startPage(params.getPageNum(), params.getPageSize());
         var res = baseMapper.stationStat(params).stream().peek(item -> {
-            item.setElecMoneyPercent((new BigDecimal(item.getElecMoney())).divide(new BigDecimal(item.getTotalMoney()), 2, RoundingMode.HALF_UP));
+            item.setElecMoneyPercent((new BigDecimal(item.getElecMoney())).divide(new BigDecimal(Math.max(1,item.getTotalMoney())), 2, RoundingMode.HALF_UP));
             item.setServiceMoneyPercent(BigDecimal.ONE.subtract(item.getElecMoneyPercent()));
         }).collect(Collectors.toList());
         return new PageBean<>(res);