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

<template>

    <div>
        <h1>概况</h1>
        <hr/>
        <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">
                    <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 :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 :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>

</template>
<script>
import Echarts from "echarts";
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',

            }]
        };
    }, //图表实例
    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);
            });
        },
        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;
    }
}

.box-h1 {
    /* margin-top: -14px; */
    font-size: 47px;
}

.box-text {
    margin-top: 0px;

}

.progress {
    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>