diff --git a/jsowell-ui/src/views/homeIndex/homeIndex.vue b/jsowell-ui/src/views/homeIndex/homeIndex.vue
index 4617464c6..843e64ba9 100644
--- a/jsowell-ui/src/views/homeIndex/homeIndex.vue
+++ b/jsowell-ui/src/views/homeIndex/homeIndex.vue
@@ -1,416 +1,430 @@
 <template>
-    <el-row :gutter="0" type="flex" style="flex-wrap:wrap">
 
-  <div>
-    <h1>概况</h1>
-    <hr />
-    <div style="display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 10px">
-        <el-col :span="4">
-        <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>
-        </el-col>
-        <el-col :span="4">
-      <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>
-        </el-col>
+    <div>
+        <h1>概况</h1>
+        <hr/>
+        <el-row >
+            <div style="display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 10px">
 
-        <el-col :span="4">
-      <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>
-        </el-col>
+                <el-col :xs="12" :sm="12" :lg="{span: '4-8'}" class="card-panel-col">
+                    <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>
+                </el-col>
 
-        <el-col :span="4">
-      <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>
-        </el-col>
+                <el-col :xs="12" :sm="12" :lg="{span: '4-8'}" class="card-panel-col">
+                    <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>
+                </el-col>
 
-        <el-col :span="4">
-      <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>
-        </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>-->
+                <el-col :xs="12" :sm="12" :lg="{span: '4-8'}" class="card-panel-col">
+                    <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>
+                </el-col>
+
+                <el-col :xs="12" :sm="12" :lg="{span: '4-8'}" class="card-panel-col">
+                    <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>
+                </el-col>
+
+                <el-col :xs="12" :sm="12" :lg="{span: '4-8'}" class="card-panel-col">
+                    <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>
+                </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>
+        <h1>订单</h1>
+        <hr/>
+        <el-button style="background-color: #1ab394; color: #ffffff"
+        >最近30天
+        </el-button
+        >
+        <div ref="chart" :style="{ width: '100%', height: '500px' }"></div>
+        <hr/>
+        <!-- <h1>启动充电渠道</h1> -->
+        <!-- <div ref="chartDom" :style="{ width: '50%', height: '550px' }"></div> -->
+        <!-- <hr /> -->
+        <!-- <hr /> -->
+        <!-- <h1>设备</h1> -->
     </div>
-    <h1>订单</h1>
-    <hr />
-    <el-button style="background-color: #1ab394; color: #ffffff"
-      >最近30天</el-button
-    >
-    <div ref="chart" :style="{ width: '100%', height: '500px' }"></div>
-    <hr />
-    <!-- <h1>启动充电渠道</h1> -->
-    <!-- <div ref="chartDom" :style="{ width: '50%', height: '550px' }"></div> -->
-    <!-- <hr /> -->
-    <!-- <hr /> -->
-    <!-- <h1>设备</h1> -->
-  </div>
-    </el-row>
+
 </template>
 <script>
 import Echarts from "echarts";
-import { getGeneralSituation, getOrderInfo } from "@/api/index";
+import {getGeneralSituation, getOrderInfo} from "@/api/index";
 
 export default {
-  data() {
-    return {
-      chart: null,
-      generalSituation: {},
-      orderInfo: [],
-      tableData: [{
-        pileSn:'9527',
-        stationName:'有电充充电桩',
-        stationAddress:'昆山市黄埔江南路',
-        type:'直流',
-        power:'2131',
-        degree:'215',
-        electricityPrice:'565',
-        servicePrice:'9274',
-        chargingNumber:'624',
+    data() {
+        return {
+            chart: null,
+            generalSituation: {},
+            orderInfo: [],
+            tableData: [{
+                pileSn: '9527',
+                stationName: '有电充充电桩',
+                stationAddress: '昆山市黄埔江南路',
+                type: '直流',
+                power: '2131',
+                degree: '215',
+                electricityPrice: '565',
+                servicePrice: '9274',
+                chargingNumber: '624',
 
-      }]
-    };
-  }, //图表实例
-  created() {
-    this.getGeneral();
-  },
-  mounted() {
-    this.init();
-    // this.rose();
-  },
-  methods: {
-    async getGeneral() {
-      const { obj } = await getGeneralSituation({});
-      console.log("首页信息", obj);
-      this.generalSituation = obj;
-    },
-    async getOrder() {
-      const { obj } = await getOrderInfo({});
-      this.orderInfo = obj;
-      console.log("订单信息", this.orderInfo);
-    },
-    async init() {
-      await this.getOrder();
-      this.$nextTick(() => {
-        this.chart = Echarts.init(this.$refs.chart);
-        console.log("柱状图", this.orderInfo);
-        let str = this.orderInfo.map((item) => {
-          return item.date;
-        });
-        console.log(str);
-        let option = {
-          tooltip: {
-            trigger: "axis",
-            axisPointer: {
-              type: "shadow",
-            },
-          },
-          toolbox: {
-            feature: {
-              dataView: { show: true, readOnly: false },
-              magicType: { show: true, type: ["line", "bar"] },
-              restore: { show: true },
-              saveAsImage: { show: true },
-            },
-          },
-          legend: {
-            data: [
-              "总订单金额",
-              "尖时段总用电量",
-              "峰时段总用电量",
-              "平时段总用电量",
-              "谷时段总用电量",
-            ],
-          },
-          dataZoom: {
-            show: false,
-            start: 0,
-            end: 100,
-          },
-          grid: {
-            left: "3%",
-            right: "4%",
-            bottom: "3%",
-            containLabel: true,
-          },
-          xAxis: [
-            {
-              type: "category",
-              boundaryGap: true,
-              data: str,
-              axisLine: { onZero: false },
-            },
-          ],
-          animation: true,
-          animationDuration: 2000,
-          yAxis: [
-            {
-              type: "value",
-              name: "电费",
-              position: "left",
-              alignTicks: true,
-              axisLabel: {
-                formatter: "{value} ￥",
-              },
-            },
-            {
-              type: "value",
-              name: "电量",
-              position: "right",
-              alignTicks: true,
-              axisLabel: {
-                formatter: "{value} kwh",
-              },
-            },
-          ],
-          series: [
-            {
-              name: "总用电量",
-              type: "line",
-              data: this.orderInfo.map((item) => {
-                return item.totalElectricity;
-              }),
-              symbolSize: 1,
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  color: "rgba(252,120,48,0)",
-                  barBorderRadius: 0,
-                },
-              },
-            },
-            {
-              name: "总订单金额",
-              type: "line",
-              yAxisIndex: 0,
-              data: this.orderInfo.map((item) => {
-                return item.totalOrderAmount;
-              }),
-            },
-            {
-              name: "尖时段总用电量",
-              type: "bar",
-              yAxisIndex: 1,
-              stack: "one",
-              emphasis: {
-                focus: "series",
-                blurScope: "coordinateSystem",
-              },
-              data: this.orderInfo.map((item) => {
-                return item.totalSharpUsedElectricity;
-              }),
-              barWidth: "35%", //柱子宽度
-              // barGap: 1, //柱子之间间距
-              itemStyle: {
-                normal: {
-                  color: "#ff4949",
-                  opacity: 1,
-                  barBorderRadius: 1, //柱子菱角
-                },
-              },
-            },
-            {
-              name: "峰时段总用电量",
-              type: "bar",
-              yAxisIndex: 1,
-              stack: "one",
-              emphasis: {
-                focus: "series",
-                blurScope: "coordinateSystem",
-              },
-              data: this.orderInfo.map((item) => {
-                return item.totalPeakUsedElectricity;
-              }),
-              barWidth: "35%",
-              itemStyle: {
-                normal: {
-                  color: "#ffba00",
-                  opacity: 1,
-                  barBorderRadius: 1, //柱子菱角
-                },
-              },
-            },
-            {
-              name: "平时段总用电量",
-              type: "bar",
-              yAxisIndex: 1,
-              stack: "one",
-              data: this.orderInfo.map((item) => {
-                return item.totalFlatUsedElectricity;
-              }),
-              emphasis: {
-                focus: "series",
-                blurScope: "coordinateSystem",
-              },
-              itemStyle: {
-                normal: {
-                  color: "#12ce65",
-                  opacity: 1,
-                  barBorderRadius: 1, //柱子菱角
-                },
-              },
-            },
-            {
-              name: "谷时段总用电量",
-              type: "bar",
-              yAxisIndex: 1,
-              stack: "one",
-              data: this.orderInfo.map((item) => {
-                return item.totalValleyUsedElectricity;
-              }),
-              emphasis: {
-                focus: "series",
-                blurScope: "coordinateSystem",
-              },
-              itemStyle: {
-                normal: {
-                  color: "#909399",
-                  opacity: 1,
-                  barBorderRadius: 1, //柱子菱角
-                },
-              },
-            },
-          ],
+            }]
         };
-        this.chart.setOption(option);
-      });
+    }, //图表实例
+    created() {
+        this.getGeneral();
     },
-    rose() {
-      this.$nextTick(() => {
-        this.chartDom = Echarts.init(this.$refs.chartDom);
-        let option = {
-          legend: {
-            top: "bottom",
-          },
-          toolbox: {
-            show: true,
-            feature: {
-              mark: { show: true },
-              dataView: { show: true, readOnly: false },
-              restore: { show: true },
-              saveAsImage: { show: true },
-            },
-          },
-          series: [
-            {
-              name: "Nightingale Chart",
-              type: "pie",
-              radius: [50, 250],
-              center: ["50%", "50%"],
-              roseType: "area",
-              itemStyle: {
-                borderRadius: 8,
-              },
-              data: [
-                { value: 40, name: "rose 1" },
-                { value: 38, name: "rose 2" },
-                { value: 32, name: "rose 3" },
-                { value: 30, name: "rose 4" },
-                { value: 28, name: "rose 5" },
-                { value: 26, name: "rose 6" },
-                { value: 22, name: "rose 7" },
-                { value: 18, name: "rose 8" },
-              ],
-            },
-          ],
-        };
-        this.chartDom.setOption(option);
-      });
+    mounted() {
+        this.init();
+        // this.rose();
+    },
+    methods: {
+        async getGeneral() {
+            const {obj} = await getGeneralSituation({});
+            console.log("首页信息", obj);
+            this.generalSituation = obj;
+        },
+        async getOrder() {
+            const {obj} = await getOrderInfo({});
+            this.orderInfo = obj;
+            console.log("订单信息", this.orderInfo);
+        },
+        async init() {
+            await this.getOrder();
+            this.$nextTick(() => {
+                this.chart = Echarts.init(this.$refs.chart);
+                console.log("柱状图", this.orderInfo);
+                let str = this.orderInfo.map((item) => {
+                    return item.date;
+                });
+                console.log(str);
+                let option = {
+                    tooltip: {
+                        trigger: "axis",
+                        axisPointer: {
+                            type: "shadow",
+                        },
+                    },
+                    toolbox: {
+                        feature: {
+                            dataView: {show: true, readOnly: false},
+                            magicType: {show: true, type: ["line", "bar"]},
+                            restore: {show: true},
+                            saveAsImage: {show: true},
+                        },
+                    },
+                    legend: {
+                        data: [
+                            "总订单金额",
+                            "尖时段总用电量",
+                            "峰时段总用电量",
+                            "平时段总用电量",
+                            "谷时段总用电量",
+                        ],
+                    },
+                    dataZoom: {
+                        show: false,
+                        start: 0,
+                        end: 100,
+                    },
+                    grid: {
+                        left: "3%",
+                        right: "4%",
+                        bottom: "3%",
+                        containLabel: true,
+                    },
+                    xAxis: [
+                        {
+                            type: "category",
+                            boundaryGap: true,
+                            data: str,
+                            axisLine: {onZero: false},
+                        },
+                    ],
+                    animation: true,
+                    animationDuration: 2000,
+                    yAxis: [
+                        {
+                            type: "value",
+                            name: "电费",
+                            position: "left",
+                            alignTicks: true,
+                            axisLabel: {
+                                formatter: "{value} ￥",
+                            },
+                        },
+                        {
+                            type: "value",
+                            name: "电量",
+                            position: "right",
+                            alignTicks: true,
+                            axisLabel: {
+                                formatter: "{value} kwh",
+                            },
+                        },
+                    ],
+                    series: [
+                        {
+                            name: "总用电量",
+                            type: "line",
+                            data: this.orderInfo.map((item) => {
+                                return item.totalElectricity;
+                            }),
+                            symbolSize: 1,
+                            symbol: "circle",
+                            itemStyle: {
+                                normal: {
+                                    color: "rgba(252,120,48,0)",
+                                    barBorderRadius: 0,
+                                },
+                            },
+                        },
+                        {
+                            name: "总订单金额",
+                            type: "line",
+                            yAxisIndex: 0,
+                            data: this.orderInfo.map((item) => {
+                                return item.totalOrderAmount;
+                            }),
+                        },
+                        {
+                            name: "尖时段总用电量",
+                            type: "bar",
+                            yAxisIndex: 1,
+                            stack: "one",
+                            emphasis: {
+                                focus: "series",
+                                blurScope: "coordinateSystem",
+                            },
+                            data: this.orderInfo.map((item) => {
+                                return item.totalSharpUsedElectricity;
+                            }),
+                            barWidth: "35%", //柱子宽度
+                            // barGap: 1, //柱子之间间距
+                            itemStyle: {
+                                normal: {
+                                    color: "#ff4949",
+                                    opacity: 1,
+                                    barBorderRadius: 1, //柱子菱角
+                                },
+                            },
+                        },
+                        {
+                            name: "峰时段总用电量",
+                            type: "bar",
+                            yAxisIndex: 1,
+                            stack: "one",
+                            emphasis: {
+                                focus: "series",
+                                blurScope: "coordinateSystem",
+                            },
+                            data: this.orderInfo.map((item) => {
+                                return item.totalPeakUsedElectricity;
+                            }),
+                            barWidth: "35%",
+                            itemStyle: {
+                                normal: {
+                                    color: "#ffba00",
+                                    opacity: 1,
+                                    barBorderRadius: 1, //柱子菱角
+                                },
+                            },
+                        },
+                        {
+                            name: "平时段总用电量",
+                            type: "bar",
+                            yAxisIndex: 1,
+                            stack: "one",
+                            data: this.orderInfo.map((item) => {
+                                return item.totalFlatUsedElectricity;
+                            }),
+                            emphasis: {
+                                focus: "series",
+                                blurScope: "coordinateSystem",
+                            },
+                            itemStyle: {
+                                normal: {
+                                    color: "#12ce65",
+                                    opacity: 1,
+                                    barBorderRadius: 1, //柱子菱角
+                                },
+                            },
+                        },
+                        {
+                            name: "谷时段总用电量",
+                            type: "bar",
+                            yAxisIndex: 1,
+                            stack: "one",
+                            data: this.orderInfo.map((item) => {
+                                return item.totalValleyUsedElectricity;
+                            }),
+                            emphasis: {
+                                focus: "series",
+                                blurScope: "coordinateSystem",
+                            },
+                            itemStyle: {
+                                normal: {
+                                    color: "#909399",
+                                    opacity: 1,
+                                    barBorderRadius: 1, //柱子菱角
+                                },
+                            },
+                        },
+                    ],
+                };
+                this.chart.setOption(option);
+            });
+        },
+        rose() {
+            this.$nextTick(() => {
+                this.chartDom = Echarts.init(this.$refs.chartDom);
+                let option = {
+                    legend: {
+                        top: "bottom",
+                    },
+                    toolbox: {
+                        show: true,
+                        feature: {
+                            mark: {show: true},
+                            dataView: {show: true, readOnly: false},
+                            restore: {show: true},
+                            saveAsImage: {show: true},
+                        },
+                    },
+                    series: [
+                        {
+                            name: "Nightingale Chart",
+                            type: "pie",
+                            radius: [50, 250],
+                            center: ["50%", "50%"],
+                            roseType: "area",
+                            itemStyle: {
+                                borderRadius: 8,
+                            },
+                            data: [
+                                {value: 40, name: "rose 1"},
+                                {value: 38, name: "rose 2"},
+                                {value: 32, name: "rose 3"},
+                                {value: 30, name: "rose 4"},
+                                {value: 28, name: "rose 5"},
+                                {value: 26, name: "rose 6"},
+                                {value: 22, name: "rose 7"},
+                                {value: 18, name: "rose 8"},
+                            ],
+                        },
+                    ],
+                };
+                this.chartDom.setOption(option);
+            });
+        },
     },
-  },
 };
 </script>
 
 <style lang="scss" scoped>
 .box {
-  display: flex;
-  height: 100px;
-  padding: 10px;
-  /* font-size: 18px; */
-  color: #ffffff;
-  border-radius: 8px;
-  box-shadow: 0 15px 10px -11px black;
-  margin-right: 24px;
-  margin-bottom: 20px;
-  position: relative;
-  .box-image{
-    width: 60px;
-     height: 60px;
-    // background-size: 100% 100%;
-    // position: absolute;
-    // right: 0;
-    // bottom: 0;
-    // filter: drop-shadow(40px 0px gray);
-  }
-  .flex1{
-    flex: 1;
-    margin-left: 5px;
-  }
+    display: flex;
+    height: 100px;
+    padding: 10px;
+    /* font-size: 18px; */
+    color: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 15px 10px -11px black;
+    margin-right: 24px;
+    margin-bottom: 20px;
+    position: relative;
+
+    .box-image {
+        width: 60px;
+        height: 60px;
+        // background-size: 100% 100%;
+        // position: absolute;
+        // right: 0;
+        // bottom: 0;
+        // filter: drop-shadow(40px 0px gray);
+    }
+
+    .flex1 {
+        flex: 1;
+        margin-left: 5px;
+    }
 }
+
 .box-h1 {
-  /* margin-top: -14px; */
-  font-size: 47px;
+    /* margin-top: -14px; */
+    font-size: 47px;
 }
+
 .box-text {
-  margin-top: 0px;
+    margin-top: 0px;
 
 }
+
 .progress {
-  border: 3px solid #fff;
-  margin-top: 5px;
+    border: 3px solid #fff;
+    margin-top: 5px;
 }
+
 .el-row {
     margin-bottom: 20px;
+
     &:last-child {
         margin-bottom: 0;
     }
 }
+
 .el-col {
     border-radius: 4px;
 }
-
+.el-col-lg-4-8 {
+    width: 20%;
+}
 </style>
diff --git a/jsowell-ui/vue.config.js b/jsowell-ui/vue.config.js
index 6f2d63df2..91b937c42 100644
--- a/jsowell-ui/vue.config.js
+++ b/jsowell-ui/vue.config.js
@@ -35,9 +35,9 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        // target: `http://localhost:8080`,
+        target: `http://localhost:8080`,
         // 更改代理为本地地址
-        target: `http://192.168.2.3:8080`,
+        // target: `http://192.168.2.3:8080`,
         changeOrigin: true,
         pathRewrite: {
           ["^" + process.env.VUE_APP_BASE_API]: "",