screen.vue 2.65 KB
<template>
  <div class="">
    <ul class="dici-wrap" v-if="queryscreenList != undefined && queryscreenList.length > 0">
      <li v-for="(item, index) in queryscreenList" :key="index">
        <p class="parkName">{{item.guideName}}</p>
        <ul class="diciList">
          <li>
            编号 :{{item.guideNo}}
          </li>
          <li>
            异常类型 :{{item.ledDeviceStatus | screenFilter(item.ledScreenStatus)}}
          </li>
          <li>
            故障时间 :{{item.lastUpdateDate | dataFilter}}
          </li>
        </ul>
      </li>
    </ul>
    <div v-else class="noData">暂无数据</div>
  </div>
</template>
<script>
import { screenAddress } from '../utils/api'
export default {
  name: 'screen',
  data() {
    return{
      modifyTimeBegin: new Date(decodeURIComponent(this.getUrlKey("modifyTimeBegin"))),
      modifyTimeEnd:  new Date(decodeURIComponent(this.getUrlKey("modifyTimeEnd"))),
      queryscreenList: [],
    }

  },
  created() {
    document.title = '诱导屏故障'
    console.log(this.modifyTimeBegin)
    console.log(this.modifyTimeEnd)
    screenAddress({
      modifyTimeBegin:this.modifyTimeBegin,
      modifyTimeEnd: this.modifyTimeEnd,
      orgId: 10003,
      sysCode:'1001',
      baseRequest: {
        "pageNum": 1,
        "pageSize": 500
      },
    })
    .then((res) => {
      console.log(res.data.code)
      if(res.data.code === '8888'){
        const queryscreenList = res.data.data
        this.queryscreenList = queryscreenList
      }else{
        alert('服务器出错了')
      }

    })
    .catch((res) => {
      console.log(res)
    })
  },
  filters: {
    screenFilter(device,screen){
      if(device === 2 && screen === 2){
        return '设备故障,屏幕已关闭'
      } else if(device ===1 && screen ===2){
        return '屏幕已关闭'
      } else if(device ===2 && screen ===1){
        return '设备故障'
      } else {
        return '正常'
      }

    }
  }
}
</script>

<style scoped lang="scss">
  .dici-wrap > li {
    background-color: $whiteBg;
    margin-bottom: 12px;
    padding: 15px 15px 0 15px;
  }

  .parkName {
    font-size: 1.8rem;
    font-weight: 700;
    padding-left: 2.5rem;
    background: url("../assets/images/screenName.png") no-repeat 0 center;
    background-size: 1.8rem 1.8rem;
  }

  .diciList {
    border-radius: 4px;
    margin-top: 12px;
    > li {
      height: 3.8rem;
      line-height: 3.8rem;
      position: relative;
      &:after {
        @include border-1px(#D9D9D9, bottom);
        opacity: .5;
      }
      &:last-child:after {
        height: 0;
      }
    }
  }
  .noData{
    padding-top: 20px;
    text-align: center;
  }
</style>