zjugis_OA/client/src/views/OaSystem/oaLayout/header.vue

<template>
  <div class="header">
    <div class="header-left">
      <img src="@/assets/imgs/OA/zdww.png" alt="" />
      <p>{{ titleName }} </p>
      <div class="tips">
        <div class="left">
          <img src="../../../assets/imgs/OA/notify_icon.png" />
          <div>
            <ul :class="`scroll_ani${dailyNotifyList.length}`">
              <li v-for="(item, index) in dailyNotifyList" :key="index" @click="onLookDetail(item)">
                {{ item['content'] }}
              </li>
            </ul>
          </div>
        </div>
        <div class="more" @click="toMoreHandle">更多<span class="arrow">></span></div>
      </div>
    </div>
    <div class="header-right">
      <Weather />
      <div class="hx"></div>
      <!-- <div class="message">
        <el-badge :value="3" class="item">
          <img src="@/assets/imgs/OA/xxts.png" alt="" />
        </el-badge>
      </div> -->
      <div class="offLogin" @click="offClick">
        <img src="@/assets/imgs/OA/offLogin.png" alt="" />
      </div>
    </div>
    <el-dialog v-model="dialogVisible" width="500px" title="每日速递详情">
      <div class="dailyNotifyDetail">
        <div>
          <span class="dialog_label_icon">
            <el-icon class="icon" size="18"><UserFilled /></el-icon>
            发布人：
          </span>
          <span>{{ formData.nickname }}</span>
        </div>
        <div>
          <span class="dialog_label_icon">
            <el-icon class="icon" size="18"><BellFilled /></el-icon>
            发布时间：
          </span>
          <span>{{ formData.createTime }}</span>
        </div>
        <div>
          <span class="dialog_label_icon">
            <el-icon class="icon" size="18"><Comment /></el-icon>
            发布内容：
          </span>
          <span>{{ formData.content }}</span>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false"> 关闭 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ElMessageBox } from 'element-plus'
import { useAppStore } from '@/store/modules/app'
import { useUserStore } from '@/store/modules/user'
import request from '@/config/axios'
import Cookies from 'js-cookie'
import Weather from './weather.vue'
const { replace } = useRouter()
import { useTagsViewStore } from '@/store/modules/tagsView'
defineOptions({ name: 'Header' })
const appStore = useAppStore()
const titleName = ref(appStore.title)
const userStore = useUserStore()
const tagsViewStore = useTagsViewStore()
const offClick = () => {
  ElMessageBox.confirm('清除缓存并退出登录？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await userStore.loginOut()
    tagsViewStore.delAllViews()
    removeCokLog()
    replace('/login?redirect=/home')
  })
}

const removeCokLog = () => {
  var cookiesAll = document.cookie.split(';')
  for (var i = 0; i < cookiesAll.length; i++) {
    console.log(cookiesAll[i])
    Cookies.remove(cookiesAll[i])
  }
}
const dailyNotifyList = ref([])
async function queryNotifyByNewThree() {
  const urlApi = `/adm/noticeAndLearn/query/page`
  const sendData = {
    pageNo: 1,
    pageSize: 3,
    type: 3,
    nickname: '',
    title: '',
    readType: 2
  }
  const result = await request.post({ url: urlApi, data: sendData })
  if (result) {
    dailyNotifyList.value = result.list
  }
}
queryNotifyByNewThree()
const formData = ref({
  id: '',
  nickname: '',
  createTime: '',
  content: ''
})
const dialogVisible = ref(false)
const onLookDetail = (item) => {
  if (item) {
    formData.value['id'] = item['id']
    formData.value['nickname'] = item?.['nickname']
    formData.value['createTime'] = item?.['createTime']
    formData.value['content'] = item?.['content']
    dialogVisible.value = true
  }
}
const router = useRouter()
const toMoreHandle = () => {
  router.push({
    path: '/dailyNotify'
  })
}
/** 初始化 **/
onMounted(() => {})
</script>
<style lang="scss" scoped>
:deep(.el-dialog) {
  border-radius: 10px;
  overflow: hidden;
  .el-dialog__header {
    background: #f3f7fe;
    margin-right: 0px;
    padding: 15px 20px;
    > span {
      font-weight: bold;
    }
  }
}
.header {
  width: calc(100%);
  height: 60px;
  margin-bottom: 4px;
  // background: #183868;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  .header-left {
    display: flex;
    align-items: center;
    min-width: 466px;
    > .tips {
      background: rgba(255, 255, 255, 0.6);
      border-radius: 10px;
      display: flex;
      align-items: center;
      padding: 5px 10px;
      margin-left: 20px;
      > .left {
        display: flex;
        align-items: center;
        color: #0e1f38;
        font-size: 14px;
        > img {
          width: 15px;
          height: 15px;
          margin-right: 4px;
        }
        > div {
          height: 22px;
          overflow: hidden;
          > ul {
            &.scroll_ani2 {
              animation: scroll2 6s infinite;
            }
            &.scroll_ani3 {
              animation: scroll3 9s infinite;
            }
            > li {
              max-width: 460px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              cursor: pointer;
            }
          }
        }
        @keyframes scroll2 {
          0%,
          37% {
            transform: translateY(0);
          }
          50%,
          87% {
            transform: translateY(-20px);
          }
          100% {
            transform: translateY(0);
          }
        }
        @keyframes scroll3 {
          0%,
          25% {
            transform: translateY(0);
          }
          33.33%,
          58.33% {
            transform: translateY(-20px);
          }
          66.66%,
          91.66% {
            transform: translateY(-41px);
          }
          100% {
            transform: translateY(0);
          }
        }
      }
      > .more {
        margin-left: 20px;
        font-size: 12px;
        color: #333333;
        cursor: pointer;
        > .arrow {
          margin-left: 3px;
        }
      }
    }
    img {
      width: 48px;
      height: 48px;
      margin-right: 15px;
    }
    p {
      font-size: 34px;
      color: #333f56;
      font-family: AlibabaPuHuiTiB;
    }
  }
  .offLogin {
    cursor: pointer;
  }
  .header-right {
    display: flex;
    align-items: center;
    height: 100%;
    min-width: 328px;
    .hx {
      width: 1px;
      height: 30px;
      background-color: #ccd4dd;
      margin: 0 30px;
    }
    .message {
      margin-right: 30px;
      > .item {
        :deep(.el-badge__content--danger) {
          background-color: #e92727;
        }
      }
    }
  }
}
.dailyNotifyDetail {
  padding: 0px 20px;
  padding-bottom: 20px;
  .dialog_label_icon {
    display: inline-block;
    width: 120px;
    display: flex;
    align-items: center;
    > .icon {
      color: #0079ee;
      margin-right: 4px;
    }
  }
  > div {
    padding: 8px;
    display: flex;
    align-items: flex-start;
    > span {
      color: #333;
      font-size: 17px;
      &:nth-child(2) {
        flex: 1;
      }
    }
  }
}
</style>