FE_occupationlab_server/src/layouts/home/index.vue

<template>
  <div class="main">
    <v-head></v-head>
    <div class="layout">
      <navbar></navbar>
      <div class="content">
        <transition name="move"
                    mode="out-in">
          <router-view class="view"></router-view>
        </transition>
        <el-backtop target=".content"></el-backtop>
      </div>
      <v-footer ref="footer"></v-footer>
      <div class="log-mask"
           v-if="logVisible"></div>
      <div class="log-dia"
           v-if="logVisible">
        <img class="bg1"
             src="@/assets/img/log-bg.png"
             alt="">
        <img class="bg2"
             src="@/assets/img/log-bg1.png"
             alt="">
        <p class="log-title">更新日志</p>
        <div class="log-wrap">
          <div class="logs">
            <div class="item"
                 v-for="(item, i) in list"
                 :key="i"
                 v-show="!i || (i && logAll)">
              <h6>{{ item.versionName }}</h6>
              <img v-if="item.coverUrl"
                   :src="item.coverUrl"
                   alt=""
                   class="cover">
              <ul class="detail">
                <li v-for="(item, i) in item.logContents"
                    :key="i">
                  <p class="name"><img :src="require('@/assets/img/' + funcList.find(e => e.id === item.type).icon + '.png')"
                         alt=""> {{ funcList.find(e => e.id === item.type).name }}</p>
                  <div class="val">
                    <p v-for="(item, i) in item.content"
                       :key="i">{{ i + 1 }}、{{ item }}</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="more-wrap">
            <el-button class="know"
                       type="primary"
                       size="small"
                       @click="logVisible = false">知道了</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vHead from "../header";
import navbar from "../navbar";
import vFooter from "../footer";
import { mapState, mapMutations, mapActions } from "vuex";
import util from "@/libs/util";
import Setting from "@/setting";

export default {
  data () {
    return {
      logVisible: false,
      list: [],
      logAll: false,
      funcList: [
        {
          id: 0,
          name: '新功能',
          icon: 'func'
        },
        {
          id: 1,
          name: '修复',
          icon: 'bug'
        },
        {
          id: 2,
          name: '优化',
          icon: 'optimize'
        }
      ]
    };
  },
  components: {
    vHead,
    navbar,
    vFooter
  },
  computed: {
    ...mapState("user", [
      'logView'
    ])
  },
  mounted () {
    this.autoLogout();
    this.logView || this.getLogStatus() // logView为false才需要查询接口
  },
  methods: {
    ...mapMutations("user", [
      'SET_LOG'
    ]),
    ...mapActions("user", [
      "logout"
    ]),
    // 获取日志列表
    getLog () {
      this.$get(`${this.api.platformLogList}?platformId=${Setting.platformId}&port=1&versionName=`).then(({ logList }) => {
        logList.map((e, i) => {
          e.logContents.map(n => {
            n.content = n.content.split('\n')
          })
        })
        this.list = logList
      }).catch(res => { })
    },
    // 获取日志状态
    getLogStatus () {
      util.local.get(Setting.tokenKey) && this.$get(this.api.logNotification, {
        platformId: Setting.platformId
      }).then(({ notification }) => {
        this.SET_LOG() // 把查看日志状态设置为true
        if (notification) {
          this.logVisible = true // 返回true，则显示日志弹框
          this.getLog()
        }
      }).catch(res => { })
    },
    // 长时间未操作,自动退出登录
    autoLogout () {
      let lastTime = new Date().getTime();
      document.onmousedown = () => {
        lastTime = new Date().getTime();
      };

      setInterval(() => {
        if (util.local.get(Setting.tokenKey) && (new Date().getTime() - lastTime) > Setting.autoLogoutTime) {
          util.errorMsg("由于您已经有一个小时没有操作，系统自动登出，请重新登录。页面刷新到登录页。");
          setTimeout(this.logout, 1500);
        }
      }, 1000);
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
    min-height: 100%;

    .content {
        min-height: calc(100vh - 176px);
        padding: 24px;
    }
}
.log-mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4);
}
/deep/.log-dia {
    z-index: 11;
    position: absolute;
    top: 250px;
    left: 50%;
    width: 550px;
    transform: translateX(-50%);
    background-color: #fff;
    border-radius: 6px;
    .bg1 {
        width: 100%;
        height: 140px;
    }
    .bg2 {
        position: absolute;
        top: -130px;
        left: 48px;
        max-width: 100%;
        height: 250px;
    }
    .log-title {
        position: absolute;
        top: 65px;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 22px;
        color: #fff;
        font-weight: 600;
    }
    .log-wrap {
        padding-bottom: 30px;
    }
    .logs {
        max-height: 250px;
        padding: 0 100px;
        margin: 30px 0;
        overflow: auto;
    }
    h6 {
        margin-bottom: 15px;
        font-size: 16px;
        color: #333;
        line-height: 1;
    }
    .more-wrap {
        padding: 0 60px;
        font-size: 14px;
        color: #333;
        text-align: center;
    }
    .know {
        margin-top: 15px;
    }
    .cover {
        max-width: 250px;
        max-height: 160px;
        margin: 10px 0 20px;
    }
    .detail {
        li {
            margin-bottom: 20px;
        }
        .name {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
            font-size: 14px;
            img {
                width: 20px;
                margin-right: 8px;
            }
        }
        .val {
            font-size: 15px;
            line-height: 1.8;
            white-space: pre-wrap;
            p {
                position: relative;
                font-size: 13px;
                color: #727272;
            }
        }
    }
}
</style>