|
@@ -0,0 +1,344 @@
|
|
|
+<template>
|
|
|
+ <div class="home-container">
|
|
|
+ <el-card class="home-container__card">
|
|
|
+ <div class="title">
|
|
|
+ <span>
|
|
|
+ 实时数据
|
|
|
+ </span>
|
|
|
+ <span class="right">
|
|
|
+ <div class="right_but">
|
|
|
+ <div
|
|
|
+ class="right_but_left"
|
|
|
+ :class="{ right_but_active: isActive }"
|
|
|
+ @click="inDay"
|
|
|
+ >
|
|
|
+ 本日
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="right_but_right"
|
|
|
+ :class="{ right_but_active: !isActive }"
|
|
|
+ @click="inMoon"
|
|
|
+ >
|
|
|
+ 本月
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <i
|
|
|
+ class="el-icon-refresh-right"
|
|
|
+ style="cursor: pointer;font-size:20px;line-height: 15px;"
|
|
|
+ @click="refresh"
|
|
|
+ ></i>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;justify-content: center;">
|
|
|
+ <div class="content" v-if="sysType !== 5" v-loading="loading">
|
|
|
+ <div class="content-item">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-title card-title1">
|
|
|
+ <span>
|
|
|
+ 报
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="card-content">
|
|
|
+ <span class="card-content-num">{{ data1.offerNumber }}</span>
|
|
|
+ <span class="card-content-text">报价订单</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="divider" />
|
|
|
+ <div class="content-item">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-title card-title1">
|
|
|
+ <span>
|
|
|
+ 销
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="card-content">
|
|
|
+ <span class="card-content-num">{{ data1.sellNumber }}</span>
|
|
|
+ <span class="card-content-text">销售订单</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="divider" />
|
|
|
+ <div class="content-item">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-title card-title2">
|
|
|
+ <span>
|
|
|
+ 采
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="card-content">
|
|
|
+ <span class="card-content-num">{{ data1.purchaseNumber }}</span>
|
|
|
+ <span class="card-content-text">采购订单</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="divider" />
|
|
|
+ <div class="content-item">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-title card-title3">
|
|
|
+ <span>
|
|
|
+ 发
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="card-content">
|
|
|
+ <span class="card-content-num">{{ data2.sellNumber }}</span>
|
|
|
+ <span class="card-content-text">发货重量</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="divider" />
|
|
|
+ <div class="content-item">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-title card-title4">
|
|
|
+ <span>
|
|
|
+ 收
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="card-content">
|
|
|
+ <span class="card-content-num">{{ data2.purchaseNumber }}</span>
|
|
|
+ <span class="card-content-text">收货重量</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content" v-if="sysType === 5" v-loading="loading">
|
|
|
+ <div class="content-item">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-title card-title1">
|
|
|
+ <span>
|
|
|
+ 主
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="card-content">
|
|
|
+ <span class="card-content-num">1</span>
|
|
|
+ <span class="card-content-text">主营业务</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="divider" />
|
|
|
+ <div class="content-item">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-title card-title2">
|
|
|
+ <span>
|
|
|
+ 已
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="card-content">
|
|
|
+ <span class="card-content-num">1</span>
|
|
|
+ <span class="card-content-text">已结(条)</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="divider" />
|
|
|
+ <div class="content-item">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-title card-title3">
|
|
|
+ <span>
|
|
|
+ 未
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="card-content">
|
|
|
+ <span class="card-content-num">1</span>
|
|
|
+ <span class="card-content-text">未结(条)</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { realTimeData, shipRealTimeData } from "@/api/wel";
|
|
|
+export default {
|
|
|
+ name: "basicContainer",
|
|
|
+ props: {
|
|
|
+ sysType: Number
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isActive: true,
|
|
|
+ loading: false,
|
|
|
+ data1: {},
|
|
|
+ data2: {},
|
|
|
+ tradeType: null
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getSysType();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ this.getrealTimeData();
|
|
|
+ this.getshipRealTimeData();
|
|
|
+ },
|
|
|
+ refresh() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ 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";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getrealTimeData() {
|
|
|
+ this.loading = true;
|
|
|
+ realTimeData({ tradeType: this.tradeType })
|
|
|
+ .then(res => {
|
|
|
+ this.data1 = res.data.data;
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getshipRealTimeData() {
|
|
|
+ this.loading = true;
|
|
|
+ shipRealTimeData({ tradeType: this.tradeType})
|
|
|
+ .then(res => {
|
|
|
+ this.data2 = res.data.data;
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ inDay() {
|
|
|
+ this.isActive = true;
|
|
|
+ this.loading = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.loading = false;
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ inMoon() {
|
|
|
+ this.isActive = false;
|
|
|
+ this.loading = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.loading = false;
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.home-container {
|
|
|
+ padding: 0px 5px 5px 5px;
|
|
|
+ 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;
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ &_but {
|
|
|
+ margin-right: 10px;
|
|
|
+ border: 1px solid #409eff;
|
|
|
+ width: 80px;
|
|
|
+ border-radius: 3px;
|
|
|
+ display: flex;
|
|
|
+ &_left {
|
|
|
+ width: 40px;
|
|
|
+ text-align: center;
|
|
|
+ color: #409eff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ &_right {
|
|
|
+ width: 40px;
|
|
|
+ text-align: center;
|
|
|
+ color: #409eff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ &_active {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #409eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 15vh;
|
|
|
+ width: 80vw;
|
|
|
+ .divider {
|
|
|
+ display: block;
|
|
|
+ height: 0px;
|
|
|
+ width: 100%;
|
|
|
+ border-top: 1px dashed #dcdfe6;
|
|
|
+ }
|
|
|
+ &-item {
|
|
|
+ margin-left: 1vw;
|
|
|
+ .card {
|
|
|
+ width: 130px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ &-title {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 50%;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-title1 {
|
|
|
+ color: #037fe1;
|
|
|
+ background-color: rgba(3, 127, 225, 0.15);
|
|
|
+ }
|
|
|
+ &-title2 {
|
|
|
+ color: #ffa21e;
|
|
|
+ background-color: rgba(255, 162, 30, 0.15);
|
|
|
+ }
|
|
|
+ &-title3 {
|
|
|
+ color: #fb5b60;
|
|
|
+ background-color: rgba(251, 91, 96, 0.15);
|
|
|
+ }
|
|
|
+ &-title4 {
|
|
|
+ color: #42bc6f;
|
|
|
+ background-color: rgba(66, 188, 111, 0.15);
|
|
|
+ }
|
|
|
+ &-content {
|
|
|
+ padding-left: 1vw;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ &-num {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ &-text {
|
|
|
+ color: #909399;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|