Smart_platform_ui/src/views/wel/components/realtime-data.vue

<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 == 1 }"
              @click="inDay"
            >
              本日
            </div>
            <div
              class="right_but_right"
              :class="{ right_but_active: isActive == 2 }"
              @click="inMoon"
            >
              本月
            </div>
          </div>
          <el-date-picker
            v-model="realDate"
            type="daterange"
            size="mini"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="margin-right:10px;width:240px"
          >
          </el-date-picker>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-search"
            style="margin-right:10px;"
            @click="search"
            circle
          ></el-button>
          <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 { defaultDate2, defaultDate3 } from "@/util/date";
import { realTimeData, shipRealTimeData } from "@/api/wel";
export default {
  name: "basicContainer",
  props: {
    sysType: Number
  },
  data() {
    return {
      isActive: 1,
      loading: false,
      realDate: [],
      data1: {},
      data2: {},
      tradeType: null
    };
  },
  created() {
    this.getSysType();
    this.realDate = defaultDate2();
  },
  mounted() {
    this.getrealTimeData();
    this.getshipRealTimeData();
  },
  methods: {
    init() {
      if (this.realDate == null) {
        return this.$message.error("请选择日期");
      }
      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";
      } else if (sysType == 999) {
        this.tradeType = "ADMIN";
      }
    },
    getrealTimeData() {
      this.loading = true;
      realTimeData({
        tradeType: this.tradeType,
        orderStartDate: this.realDate[0],
        orderEndDate: this.realDate[1]
      })
        .then(res => {
          this.data1 = res.data.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getshipRealTimeData() {
      this.loading = true;
      shipRealTimeData({
        tradeType: this.tradeType,
        orderStartDate: this.realDate[0],
        orderEndDate: this.realDate[1]
      })
        .then(res => {
          this.data2 = res.data.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    inDay() {
      this.isActive = 1;
      this.realDate = defaultDate2();
      this.init();
    },
    inMoon() {
      this.isActive = 2;
      this.realDate = defaultDate3();
      this.init();
    },
    search() {
      this.isActive = 3;
      this.init();
    }
  }
};
</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;
          border-right: 1px solid #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>