web_dist/src/views/dashboard/index.vue

<template>
  <el-container>
    <el-main>
      <div style="display: flex">
        <!-- 左边部分 -->
        <div class="left-pane">
          <div class="divider-line">
            <div class="divider-text">
              <div class="avatar-box__inner">
                <el-avatar :size="80" :src="userInfo.avatar" @error="errorHandler">
                  <img :src="makeTextPortrait()" />
                </el-avatar>
              </div>
            </div>
            <div class="psninfo-box">
              {{ userInfo.name }}
              &nbsp;
              {{ userInfo.deptName }}
              &nbsp;
              <MyClock :show-logo="false" size="small" />
            </div>
          </div>
        </div>
        <!-- 右边部分 -->
        <div class="right-pane">
          <div class="check-more" @click="fetchMoreMessages">查看更多</div>
          <el-timeline v-for="item in messages" :key="item.id">
            <el-timeline-item :timestamp="item.simpledate" placement="top" icon="el-icon-warning" color="orange">
              <el-card>
                <div style="margin-bottom: 12px; font-size: 16px; font-weight: bold">{{ item.title }}</div>
                <div v-html="item.content"></div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { computed, onActivated, onMounted, ref, watch } from 'vue'
import { useStore } from 'vuex'
import { selectSystemMessages } from '../../api/messages/index'
import { formatDate } from '../../utils/date'
import { getUserInfo } from '@/api/settings/user-settings'
import { genTextPortrait } from '@/utils/portrait'
import MyClock from '@/components/MyClock.vue'

export default {
  name: 'Dashboard',
  components: {
    MyClock,
  },
  setup() {
    const store = useStore()
    const token = computed(() => {
      return store.state.user.token
    })
    watch(
      () => token.value,
      () => {
        setTimeout(() => {
          location.reload()
        }, 100)
      }
    )

    const messages = ref([])
    const fetchMoreMessages = () => {
      let lastdate = 'latest'
      if (messages.value.length > 0) {
        lastdate = formatDate(messages.value[0].simpledate)
      }
      selectSystemMessages(lastdate).then((res) => {
        res.forEach((item) => {
          messages.value.unshift(item)
        })
      })
    }

    const userInfo = ref({})
    const errorHandler = () => {
      return true
    }
    const makeTextPortrait = () => {
      return genTextPortrait(userInfo.value.name)
    }

    onActivated(() => {
      selectSystemMessages('latest').then((res) => {
        messages.value = res
      })
    })

    onMounted(() => {
      getUserInfo().then((res) => {
        userInfo.value = res
      })
    })

    return {
      messages,
      userInfo,
      errorHandler,
      fetchMoreMessages,
      makeTextPortrait,
    }
  },
}
</script>

<style lang="scss" scoped>
.left-pane {
  margin-top: 20px;
  width: 68%;
  background-image: linear-gradient(#d0ddee, #64b6e6);
  height: 120px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.right-pane {
  margin-top: 20px;
  width: 30%;
  padding-right: 20px;
  height: 80vh;
  overflow-y: scroll;
}
.avatar-box__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  border-radius: 43px;
  border-bottom: 3px solid #1080f0;
  z-index: 600;
}
.check-more {
  width: 60%;
  text-align: right;
  color: #409eff;
  &:hover {
    cursor: pointer;
  }
}

.divider-line {
  display: block;
  height: 1px;
  width: 100%;
  margin: 70px 0 50px 0;
  background-color: #4297ec88;
  position: relative;
}
.divider-text {
  left: 12px;
  -webkit-transform: translateY(-55%);
  transform: translateY(-55%);
  position: absolute;
  font-weight: 500;
  color: black;
  font-size: 14px;
}
.psninfo-box {
  display: flex;
  left: 108px;
  -webkit-transform: translateY(-120%);
  transform: translateY(-120%);
  position: absolute;
  font-weight: 500;
  color: rgb(3, 72, 94);
  font-size: 20px;
  font-weight: bold;
}
</style>