ShippingService_WebApp/src/layout/Header.vue

<template>
  <div class="header">
    <div class="left">
      <!-- <img class="first" src="../assets/three.png" alt="" /> -->
      <div class="shu"></div>
      <div class="cf fs20 mr30">
        欢迎来到 {{ shippingCompany }} 智慧远程海事管理系统
      </div>
      <el-select
        @change="selectCompany"
        v-model="store.state.currentCompany"
        value-key="key"
        style="width: 240px; text-align: center"
        v-if="store.state.isSuperuser == 1"
      >
        <el-option
          v-for="item in store.state.companySelect"
          :key="item.key"
          :label="item.value"
          :value="item"
        />
      </el-select>
      <!-- <img class="logo" src="../assets/white-logo.png" alt="" />
      <div class="ml20" style="color: #fff; font-size: 18px">
        version：{{ timelineData[0]?.version }}
      </div> -->
    </div>
    <div class="right">
      <!-- <div
        @click="dialogVisible = true"
        class="pointer"
        style="padding-top: 6px"
      >
        <el-badge
          :hidden="isNewMessage.length == 0"
          :value="isNewMessage.length"
          class="mr30"
        >
          <el-icon :size="size" color="#00a9dc">
            <BellFilled />
          </el-icon>
        </el-badge>
      </div> -->
      <img class="user-icon" src="../assets/user.png" alt="" />
      <div class="user">{{ loginName }}</div>
      <!-- <el-popover placement="bottom" trigger="hover" :width="280">
        <div
          style="
            width: 100%;
            height: 60vh;
            overflow-y: auto;
            padding-right: 10px;
            margin-right: 10px;
          "
        >
          <el-timeline>
            <el-timeline-item
              v-for="item in timelineData"
              center
              :timestamp="item.timer"
              placement="top"
              :key="item"
            >
              <div class="log-card">
                <p style="margin-bottom: 10px">Version: {{ item.version }}</p>
                <div
                  style="margin-bottom: 5px; font-size: 12px"
                  v-for="(item1, index) in item.remarks"
                  :key="item1"
                >
                  {{ index + 1 }}. {{ item1.text }}
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>

        <template #reference>
          <el-badge value="new">
            <div class="log">新功能日志</div>
          </el-badge>
        </template>
      </el-popover> -->
      <div class="quit" @click="quit">[退出]</div>
    </div>
    <el-dialog v-model="dialogVisible" title="拍照通知" width="30%">
      <el-table :data="tableData[currentTableIndex - 1]" border>
        <el-table-column align="center" type="index" />
        <el-table-column align="center" property="shipName" label="船名" />
        <el-table-column align="center" property="status" label="状态" />
      </el-table>
      <el-pagination
        style="text-align: right; margin-top: 20px"
        @current-change="pageChange"
        background
        layout="prev, pager, next"
        :total="total"
      ></el-pagination>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import router from "../router";
import store from "../store";
import api from "../apis/fetch";
import { onMounted, ref } from "vue";
import { BellFilled } from "@element-plus/icons";
import _ from "lodash";
// import { AnonymousLogin, tcb } from "../apis/cloudLogin";

// const db = tcb.database();
// const v = db.collection("huihenduo_versions");
// const __ = db.command;
let userName = localStorage.staffName;
function quit() {
  localStorage.clear();
  store.state.isSuperuser = 0;
  store.state.currentCompany = "";
  store.commit("changeLogin", false);
  router.push({ path: "/login" });
}
let dialogVisible = ref(false);
let isNewMessage = ref([]);
function isWithinTime(t0 = new Date()) {
  let t1 = _.cloneDeep(t0);
  let t2 = _.cloneDeep(t0);
  t1.setHours(8);
  t1.setMinutes(30);
  t1.setSeconds(0);
  t2.setHours(9);
  t2.setMinutes(30);
  t2.setSeconds(0);
  let t00 = t0.getTime();
  let t11 = t1.getTime();
  let t22 = t2.getTime();
  return t00 > t11 && t00 < t22;
}
function spArr(arr, num) {
  //arr是你要分割的数组，num是以几个为一组
  let newArr = []; //首先创建一个新的空数组。用来存放分割好的数组
  for (let i = 0; i < arr.length; ) {
    //注意：这里与for循环不太一样的是，没有i++
    newArr.push(arr.slice(i, (i += num)));
  }
  return newArr;
}
let tableData = ref([]);
let currentTableIndex = ref(1);
let total = ref(0);
function pageChange(c) {
  currentTableIndex.value = c;
}
async function getUnphotographNotice() {
  let { data } = await api.getUnphotographNotice();
  if (data.status == 0) {
    for (let i of data.result) {
      isNewMessage.value.push({
        shipName: i,
        status: "未拍照",
      });
    }
    total.value = isNewMessage.value.length;
    tableData.value = spArr(isNewMessage.value, 10);
  } else {
    isNewMessage.value = 0;
  }
}
let shippingCompany = ref("");
let loginName = ref("");
onMounted(() => {
  // getUnphotographNotice();
  // setInterval(async () => {
  //   if (isWithinTime()) {
  //     getUnphotographNotice();
  //   }
  // }, 2 * 60 * 1000);
  // cloudLogin();
  shippingCompany.value = localStorage.shippingCompany;
  loginName.value = localStorage.loginName;
  if (localStorage.isSuperuser == 1 && store.state.companySelect.length == 0) {
    store.dispatch("getShippingCompanySelect", localStorage.manageId);
  }
});
let timelineData = ref([]);
async function cloudLogin() {
  await AnonymousLogin();
  getAbledVersions();
}
async function getAbledVersions() {
  let { data } = await v
    .aggregate()
    .match({ deleted: __.neq(true) })
    .sort({
      createTime: -1,
    })
    .limit(10)
    .end();
  timelineData.value = data;
}

const size = 20;

function selectCompany(e) {
  localStorage.currentCompany = JSON.stringify(e);
  router.go(0);
}
</script>
<style scoped>
.header {
  width: 100%;
  height: 60px;
  background: #212029;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left,
.right {
  display: flex;
  align-items: center;
}

.first {
  width: 22px;
  height: 20px;
  margin: 0 22px;
}

.shu {
  width: 1px;
  height: 60px;
  background: #101015;
  margin-right: 22px;
}

.logo {
  width: 120px;
  height: 40px;
}

.title {
  font-size: 21px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  margin-left: 26px;
}

.user-icon {
  width: 18px;
  height: 18px;
  margin-right: 16px;
}

.user,
.quit,
.log {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  margin-right: 16px;
}

.log {
  margin-right: 4px;
}

.quit {
  margin-left: 26px;
}

.log-card p {
  font-size: 10px;
}
</style>