达沃特首页表格

src/views/wel/components/dawotezhexian.vue

@@ -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>

src/views/wel/home/defaultPage.vue

@@ -9,6 +9,8 @@
       <xinsales-reached class="item4" :sysType="sysType" v-if="sysType==11 && $store.getters.userInfo.tenant_id !== 577435"/>
 
     <sales-trend :class="sysType!=5 && sysType!=4?'item3':'item5'" :sysType="sysType" v-if="(sysType!=4||roleName!='采购') && sysType != 2 && sysType != 6"/>
+    <!--达沃特首页右边表格-->
+      <dawotezhexian class="item5" v-if="sysType == 2 && $store.getters.userInfo.tenant_id == 681169"></dawotezhexian>
       <!--新家的表格-->
       <xinsales-trend class="item5" :sysType="sysType" v-if="sysType==11"/>
 
@@ -27,6 +29,7 @@ import salesTrend from "../components/sales-trend";
 import xinsalesTrend from "../components/xinsales-trend.vue";
 import chargeToday from "../components/charge-today";
 import payToday from "../components/pay-today";
+import dawotezhexian from '../components/dawotezhexian.vue'
 export default {
   name: "wel",
   data() {
@@ -49,7 +52,8 @@ export default {
     chargeToday,
     payToday,
       xinsalesReached,
-      xinsalesTrend
+      xinsalesTrend,
+      dawotezhexian
   },
   computed: {},
   methods: {}