BJ_web_developers / lzsandtable

Blame view

src/components/VEquipment.vue 3.92 KB
Edit Raw Normal View History
59d4d9d6   liuqimichale   设备 
1
2
3
 
  <template>
      <div class="theme-wrap">
          <card-title> <span>设备监控消息</span></card-title>
27890aae   liuqimichale   设备监控 
4
5
6
7
8
9
10
 
          <ul class="theme-body" style="padding: 10px 20px 20px 0;">
              <li class="equipment-section">
                  <div class="normal-status front">
                      <p class="text-blue">23.4%</p>
                      <p>PDA在线率</p>
                  </div>
                  <div class="rotate-status back">
633692cc   liuqimichale   axios 
11
 
                      <p class="text-blue">{{equipment.PDA}}/{{equipment.PDATotal}}</p>
27890aae   liuqimichale   设备监控 
12
13
14
15
16
17
18
19
20
 
                      <p>PDA/PDA在线</p>
                  </div>
              </li>
              <li class="equipment-section">
                  <div class="normal-status front">
                      <p class="text-blue">23.4%</p>
                      <p>地磁在线率</p>
                  </div>
                  <div class="rotate-status back">
633692cc   liuqimichale   axios 
21
 
                      <p class="text-blue">{{equipment.berth}}/{{equipment.berthTotal}}</p>
27890aae   liuqimichale   设备监控 
22
23
24
25
26
 
                      <p>地磁/地磁</p>
                  </div>
              </li>
              <li class="equipment-section">
                  <div class="normal-status front">
633692cc   liuqimichale   axios 
27
 
                      <p class="text-orange">23.4%</p>
27890aae   liuqimichale   设备监控 
28
29
30
 
                      <p>道闸在线率</p>
                  </div>
                  <div class="rotate-status back">
633692cc   liuqimichale   axios 
31
 
                      <p class="text-orange">{{equipment.daozha}}/{{equipment.daozhaTotal}}</p>
27890aae   liuqimichale   设备监控 
32
33
34
35
36
 
                      <p>道闸/道闸在线</p>
                  </div>
              </li>
              <li class="equipment-section">
                  <div class="normal-status front">
633692cc   liuqimichale   axios 
37
 
                      <p class="text-orange">23.4%</p>
27890aae   liuqimichale   设备监控 
38
39
40
 
                      <p>诱导屏在线率</p>
                  </div>
                  <div class="rotate-status back">
633692cc   liuqimichale   axios 
41
 
                      <p class="text-orange">{{equipment.ydp}}/{{equipment.ydpTotal}}</p>
27890aae   liuqimichale   设备监控 
42
43
44
45
 
                      <p>诱导屏/诱导屏在线</p>
                  </div>
              </li>
          </ul>
59d4d9d6   liuqimichale   设备 
46
47
48
49
50
 
      </div>
  </template>
  
  <script>
  import CardTitle from './base/CardTitle'
27890aae   liuqimichale   设备监控 
51
59d4d9d6   liuqimichale   设备 
52
53
54
 
  export default {
    name: 'VEquipment',
    components: {
93ff2951   liuqimichale   设备监控信息 
55
 
      CardTitle
59d4d9d6   liuqimichale   设备 
56
 
    },
633692cc   liuqimichale   axios 
57
 
    props:['equipment'],
59d4d9d6   liuqimichale   设备 
58
59
 
    data() {
      return {
93ff2951   liuqimichale   设备监控信息 
60
59d4d9d6   liuqimichale   设备 
61
62
63
 
      }
    },
    mounted(){
59d4d9d6   liuqimichale   设备 
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
    },
    methods: {
  
    }
  }
  </script>
  
  <style scoped lang="scss">
      .theme-wrap {
          height: 100%;
      }
      .theme-body {
          height: calc(100% - 30px);
          margin-left: 20px;
27890aae   liuqimichale   设备监控 
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
 
  
      }
      .equipment-section{
          float: left;
          width: 46%;
          height: 46%;
          margin: 2%;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          background: url("../images/content/deviceBg.png") no-repeat;
          background-size: 100% 100%;
          transform-style:preserve-3d;
          /*transition:1s;*/
          animation:myfirst  6s  linear  infinite;
          div{
              width: 95%;
              height: 95%;
              position: absolute;
              position:absolute;left:0;top:0;
              backface-visibility:hidden;
              padding: 15px 0 10px 0;
              text-align: center;
  
              p{
                  height: 50%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
              }
              .text-blue{
                  @include fontStyle(24px);
                  background-image: $fontBlue;
              }
              .text-orange{
                  @include fontStyle(24px);
                  background-image: $fontOrange;
              }
          }
          .normal-status{
  
          }
          .rotate-status{
              transform: rotateY(180deg);
          }
  
  
      }
      /*.equipment-section:hover{*/
          /*transform: rotateY(180deg);*/
      /*}*/
  
      @keyframes myfirst{
          0%{
              transform: rotateY(0)
          }
          30%{
              transform: rotateY(0)
          }
  
          50%{
              transform: rotateY(180deg)
          }
          80%{
              transform: rotateY(180deg)
          }
  
          100% {
                 transform: rotateY(360deg)
          }
59d4d9d6   liuqimichale   设备 
149
 
      }
93ff2951   liuqimichale   设备监控信息 
150
59d4d9d6   liuqimichale   设备 
151
152
 
  
  </style>