增加区间总服务费和电量

src/pages/index/index.vue

@@ -28,13 +28,20 @@
         </view>
       </view>
     </uni-card>
-    <view class="content1 w100">
+    <view class=" w100 " >
 
 
-      <block class="w100">
+      <view class="w100 content1" >
         <uni-card title="运营数据" padding="10px 0">
+          <!--          时间区间内的总实付服务费和总电量-->
+          <view class="w100">总实付服务费：<view style="color:#67c23a;display: inline">{{  state.sum.serviceMoney }}元</view></view>
+          <block class="w100">总电量：<view style="color:#f56c6c;display: inline">{{ state.sum.elecPower }}Kwh</view></block>
+
           <uni-segmented-control :current="state.current" :values="state.items" @clickItem="handleClickPeriod"
                                  styleType="text" activeColor="#4cd964"></uni-segmented-control>
+
+
+
           <view v-for="canvas in state.canvasList" :key="canvas.id">
             <view class="title">{{ canvas.label }}</view>
             <canvas
@@ -47,7 +54,7 @@
                 :style="{'width':state.cWidth+'px','height':state.cHeight+'px'}"></canvas>
           </view>
         </uni-card>
-      </block>
+      </view>
 
 
     </view>
@@ -128,7 +135,11 @@ const state = reactive({
       label: '设备状态分布',
       id: 'device-status'
     },
-  ]
+  ],
+  sum:{
+    serviceMoney:0,
+    elecPower:0,
+  }
 })
 
 
@@ -151,7 +162,7 @@ watch(() => state.current, (newVal, oldVal) => {
 
 onLoad(() => {
   //这里的 750 对应 css .charts 的 width
-  state.cWidth = uni.upx2px(750 - 30 - 70);
+  state.cWidth = uni.upx2px(750 - 30 - 100);
   //这里的 500 对应 css .charts 的 height
   state.cHeight = uni.upx2px(500);
   checkLogin();
@@ -266,6 +277,8 @@ const drawServiceAndTotalMoneyChart = (stationId) => {
   if (!dataList || dataList.length == 0) {
     return;
   }
+  state.sum.serviceMoney = dataList.map(k=>fmtMoney(k.serviceMoney - k.serviceMoneyDiscount)).reduce((a,b)=>{ return Number(a)+Number(b)},0).toFixed(2)
+  state.sum.elecPower = dataList.map(k=>k.totalPower).reduce((a,b)=>{ return Number(a)+Number(b)},0).toFixed(2)
   let categories = dataList.map(k => k.statDay.split('-').slice(1).join('-'));
   let series = [{
     name: '充电量（kwh）',
@@ -273,7 +286,7 @@ const drawServiceAndTotalMoneyChart = (stationId) => {
   },
     {
       name: '实收服务费（元）',
-      data: dataList.map(k => fmtMoney(k.serviceMoney - k.discountAmount))
+      data: dataList.map(k => fmtMoney(k.serviceMoney - k.serviceMoneyDiscount))
     }
   ]
   let options = {
@@ -290,6 +303,7 @@ const drawServiceAndTotalMoneyChart = (stationId) => {
     height: state.cHeight,
     categories: categories,
     series: series,
+    scrollPosition:'left',
     xAxis: {
       disabled: false,
       disableGrid: true,
@@ -453,6 +467,7 @@ const drawChargeUserChart = (stationId) => {
     padding: [15, 15, 0, 0],
     background: '#FFFFFF',
     enableScroll: true,
+    scrollPosition:'left',
     animation: true,
     canvas2d: true,
     dataLabel: false,
@@ -468,7 +483,7 @@ const drawChargeUserChart = (stationId) => {
       rotateLabel: true,
       rotateAngle: 35,
       // scrollShow:true,
-      boundaryGap: "justify",
+      boundaryGap: "center",
       disableGrid: true,
       min: 0,
       axisLine: false,
@@ -483,11 +498,12 @@ const drawChargeUserChart = (stationId) => {
     extra: {
       column: {
         type: "group",
-        width: 10,
+        width: 8,
         activeBgColor: "#000000",
         activeBgOpacity: 0.08,
         linearType: "custom",
-        seriesGap: 5,
+        seriesGap: 2,
+        categoryGap:0,
         linearOpacity: 0.5,
         barBorderCircle: true,
         customColor: [
@@ -594,7 +610,7 @@ const handleTouchStart = (e, canvasId) => {
 }
 
 const handleTouchMove = (e, canvasId) => {
-  console.error(e,canvasId)
+  // console.error(e,canvasId)
   let charts = state.uChartsInstance[canvasId];
   if (charts) {
     charts.scroll(e);
@@ -720,4 +736,14 @@ const tap = (e) => {
   font-size: 30rpx;
   color: #8f8f94;
 }
+
+.content1{
+  //margin: 15px;
+  ////padding: 0 10px;
+  //box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
+}
+
+.content1 .uni-card--shadow{
+  position: inherit ;
+}
 </style>