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