Smart_platform_ui/src/views/wel/components/sales-trend.vue

<template>
  <div class="home-container">
    <el-card class="home-container__card" v-if="tenantId == 577435">
      <div style="display:flex;">
        <el-date-picker
            v-model="search.dateList"
            type="daterange"
            range-separator="-"
            size="mini"
            style="margin-right: 5px"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="query(0)"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
        <el-button size="mini" @click="query(1)">当日</el-button>
        <el-button size="mini" @click="query(2)">当月</el-button>
      </div>
      <el-table
          :data="tableData"
          size="mini"
          height="300"
          style="width: 100%">
        <el-table-column
            prop="orderNo"
            align="center"
            show-overflow-tooltip
            label="订单号">
        </el-table-column>
        <el-table-column
            prop="corpsName"
            align="center"
            show-overflow-tooltip
            label="客户名称">
        </el-table-column>
        <el-table-column
            prop="businesDate"
            align="center"
            show-overflow-tooltip
            label="订单日期">
        </el-table-column>
        <el-table-column
            prop="orderStatus"
            align="center"
            show-overflow-tooltip
            label="订单状态">
          <template slot-scope="{row}">
            <span v-for="item in orderStatusList" :style="{color: item.colour}" v-if="item.dictValue == row.orderStatus">{{row.orderStatus}}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="createUserName"
            align="center"
            show-overflow-tooltip
            label="制单人">
        </el-table-column>
        <el-table-column
            prop="documenterName"
            align="center"
            show-overflow-tooltip
            label="跟单人">
        </el-table-column>
        <el-table-column
            prop="buyerName"
            align="center"
            show-overflow-tooltip
            label="采购员">
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="home-container__card" v-else>
      <div v-if="sysType !== 5">
        <!--<div class="title">-->
        <!--  <span>-->
        <!--    销售趋势-->
        <!--  </span>-->
        <!--  <span>-->
        <!--    <i-->
        <!--      class="el-icon-refresh-right"-->
        <!--      style="cursor: pointer;font-size:20px"-->
        <!--      @click="refresh"-->
        <!--    ></i>-->
        <!--  </span>-->
        <!--</div>-->
              <index-card
                  title="销售趋势"
                  iconName="el-icon-s-fold"
                  style="height:400px;margin-bottom: 30px"
              >
                  <div slot="select">
                      <el-date-picker
                          v-model="annual3"
                          type="year"
                          size="mini"
                          placeholder="选择年"
                          value-format="yyyy"
                          style="margin-right:10px;margin-bottom: -20px"
                          @change="commoDity2Datafun"
                      >
                      </el-date-picker>
                  </div>

                  <div slot="content" style="height:350px" id="commoDity2"></div>
              </index-card>

        <!--<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>-->
      </div>
      <div v-if="sysType === 5">
        <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
            id="polylineDatas"
            ref="polylineData"
            style="width:60vw;height:33vh"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {dateFormat, getYearDate} from "@/util/date";
import {salesList, salesTrend, xinsalaryDataChain} from "@/api/wel";
import indexCard from "../components/card.vue";
import butCard from "../components/butCard.vue";
export default {
  name: "basicContainer",
    components: {
        indexCard,
        butCard
    },
  props: {
    sysType: Number
  },
  data() {
    return {
      loading: false,
      annual: "",
      search:{},
      tradeType: null,
      tenantId: this.$store.getters.userInfo.tenant_id,
      moneyList: [],
      tableData:[],
      orderStatusList:[],
        annual3:'',
        amountList2:[],
        numberList2:[],
    };
  },
  created() {
    this.annual = getYearDate().toString();
    this.getSysType();
    this.getWorkDicts("order_status").then(res => {
      this.orderStatusList = res.data.data
    });
      this.annual3 = getYearDate().toString();
  },
  mounted() {
    this.init();
    this.commoDity2Datafun()
  },
  methods: {
    query(type){
      const date = new Date();
      if (type == 1){
        this.$set(this.search,"dateList",[`${dateFormat(new Date(),"yyyy-MM-dd")} 00:00:00`,`${dateFormat(new Date(),"yyyy-MM-dd")} 23:59:59`])
      }
      if (type == 2){
        this.$set(this.search,"dateList",[
          `${dateFormat(new Date(date.getFullYear(), date.getMonth(), 1),"yyyy-MM-dd")} 00:00:00`,
          `${dateFormat(new Date(date.getFullYear(), date.getMonth() + 1, 0),"yyyy-MM-dd")} 23:59:59`
        ])
      }
      salesList({...this.search}).then(res=>{
        this.tableData = res.data.data
      })
    },
    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();
        });
    },
    refresh() {
      this.init();
    },
    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
          }
        ]
      });
    },
      // 获取echarts 表的数据
      commoDity2Datafun() {
          xinsalaryDataChain({
              year:Number(this.annual3)
          }).then(res=>{
              this.amountList2 = res.data.data.amount
              this.numberList2 = res.data.data.number
              this.commoDity2()
          })
      },
      commoDity2() {
          // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
          let myChart = this.$echarts.init(document.getElementById("commoDity2"));
          // 绘制图表
          myChart.setOption({
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'cross',
                      crossStyle: {
                          color: '#999'
                      }
                  }
              },
              toolbox: {
              },
              legend: {
                  data: ['数量', '金额']
              },
              xAxis: [
                  {
                      type: 'category',
                      data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月','十二月'],
                      axisPointer: {
                          type: 'shadow'
                      }
                  }
              ],
              grid: {
                  left: "10%",
                  right: "10%",
                  bottom: "3%",
                  containLabel: true
              },
              yAxis: [
                  {
                      type: 'value',
                      name: '数量(条)',
                      min: 0,
                      axisLine:{
                          show:true,
                          lineStyle: {
                              color: "#5266bc",//y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
                          },
                      },
                      axisLabel: {
                          formatter: '{value}'
                      }
                  },
                  {
                      type: 'value',
                      name: '金额(元)',
                      min: 0,
                      axisLine:{
                          show:true,
                          lineStyle: {
                              color: "#98c46d",//y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
                          },
                      },
                      axisLabel: {
                          formatter: '{value}',
                          // textStyle: {
                          //     color: "#000",//Y轴内容文字颜色
                          // },
                      }
                  }
              ],
              series: [
                  {
                      name: '数量',
                      type: 'bar',
                      yAxisIndex: 0,
                      tooltip: {
                          valueFormatter: function (value) {
                              return value + ' 条';
                          }
                      },
                      data: this.numberList2
                  },
                  {
                      name: '金额',
                      type: 'bar',
                      yAxisIndex: 1,
                      tooltip: {
                          valueFormatter: function (value) {
                              return value + ' 元';
                          }
                      },
                      data: this.amountList2
                  },
              ]
          });


      },

  }
};
</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;
  }
}
.content {
  display: flex;
  flex-direction: column;
  &-year {
    display: flex;
    justify-content: right;
  }
}
</style>