修改首页

jsowell-ui/src/views/homeIndex/echarts.js

@@ -0,0 +1,35 @@
+export function barDataView(titleName, fileName) {
+  var dataView = {
+    show: true,
+    readOnly: false,
+    lang: ['数据视图', '关闭', '刷新'],
+    optionToContent: function(opt) {
+      var axisData = opt.xAxis[0].data // 坐标数据
+      var series = opt.series // 折线图数据
+      var tdHeads = ''
+      for (let index = 0; index < titleName.length; index++) {
+        // 样式
+        tdHeads += '<td  style="height:30px;text-align: center;">' + titleName[index] + '</td>'
+      }
+      var tdBodys = '' // 表数据
+      var table = '<table id="tableExcel_Day" border="1" class="table-bordered table-striped" style="width:100%;text-align:centerborder:1px solid #ccc;border-collapse:collapse;" ><tbody><tr>' + tdHeads + ' </tr>'
+      // 组装表数据
+      for (var i = 0, l = axisData.length; i < l; i++) {
+        for (var j = 0; j < series.length; j++) {
+          var temp = series[j].data[i]
+          if (temp != null && temp !== undefined) {
+            tdBodys += '<td>' + temp + '</td>'
+          } else {
+            tdBodys += '<td></td>'
+          }
+        }
+        // 样式
+        table += '<tr style="height:30px;text-align: center;"><td >' + axisData[i] + '</td>' + tdBodys + '</tr>'
+        tdBodys = ''
+      }
+      table += '</tbody></table>'
+      return table
+    }
+  }
+  return dataView
+}

jsowell-ui/src/views/homeIndex/homeIndex.vue

@@ -1,9 +1,57 @@
 <template>
 
-    <div>
+    <div class="app-container">
         <h1>概况</h1>
         <hr/>
-        <el-row >
+        <div style="display: flex;justify-content: space-between;margin-top: 10px;flex-wrap: wrap;">
+            <div class="box" style="background-color: #ffba00;">
+                        <el-image class="box-image"
+                                  :src="require('@/assets/images/lightning.png')"
+                        />
+                        <div class="flex1">
+                            <b class="box-h1">{{ generalSituation.totalChargingDegree}}</b>
+                            <div>总充电电量(度)</div>
+                        </div>
+                    </div>
+                     <div class="box" style="background-color: #c74542;">
+                        <el-image class="box-image"
+                                  :src="require('@/assets/images/zongfeiyong.png')"/>
+                        <div class="flex1">
+                            <b class="box-h1">{{ generalSituation.totalChargingAmount }}</b>
+                            <div>总充电费用(元)</div>
+                        </div>
+                    </div>
+                   <div class="box" style="background-color: #12ce65;">
+                        <el-image
+                            class="box-image"
+                            :src="require('@/assets/images/dingdan.png')"/>
+                        <div class="flex1">
+                            <b class="box-h1">{{ generalSituation.totalChargingQuantity }}</b>
+                            <div>总充电订单数(笔)</div>
+                        </div>
+                    </div>
+                         <div class="box" style="background-color: #909399;">
+                        <el-image
+                            class="box-image"
+                            :src="require('@/assets/images/shebei.png')"/>
+                        <div class="flex1">
+                            <b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>
+                            <div>总充电设备数量(座)</div>
+                        </div>
+                    </div>
+                      <div class="box" v-hasRole="['admin', 'common']" style="background-color: #ff4949;">
+                        <el-image
+                            class="box-image"
+                            :src="require('@/assets/images/yue.png')"
+                        ></el-image>
+                        <div class="flex1">
+                            <b class="box-h1">{{ generalSituation.totalMemberAmount }}</b>
+                            <div>总客户余额(元)</div>
+                        </div>
+                    </div>
+
+        </div>
+        <!-- <el-row >
             <div style="display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 10px">
 
                 <el-col :xs="12" :sm="12" :lg="{span: '4-8'}" class="card-panel-col">
@@ -65,20 +113,8 @@
                         </div>
                     </div>
                 </el-col>
-                <!--      <div class="box">-->
-                <!--        <div>总服务费金额</div>-->
-                <!--        <div class="box-text">-->
-                <!--          <b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>-->
-                <!--          <i>元</i>-->
-                <!--          <el-image-->
-                <!--            class="box-image"-->
-                <!--            :src="require('@/assets/images/shebei.png')"-->
-                <!--          ></el-image>-->
-                <!--        </div>-->
-                <!--        <div class="progress"></div>-->
-                <!--      </div>-->
             </div>
-        </el-row>
+        </el-row> -->
         <h1>订单</h1>
         <hr/>
         <el-button style="background-color: #1ab394; color: #ffffff"
@@ -97,6 +133,7 @@
 </template>
 <script>
 import Echarts from "echarts";
+import { barDataView } from "./echarts";
 import {getGeneralSituation, getOrderInfo} from "@/api/index";
 
 export default {
@@ -320,6 +357,7 @@ export default {
                         },
                     ],
                 };
+                option.toolbox.feature.dataView = barDataView(['时间/日期','总用电量','总订单金额','尖时段总用电量','峰时段总用电量','平时段总用电量','谷时段总用电量'],'电量电费')
                 this.chart.setOption(option);
             });
         },
@@ -370,21 +408,24 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+// .app-container{
+//     overflow: scroll;
+// }
 .box {
+    width: 15rem;
     display: flex;
-    height: 100px;
+    height: 6.25rem;
-    padding: 10px;
+    padding: 0.8rem;
     /* font-size: 18px; */
     color: #ffffff;
     border-radius: 8px;
-    box-shadow: 0 15px 10px -11px black;
+    box-shadow: 0 15px 0.8rem -11px black;
     margin-right: 24px;
     margin-bottom: 20px;
     position: relative;
-
     .box-image {
-        width: 60px;
+        width: 3.75rem;
-        height: 60px;
+        height: 3.75rem;
         // background-size: 100% 100%;
         // position: absolute;
         // right: 0;
@@ -400,7 +441,7 @@ export default {
 
 .box-h1 {
     /* margin-top: -14px; */
-    font-size: 47px;
+    font-size: 2rem;
 }
 
 .box-text {