apt15e/src/pages/shells/index.vue

<template>
  <div class="zbox body-container" :class="{'enClass': $i18n.locale === 'en-us'}">
    <el-row type="flex" class="header-container" justify="space-between" align="middle">
      <el-col :span="3">
        <el-button type="primary" icon="el-icon-s-home" class="button-home" @click="$router.push('/index/home')">{{ $t('index') }}</el-button>
      </el-col>
      <el-col :span="12">
        <el-row type="flex" justify="end" align="middle">
          <div v-if="JSON.stringify(topInfo) !== '{}'" class="state-item">{{ topInfo.isManual ? '手动模式' : '自动模式' }}</div>
          <div v-if="JSON.stringify(topInfo) !== '{}'" class="state-item">{{ topInfo.state }}</div>
          <div v-if="JSON.stringify(topInfo) !== '{}'" class="relative elec-qty-wrap" :class="{'elec-wraning': topInfo.batteryPower <= 40}">
            <div class="absolute elec-qty" :style="{ width: Number(topInfo.batteryPower) !== -1 ? `calc(100% - ${topInfo.batteryPower}%)` : '100%' }"></div>
            <div class="absolute elec-qty-border"></div>
            <div class="elec-txt">{{Number(topInfo.batteryPower) !== -1 ? `${topInfo.batteryPower}%` : '0'}}</div>
          </div>
          <div v-else class="relative elec-qty-wrap elec-wraning">
            <div class="absolute elec-qty" style="width: 100%"></div>
            <div class="absolute elec-qty-border"></div>
            <div class="elec-txt"></div>
          </div>
          <i class="el-icon-user-solid icon-user" :style="{'color': $store.getters.userInfo === 'true' ? '#00ff29' : '#737f92'}" @click="loginModalHandle"></i>
          <i class="el-icon-s-tools icon-tools" @click="configModalHandle"></i>
        </el-row>
      </el-col>
    </el-row>
    <div class="error-tips" ref="scrollContainer" @click="$router.push('/index/warning')">
      <div class="zbox scroll-text" ref="scrollText">
        <i class="el-icon-warning icon-warning"></i>
        <div class="error-tips-t">错误提示：{{ exception }}</div>
      </div>
    </div>
    <el-row type="flex" class="relative main-conatiner">
      <div class="absolute hud_left"></div>
      <div class="absolute hud_left hud_right"></div>
      <router-view></router-view>
    </el-row>
    <div class="task-tips">
      <div class="task-tips-t">A<i class="el-icon-right"></i>B<i class="el-icon-right"></i>C<i class="el-icon-right"></i>D</div>
    </div>
    <login-modal v-if="loginVisible" ref="loginModal"/>
    <config-modal v-if="configVisible" ref="configModal"/>
  </div>
</template>

<script>
import LoginModal from './login-modal.vue'
import ConfigModal from './config-modal.vue'
import { sendWebsocket, closeWebsocket } from '@/config/websocket.js'
export default {
  components: {
    LoginModal,
    ConfigModal
  },
  data () {
    return {
      timer: null,
      topInfo: {},
      // topInfo: {
      //   batteryPower: -1.0,
      //   exceptionInfo: {
      //     exception: ['重定位失败,检查环境或标记是否有变化.', '定位超时，尝试移动小车位置后重试.'],
      //     exceptionCodes: [1, 17179869185, 1335734829057]
      //   },
      //   id: '1', // 车号ID
      //   ip: '192.168.100.82', // 车辆IP
      //   isManual: false, // 是否是手动，true是手动,false是自动
      //   mapId: 39, // 地图ID
      //   mapName: 'apt_map_1753078481180', // 地图名称
      //   name: 'V1', // 车辆名称
      //   state: '未知状态', // 车辆状态
      //   stateId: 7, // 车辆状态ID
      //   theta: 0.9073792099952698, // 车辆航向角
      //   x: 0.004027, // 车辆x坐标
      //   y: -0.001812 // 车辆y坐标
      // },
      loginVisible: false,
      configVisible: false
    }
  },
  computed: {
    exception () {
      let str = ''
      if (JSON.stringify(this.topInfo) !== '{}') {
        str = this.topInfo.exceptionInfo.exception.map((item, index) => `${index + 1}.${item}`).join('')
      }
      return str
    }
  },
  created () {
    this._queryHead()
  },
  mounted () {
    this.checkTextOverflow()
    window.addEventListener('resize', this.checkTextOverflow)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.checkTextOverflow)
    clearTimeout(this.timer)
    closeWebsocket(true)
  },
  destroyed () {
    clearTimeout(this.timer)
  },
  methods: {
    // 滚动区域
    checkTextOverflow () {
      const container = this.$refs.scrollContainer
      const text = this.$refs.scrollText
      if (!container || !text) return
      const containerWidth = container.offsetWidth
      const textWidth = text.scrollWidth
      if (textWidth > containerWidth) {
        // 如果文字超出容器宽度，启动滚动动画
        const duration = (textWidth / containerWidth) * 10
        text.style.animation = `scrollText ${duration}s linear infinite`
      } else {
        // 如果文字没有超出容器宽度，停止滚动动画
        text.style.animation = 'none'
      }
    },
    // 管理员登录
    loginModalHandle () {
      this.loginVisible = true
      this.$nextTick(() => {
        this.$refs.loginModal.init()
      })
    },
    // 配置
    configModalHandle () {
      this.configVisible = true
      this.$nextTick(() => {
        this.$refs.configModal.init()
      })
    },
    _queryHead () {
      let url = this.$store.getters.baseUrl
      url = url.substring(7)
      let sid = this.$store.getters.userInfo === 'true' ? 1 : 2
      sendWebsocket(`ws://${url}/webSocket/VehicleInfo/${sid}`, {}, this.wsMessage, this.wsErr)
    },
    wsMessage (res) {
      clearTimeout(this.timer)
      this.topInfo = res.data
      this.$store.dispatch('setAgvObj', JSON.stringify(this.topInfo))
    },
    wsErr () {
      this.timer = setTimeout(() => {
        this._queryHead()
      }, 10000)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.header-container
  _wh(100%, .48rem)
  padding 0 2%
  background top center / 100% 84px url(../../images/new/header_bg_1.png) no-repeat
.button-home
  background linear-gradient(0deg, #E64F29, rgba(230, 79, 41, 0.5))
  border-color rgba(230, 79, 41, 0.7)
.state-item
  _wh(.72rem, .25rem)
  _font(.14rem,.25rem,#fff,,center)
  font-family 'Adobe Heiti Std'
  margin-right .04rem
  background center / 100% 100% url(../../images/new/state-item_bg.png) no-repeat
  box-shadow inset 0px 0px 3px 2px rgb(149, 221, 253, 70%)
.elec-qty-wrap
  _wh(.5rem, .25rem)
  margin-right .04rem
  background center / 100% 100% url(../../images/new/elec.png) no-repeat
  border 1px solid #5ADFBC
  z-index 151
.elec-qty
  right 0
  z-index 152
  height 100%
  background-color #0d2d59
.elec-qty-border
  _wh(100%, 100%)
  z-index 152
  box-shadow inset 0px 0px 3px 2px rgba(90, 223, 188, 70%)
.elec-wraning
  border-color #ffe600
  background center / 100% 100% url(../../images/new/elec_y.png) no-repeat
  .elec-qty-border
    box-shadow inset 0px 0px 3px 2px rgba(192, 176, 28, 70%)
.elec-txt
  position relative
  z-index 153
  _font(.15rem, .25rem, #fff,,center)
  font-family 'Adobe Heiti Std'
.icon-user
  font-size .24rem
  margin-right .04rem
.icon-tools
  font-size .24rem
  color #fff
  cursor pointer
.error-tips
  width 100%
  height .3rem
  line-height .3rem
  overflow hidden
  white-space nowrap
  background-color rgba(253, 246, 236, .4)
.scroll-text
  display inline-block
  text-align center
  animation none
.icon-warning
  font-size .18rem
  color #e6a23c
.error-tips-t
  display inline-block
  font-size .16rem
  color #e6a23c
.task-tips
  width 100%
  height .4rem
  line-height .4rem
  padding 0 2%
  background linear-gradient(90deg, #1DB8FF,#1DC5E1, #27C8B0,#819269, #E46355)
.task-tips-t
  _font(.2rem, .4rem, #fff, ,center)
.hud_left
  position absolute
  left 0
  top 0
  _wh(2%, 100%)
  background center / 100% auto url(../../images/new/hud_left.png) no-repeat
.hud_right
  left auto
  right 0
  background-image url(../../images/new/hud_right.png)
</style>