Blame view

src/components/screen.vue 2.47 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{
d1443fcf   liuqimichale   getUrlKey
28
29
30
        modifyTimeBegin: new Date(this.getUrlKey("modifyTimeBegin")),
        modifyTimeEnd: new Date(this.getUrlKey("modifyTimeEnd")),
        queryscreenList: [],
a18ba600   liuqimichale   地磁故障api
31
32
33
      }
  
    },
c793b6c7   liuqimichale   地磁故障
34
35
    created() {
      document.title = '诱导屏故障'
a18ba600   liuqimichale   地磁故障api
36
37
38
39
40
41
42
43
  
      screenAddress({
        modifyTimeBegin:this.modifyTimeBegin,
        modifyTimeEnd: this.modifyTimeEnd,
        orgId: 10003,
        sysCode:'1001',
      })
      .then((res) => {
d1443fcf   liuqimichale   getUrlKey
44
45
46
47
48
49
50
51
        console.log(res.data.code)
        if(res.data.code === '8888'){
          const queryscreenList = res.data.data
          this.queryscreenList = queryscreenList
        }else{
          alert('服务器出错了')
        }
  
a18ba600   liuqimichale   地磁故障api
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
      })
      .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   地磁故障
70
    }
54dab3c6   liuqimichale   导入公用css
71
72
73
74
  }
  </script>
  
  <style scoped lang="scss">
497e575d   liuqimichale   诱导屏故障
75
76
77
78
79
    .dici-wrap > li {
      background-color: $whiteBg;
      margin-bottom: 12px;
      padding: 15px 15px 0 15px;
    }
54dab3c6   liuqimichale   导入公用css
80
  
497e575d   liuqimichale   诱导屏故障
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
    .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
105
106
107
108
    .noData{
      padding-top: 20px;
      text-align: center;
    }
54dab3c6   liuqimichale   导入公用css
109
  </style>