|
@@ -0,0 +1,172 @@
|
|
|
+<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>
|