Blame view

src/components/screen.vue 2.65 KB
54dab3c6   liuqimichale   导入公用css
1
  <template>
497e575d   liuqimichale   诱导屏故障
2
    <div class="">
d1443fcf   liuqimichale   getUrlKey
3
      <ul class="dici-wrap" v-if="queryscreenList != undefined && queryscreenList.length > 0">
a18ba600   liuqimichale   地磁故障api
4
5
        <li v-for="(item, index) in queryscreenList" :key="index">
          <p class="parkName">{{item.guideName}}</p>
497e575d   liuqimichale   诱导屏故障
6
7
          <ul class="diciList">
            <li>
a18ba600   liuqimichale   地磁故障api
8
              编号 :{{item.guideNo}}
497e575d   liuqimichale   诱导屏故障
9
10
            </li>
            <li>
a18ba600   liuqimichale   地磁故障api
11
              异常类型 :{{item.ledDeviceStatus | screenFilter(item.ledScreenStatus)}}
497e575d   liuqimichale   诱导屏故障
12
13
            </li>
            <li>
a18ba600   liuqimichale   地磁故障api
14
              故障时间 :{{item.lastUpdateDate | dataFilter}}
497e575d   liuqimichale   诱导屏故障
15
16
            </li>
          </ul>
497e575d   liuqimichale   诱导屏故障
17
        </li>
497e575d   liuqimichale   诱导屏故障
18
      </ul>
d1443fcf   liuqimichale   getUrlKey
19
      <div v-else class="noData">暂无数据</div>
497e575d   liuqimichale   诱导屏故障
20
21
    </div>
  </template>
54dab3c6   liuqimichale   导入公用css
22
  <script>
a18ba600   liuqimichale   地磁故障api
23
  import { screenAddress } from '../utils/api'
54dab3c6   liuqimichale   导入公用css
24
  export default {
c793b6c7   liuqimichale   地磁故障
25
    name: 'screen',
a18ba600   liuqimichale   地磁故障api
26
27
    data() {
      return{
82af1dd4   liuqimichale   new Date
28
29
        modifyTimeBegin: new Date(decodeURIComponent(this.getUrlKey("modifyTimeBegin"))),
        modifyTimeEnd:  new Date(decodeURIComponent(this.getUrlKey("modifyTimeEnd"))),
d1443fcf   liuqimichale   getUrlKey
30
        queryscreenList: [],
a18ba600   liuqimichale   地磁故障api
31
32
33
      }
  
    },
c793b6c7   liuqimichale   地磁故障
34
35
    created() {
      document.title = '诱导屏故障'
82af1dd4   liuqimichale   new Date
36
37
      console.log(this.modifyTimeBegin)
      console.log(this.modifyTimeEnd)
a18ba600   liuqimichale   地磁故障api
38
39
40
41
42
      screenAddress({
        modifyTimeBegin:this.modifyTimeBegin,
        modifyTimeEnd: this.modifyTimeEnd,
        orgId: 10003,
        sysCode:'1001',
6c4a55b8   liuqimichale   条数限制
43
44
45
46
        baseRequest: {
          "pageNum": 1,
          "pageSize": 500
        },
a18ba600   liuqimichale   地磁故障api
47
48
      })
      .then((res) => {
d1443fcf   liuqimichale   getUrlKey
49
50
51
52
53
54
55
56
        console.log(res.data.code)
        if(res.data.code === '8888'){
          const queryscreenList = res.data.data
          this.queryscreenList = queryscreenList
        }else{
          alert('服务器出错了')
        }
  
a18ba600   liuqimichale   地磁故障api
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
      })
      .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 '正常'
        }
  
      }
c793b6c7   liuqimichale   地磁故障
75
    }
54dab3c6   liuqimichale   导入公用css
76
77
78
79
  }
  </script>
  
  <style scoped lang="scss">
497e575d   liuqimichale   诱导屏故障
80
81
82
83
84
    .dici-wrap > li {
      background-color: $whiteBg;
      margin-bottom: 12px;
      padding: 15px 15px 0 15px;
    }
54dab3c6   liuqimichale   导入公用css
85
  
497e575d   liuqimichale   诱导屏故障
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
    .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;
        }
      }
    }
d1443fcf   liuqimichale   getUrlKey
110
111
112
113
    .noData{
      padding-top: 20px;
      text-align: center;
    }
54dab3c6   liuqimichale   导入公用css
114
  </style>