yf-admin-ui/src/views/wel/components/losAssembly/losrealtime.vue

<template>
  <div class="container-losrealtime">
    <div class="home-container" style="padding: 0px 5px 5px 5px;">
      <el-card class="home-container__card">
        <div class="title">
          <span>
            {{ $t("btn118n.businessReminder") }}
          </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="结束日期" value-format="yyyy-MM-dd" style="margin-right:10px;width:240px" :clearable="false">
            </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;">
          <div class="content" v-loading="loading">
            <div class="content-item">
              <div class="card" @click.stop="remindDialog('开船提醒', 1)">
                <div class="card-content">
                  <span class="card-content-num" style="color: #F56C6C;">{{ remind.sailRemind }}</span>
                  <span class="card-content-text">{{ $t("sea118n.onBoard") }}</span>
                </div>
              </div>
            </div>
            <div class="divider" />
            <div class="content-item">
              <div class="card" @click.stop="remindDialog('到港提醒', 2)">
                <div class="card-content">
                  <span class="card-content-num" style="color: #F56C6C;">{{ remind.arrivalReminder }}</span>
                  <span class="card-content-text">{{ $t("sea118n.onArrival") }}</span>
                </div>
              </div>
            </div>
            <div class="divider" />
            <div class="content-item">
              <div class="card" @click.stop="remindDialog('截港提醒', 3)">
                <div class="card-content">
                  <span class="card-content-num" style="color: #F56C6C;">{{ remind.cutOffPortRemind }}</span>
                  <span class="card-content-text">{{ $t("sea118n.portCutofftime") }}</span>
                </div>
              </div>
            </div>
            <div class="divider" />
            <div class="content-item">
              <div class="card" @click.stop="remindDialog('截单提醒', 4)">
                <div class="card-content">
                  <span class="card-content-num" style="color: #F56C6C;">{{ remind.cutSingleRemind }}</span>
                  <span class="card-content-text">{{ $t("sea118n.docCutofftime") }}</span>
                </div>
              </div>
            </div>
            <div class="divider" />
            <div class="content-item">
              <div class="card" @click.stop="remindDialog('开船未付', 5)">
                <div class="card-content">
                  <span class="card-content-num" style="color: #F56C6C;">{{ remind.sailUnpaidRemind }}</span>
                  <span class="card-content-text">{{ $t("btn118n.needDebit") }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <el-dialog :title="remindTile" :visible.sync="dialogVisible" width="50%" append-to-body>
        <span v-if="dialogVisible">
          <avue-crud
            :table-loading="loading"
            :option="option"
            :data="dataList"
            @on-load="onLoad"
            :page.sync="page"
            @current-change="currentChange"
            @size-change="sizeChange"
          >
            <template slot="shortName" slot-scope="{ row }">
              <span style="color: #1e9fff;cursor: pointer;" @click="rowEdit(row)">{{ row.shortName }}</span>
            </template>
            <template slot="mblno" slot-scope="{ row }">
              <span style="color: #1e9fff;cursor: pointer;" @click="rowEdit(row)">{{ row.mblno }}</span>
            </template>
          </avue-crud>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="mini">关 闭</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="home-container" style="padding: 0px 5px 5px 0px;">
      <el-card class="home-container__card">
        <div class="title">
          <span>
            {{ $t("btn118n.timeData") }}
          </span>
          <span class="right">
            <div class="right_but">
              <div class="right_but_left" :class="{ right_but_active: isActive == 1 }" @click="inDay">
                {{ $t("btn118n.theDay") }}
              </div>
              <div class="right_but_right" :class="{ right_but_active: isActive == 2 }" @click="inMoon">
                {{ $t("btn118n.theMonth") }}
              </div>
            </div>
            <el-date-picker
              v-model="realDate"
              type="daterange"
              size="mini"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              style="margin-right:10px;width:240px"
              :clearable="false"
            >
            </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;">
          <div class="content" v-loading="loading">
            <div class="content-item">
              <div class="card">
                <div class="card-content">
                  <span class="card-content-num">{{ data.HYCK }}</span>
                  <span class="card-content-text">{{ $t("btn118n.export") }}</span>
                </div>
              </div>
            </div>
            <div class="divider" />
            <div class="content-item">
              <div class="card">
                <div class="card-content">
                  <span class="card-content-num">{{ data.HYJK }}</span>
                  <span class="card-content-text">{{ $t("btn118n.import") }}</span>
                </div>
              </div>
            </div>
            <div class="divider" v-if="tenantId == '128478' || tenantId == '762420'" />
            <div class="content-item" v-if="tenantId == '128478' || tenantId == '762420'">
              <div class="card">
                <div class="card-content">
                  <span class="card-content-num">{{ data.OWN ? data.OWN : 0 }}</span>
                  <span class="card-content-text">{{ $t("btn118n.owGet") }}</span>
                </div>
              </div>
            </div>
            <div class="divider" v-if="tenantId == '128478' || tenantId == '762420'" />
            <div class="content-item" v-if="tenantId == '128478' || tenantId == '762420'">
              <div class="card">
                <div class="card-content">
                  <span class="card-content-num">{{ data.OWF ? data.OWF : 0 }}</span>
                  <span class="card-content-text">{{ $t("btn118n.owRelease") }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { defaultDate2, defaultDate3 } from "@/util/date";
import { businessSum, arrivalReminder, arrivalReminderList, realTimeData, shipRealTimeData } from "@/api/wel";
export default {
  name: "basicContainer",
  props: {
    sysType: Number
  },
  data() {
    return {
      tenantId: this.$store.getters.userInfo.tenant_id,
      type: null,
      remindTile: null,
      dialogVisible: false,
      remind: 0,
      isActive: 1,
      loading: false,
      realDate: [],
      data: {},
      saberTenantId: "",
      dataList: [],
      option: {
        header: false,
        menu: false,
        column: [
          {
            label: "客户名称",
            prop: "shortName",
            overHidden: true
          },
          {
            label: "提单号",
            prop: "mblno",
            overHidden: true
          },
          {
            label: "ETD",
            prop: "etd",
            overHidden: true
          },
          {
            label: "ETA",
            prop: "eta",
            overHidden: true
          },
          {
            label: "截港日期",
            prop: "cyReturnTime",
            overHidden: true
          },
          {
            label: "截单日期",
            prop: "cyTrailerTime",
            overHidden: true
          }
        ]
      },
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      }
    };
  },
  created() {
    this.saberTenantId = JSON.parse(localStorage.getItem("saber-tenantId")).content;
    this.realDate = defaultDate2();
  },
  mounted() {
    this.businessSumfun();
    this.arrivalReminder();
  },
  methods: {
    remindDialog(name, type) {
      this.dataList = [];
      this.page.total = 0;
      this.type = type;
      this.remindTile = name;
      this.dialogVisible = true;
    },
    rowEdit(row) {
      if (row.businessType == "SE") {
        if (this.$store.getters.seaFEStatus) {
          this.$alert("海运出口页面已存在,请关闭海运出口再进行操作", "温馨提示", {
            confirmButtonText: "确定",
            type: "warning",
            callback: action => {}
          });
        } else {
          this.$router.push({
            path: `/iosBasicData/SeafreightExportF/bills/index`,
            query: {
              id: row.id
            }
          });
          this.dialogVisible = false;
        }
      }
      if (row.businessType == "SI") {
        if (this.$store.getters.OceanFIStatus) {
          this.$alert("海运进口页面已存在,请关闭海运进口再进行操作", "温馨提示", {
            confirmButtonText: "确定",
            type: "warning",
            callback: action => {}
          });
        } else {
          this.$router.push({
            path: `/iosBasicData/OceanFreightImport/bills/index`,
            query: {
              id: row.id
            }
          });
          this.dialogVisible = false;
        }
      }
    },
    onLoad(page, params = {}) {
      let obj = {
        type: this.type
      };
      this.loading = true;
      arrivalReminderList(page.currentPage, page.pageSize, obj)
        .then(res => {
          this.dataList = res.data.data.records;
          this.page.total = res.data.data.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    // 获取数据
    businessSumfun() {
      businessSum({
        dateStart: this.realDate[0] + " 00:00:00",
        dateEnd: this.realDate[1] + " 23:59:59"
      }).then(res => {
        this.data = res.data.data;
      });
    },
    arrivalReminder() {
      arrivalReminder().then(res => {
        this.remind = res.data.data;
      });
    },
    init() {
      if (this.realDate == null) {
        return this.$message.error("请选择日期");
      }
      this.businessSumfun();
      this.arrivalReminder();
    },
    refresh() {
      this.init();
    },
    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 {
  box-sizing: border-box;
  height: 100%;
  width: 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: 100%;

  .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;
        }
      }
    }
  }
}

.container-losrealtime {
  display: flex;
}
</style>