Smart_platform_ui/src/views/wel/components/dawotezhexian.vue

<template>
    <div class="home-container">
        <el-card class="home-container__card">
            <div class="title">
          <span>
            销售趋势
          </span>
                <span>
            <i
                class="el-icon-refresh-right"
                style="cursor: pointer;font-size:20px"
                @click="refresh"
            ></i>
          </span>
            </div>

            <div class="content" v-loading="loading">
                <div class="content-year">
                    <el-date-picker
                        v-model="annual"
                        type="year"
                        size="mini"
                        placeholder="选择年"
                        value-format="yyyy"
                        style="margin-right:10px"
                        @change="getsalesTrend"
                    />
                </div>

                <div
                    id="polylineData"
                    ref="polylineData"
                    style="width:55vw;height:33vh"
                />
            </div>
        </el-card>


    </div>
</template>

<script>
import {salesTrend} from "@/api/wel";
import {getYearDate} from "@/util/date";

export default {
    data(){
        return {
            loading: false,
            annual: "",
            tradeType:''
        }
    },
    created() {
        this.annual = getYearDate().toString();
        this.getSysType();
    },
    mounted() {
        this.init();
    },
    methods:{
        refresh() {
            this.init();
        },
        init() {
            if (this.tradeType == null) {
                return
            }else {
                this.getsalesTrend();
            }
        },
        getSysType() {
            const sysType = localStorage.getItem("sysitemType");
            if (sysType == 6) {
                this.tradeType = "JXS";
            } else if (sysType == 5) {
                this.tradeType = "SW";
            } else if (sysType == 4) {
                this.tradeType = "CK";
            } else if (sysType == 3) {
                this.tradeType = "JK";
            } else if (sysType == 2) {
                this.tradeType = "GN";
            } else if (sysType == 1) {
                this.tradeType = "XX";
            } else if (sysType == 999) {
                this.tradeType = "ADMIN";
            }
        },
        getsalesTrend() {
            this.loading = true;
            this.moneyList = [];
            salesTrend({
                tradeType: this.tradeType,
                billType: "XS",
                annual: this.annual
            })
                .then(res => {
                    res.data.data.forEach(e => {
                        this.moneyList.push(Number(e.money));
                    });
                })
                .finally(() => {
                    this.loading = false;
                    this.polylineData();
                });
        },
        polylineData() {
            let polylineData = this.$echarts.init(
                document.getElementById("polylineData")
            );
            polylineData.setOption({
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "line"
                    }
                },
                xAxis: {
                    type: "category",
                    data: [
                        "一月",
                        "二月",
                        "三月",
                        "四月",
                        "五月",
                        "六月",
                        "七月",
                        "八月",
                        "九月",
                        "十月",
                        "十一月",
                        "十二月"
                    ]
                },
                yAxis: {
                    type: "value"
                },
                series: [
                    {
                        data: this.moneyList,
                        type: "line",
                        smooth: true
                    }
                ]
            });
        },

    }
}
</script>


<style lang="scss" scoped>
.home-container {
    padding: 0px 5px 5px 0px;
    box-sizing: border-box;
    height: 100%;
    ::v-deep .el-card__body {
        padding: 10px 15px;
        font-size: 14px;
    }
    &__card {
        width: 100%;
        height: 100%;
    }
    .title {
        display: flex;
        justify-content: space-between;
    }
}
</style>