|
@@ -0,0 +1,239 @@
|
|
|
+<template>
|
|
|
+ <div class="home-container">
|
|
|
+ <el-card class="home-container__card" v-if="tenantId != 577435 && sysType !== 5">
|
|
|
+ <div style="display:flex;">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="search.businesDateList"
|
|
|
+ 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="ordNo"
|
|
|
+ align="center"
|
|
|
+ show-overflow-tooltip
|
|
|
+ label="订单号">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="customerName"
|
|
|
+ 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="status"
|
|
|
+ align="center"
|
|
|
+ show-overflow-tooltip
|
|
|
+ label="订单状态">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span v-for="item in dingdanzhuangtai" :style="{color: item.colour}" v-if="item.dictKey == row.status">{{item.dictValue}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="actualPaymentStatus"
|
|
|
+ align="center"
|
|
|
+ show-overflow-tooltip
|
|
|
+ label="支付状态">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span v-for="item in orderStatusList" :style="{color: item.colour}" v-if="item.dictKey == row.actualPaymentStatus">{{item.dictValue}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="salerName"
|
|
|
+ align="center"
|
|
|
+ show-overflow-tooltip
|
|
|
+ label="业务员">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {dateFormat, getYearDate} from "@/util/date";
|
|
|
+import {xinsalesList, salesTrend} from "@/api/wel";
|
|
|
+export default {
|
|
|
+ name: "basicContainer",
|
|
|
+ props: {
|
|
|
+ sysType: Number
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ annual: "",
|
|
|
+ search:{},
|
|
|
+ tradeType: null,
|
|
|
+ tenantId: this.$store.getters.userInfo.tenant_id,
|
|
|
+ moneyList: [],
|
|
|
+ tableData:[],
|
|
|
+ orderStatusList:[],
|
|
|
+ dingdanzhuangtai:[]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.annual = getYearDate().toString();
|
|
|
+ this.getSysType();
|
|
|
+ this.getWorkDicts("settlement_Status").then(res => {
|
|
|
+ console.log(res)
|
|
|
+ this.orderStatusList = res.data.data
|
|
|
+ });
|
|
|
+ this.getWorkDicts("sales_Status").then(res => {
|
|
|
+ console.log(res)
|
|
|
+ this.dingdanzhuangtai = res.data.data
|
|
|
+ });
|
|
|
+ this.query(1)
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ query(type){
|
|
|
+ const date = new Date();
|
|
|
+ if (type == 1){
|
|
|
+ this.$set(this.search,"businesDateList",[`${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,"businesDateList",[
|
|
|
+ `${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`
|
|
|
+ ])
|
|
|
+ }
|
|
|
+
|
|
|
+ xinsalesList({...this.search}).then(res=>{
|
|
|
+ this.tableData = res.data.data.records
|
|
|
+ })
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</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>
|