eln_web/src/App.vue

<template>
  <div id="app">
    <router-view />
    <theme-picker />
  </div>
</template>

<script>
import ThemePicker from "@/components/ThemePicker"
import { checkStatus } from "@/api/system/user"

export default {
  name: "App",
  components: { ThemePicker },
  data() {
    return {
      statusCheckTimer: null
    }
  },

  computed: {
    // // 监听登录状态
    // isLoggedIn() {
    //   return this.$store.getters.token && this.$store.getters.token !== ''
    // }
  },

  watch: {
    // // 监听登录状态变化
    // isLoggedIn(newVal, oldVal) {
    //   console.log('登录状态变化:', newVal, oldVal)
    //   if (newVal) {
    //     // 用户已登录，启动轮询
    //     this.startStatusCheck()
    //   } else {
    //     // 用户已退出，停止轮询
    //     this.stopStatusCheck()
    //   }
    // },
    // 监听token
    '$store.getters.token': {
      handler(newToken, oldToken) {
        console.log('token变化:', newToken, oldToken)
        if (newToken) {
          // 有token，启动轮询
          this.startStatusCheck()
        } else {
          // token为空，停止轮询
          this.stopStatusCheck()
        }
      },
      immediate: true // 立即执行一次，这样在页面刷新时，如果已经有token，就会启动轮询
    }
  },

  mounted() {
    // // 页面加载时检查当前登录状态
    // if (this.isLoggedIn) {
    //   this.startStatusCheck()
    // }
  },

  beforeDestroy() {
    this.stopStatusCheck()
  },

  methods: {
    startStatusCheck() {
      // 先停止可能存在的定时器
      this.stopStatusCheck()

      console.log('启动状态检查轮询')

      // 立即执行一次检查
      this.checkStatusImmediate()

      // 设置定时器每秒检查一次
      this.statusCheckTimer = setInterval(() => {
        this.checkStatus()
      }, 10000)
    },

    stopStatusCheck() {
      if (this.statusCheckTimer) {
        console.log('停止状态检查轮询')
        clearInterval(this.statusCheckTimer)
        this.statusCheckTimer = null
      }
    },

    // 立即检查（不等待）
    async checkStatusImmediate() {
      await this.checkStatus()
    },

    // 定时检查
    async checkStatus() {
      // 再次确认登录状态
      // if (!this.isLoggedIn) {
      //   this.stopStatusCheck()
      //   return
      // }

      try {
        console.log('开始checkStatus')
        checkStatus().then(response => {
          console.log(JSON.stringify(response))
        }).catch(err => {
          console.log(JSON.stringify(err))
          // if (err === '无效的会话，或者会话已过期，请重新登录。') {
          if (err === this.$t('system.timeOutTip')) {
            this.stopStatusCheck()
          }
        })

      } catch (error) {
      }
    },
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
#app .theme-picker {
  display: none;
}

.el-dialog__header {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1) !important;
}

.el-dialog__footer {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1) !important;
}

.el-dialog__body {
  padding: 10px 10px;
}

/*隐藏自动填充密码 */
.sbzdtcma {
  width: 0px;
  height: 0px;
  overflow: hidden;
}

/*搜索区域样式 */
.search-area {
  input {
    width: 150px;
  }
}

.el-tabs--border-card>.el-tabs__content {
  padding: 0px 0px;
}

/*详情 */
.detail-container {
  background: #ffffff !important;

  .detail-top {
    background: #fff;
    padding: 10px 20px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

    .left-top {
      flex-shrink: 0;
      display: flex;
      flex-direction: row;
      align-items: center;

      img {
        height: 16px;
        margin-right: 10px;
        cursor: pointer;
      }

      .right-top {}

    }
  }

  .detail-title {
    line-height: 60px;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }

  .detail-content {
    padding: 10px 10px;

    display: flex;
    justify-content: space-between;

    .content-right {
      width: 20%;
      margin-left: 2%;
      padding: 0px 10px;
      border-left: 1px solid #d0d0d0;
    }

    .content-left {
      width: 78%;
    }

    .content {
      width: 100%;
    }

    .content-title {
      width: 100%;
      background: #f9f9ff;
      font-size: 0.96rem;
      font-weight: bold;
      padding-left: 10px;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: flex-start;
      text-align: left;
      page-break-inside: avoid;
      .line {
        width: 2px;
        float: left;
        height: 16px;
        margin-top: 12px;
        margin-right: 8px;
        border-left: #3178ff 3px solid;
      }

      .subtitle {
        height: 40px;
        line-height: 40px;
        color: #464647 !important;
      }

    }

    .pal {

      display: flex;
      justify-content: space-between;
      margin: 10px 0px;

      .left {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        margin: 5px 5px 5px 0px;
        width: 50%;
        padding: 10px 10px;
        border-radius: 5px 5px;

        .left-title {
          height: 40px;
          line-height: 40px;
        }
      }

      .right {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        margin: 5px 0px 5px 5px;
        width: 50%;
        padding: 10px 10px;
        border-radius: 5px 5px;

        .right-title {
          height: 40px;
          line-height: 40px;
        }
      }
    }
  }

}

/*稽查轨迹list */

.jcgjList {
  padding: 20px 0px;

  .jcgjList-keywords {
    width: 100%;
  }

  .jcgjList-jcgjlx {
    height: 50px;
    margin: 10px 0px;
  }

  .jcgjList-content {
    width: 100%;
  }

  .jcgjList-title {
    display: flex;
    justify-content: space-between;
    margin-top: -15px;

    .jcgjList-jcmc {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .jcglList-jcnr {
    line-height: 25x;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 10px 10px;
    margin-top: 10px;
  }
}

.no-break {
  page-break-inside: avoid;
}

/* 表格行不被分割 */
tr,
td,
th {
  page-break-inside: avoid;
}

.page-break {
  page-break-before: always;
}

.datatable {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

.datatable thead {
  border-left: 1px solid #f5f5f5;
  page-break-inside: avoid;
}

.datatable th {
  padding: 5px 5px 4px 5px;
  max-width: 200px;
  line-height: 35px;
  text-align: center;
  color: #606266;
  background: #f8f8f9;
  border: 1px solid #f5f5f5;
}


.datatable th.operate {
  padding: 5px 5px 4px 5px;
  width: 100px;
  line-height: 35px;
  background: #f8f8f9;
  border: 1px solid #f5f5f5;
  text-align: center;
}


.datatable td {
  border: solid 1px #f5f5f5;
  padding: 3px 5px 4px 5px;
  max-width: 100px;
  color: #606266;
  line-height: 35px;
  text-align: center;
}

.el-dialog__body {
  padding: 10px 20px !important;
}


/** 基础信息设置tab **/

.edit-container {

  .edit-top {
    background: #fff;
    padding: 10px 20px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

    .left-top {
      flex-shrink: 0;
      display: flex;
      flex-direction: row;
      align-items: center;

      img {
        height: 16px;
        margin-right: 10px;
        cursor: pointer;
      }
    }

    .center-top {

      display: flex;
      justify-content: space-between;
      height: 24px;

      .is-finish {
        background: #409eff;
        border: 1px solid #409eff;
        color: #fff;
      }

      .is-info {
        border: 1px solid #d0d0d0;
      }

      .line {
        height: 0px;
        width: 100px;
        margin-top: 12px;
        margin-left: 5px;
        margin-right: 5px;
        border-top: 1px solid #d0d0d0;
      }
    }

    .right-top {}
  }

  .edit-content {
    background: #ffffff;
    padding: 10px 10px;
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: center;

    .content-right {
      width: 20%;
      margin-left: 2%;
      padding: 0px 10px;
      border-left: 1px solid #d0d0d0;
    }

    .content-left {
      width: 78%;
    }

    .content {
      width: 100%;
    }

    .content-title {
      width: 100%;
      background: #f9f9ff;
      font-size: 0.96rem;
      font-weight: bold;
      padding-left: 10px;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: flex-start;
      text-align: left;
      page-break-inside: avoid;
      .line {
        width: 2px;
        float: left;
        height: 16px;
        margin-top: 12px;
        margin-right: 8px;
        border-left: #3178ff 3px solid;
      }

      .subtitle {
        height: 40px;
        line-height: 40px;
        color: #464647 !important;
      }

    }

    .pal {

      display: flex;
      justify-content: space-between;
      margin: 10px 0px;

      .left {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        margin: 5px 5px 5px 0px;
        width: 50%;
        padding: 10px 10px;
        border-radius: 5px 5px;

        .left-title {
          height: 40px;
          line-height: 40px;
        }
      }

      .right {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        margin: 5px 0px 5px 5px;
        width: 50%;
        padding: 10px 10px;
        border-radius: 5px 5px;

        .right-title {
          height: 40px;
          line-height: 40px;
        }
      }
    }
  }
}

/* 单选，隐藏label */
.hide-label>.el-radio__label {
  font-size: 0 !important;
  line-height: 0 !important;
}

.template-form-item {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  margin-top: 24px;
  padding: 24px;
}
</style>