passenger.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  1. <template>
  2. <view class="page-body">
  3. <page-header :name="'东井驾空乘人器'" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
  4. <view class="scroll-wrap">
  5. <view class="basic-info-wrap">
  6. <view class="info-wrap">
  7. <view v-for="(item,index) in list" class="data-item-wrap">
  8. <view class="title">{{ item.name }}</view>
  9. <view class="data">{{ item.params }}</view>
  10. </view>
  11. </view>
  12. <view class="img-wrap">
  13. <image src="@/static/passenger.png" />
  14. </view>
  15. <view class="radius-wrap"></view>
  16. </view>
  17. <view class="detail-info-wrap">
  18. <page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'信号参数'">
  19. <template v-slot:content>
  20. <view class="detail-wrap">
  21. <template v-for="(item, index) in statusList">
  22. <view class="item" v-if="!item.data">
  23. <status-tip class="status-wrap" :name="item.name"
  24. :status="item.status"></status-tip>
  25. </view>
  26. <view class="item" v-else>
  27. <view>{{ item.name }}</view>
  28. <view class="params">{{ item.params }}</view>
  29. </view>
  30. </template>
  31. </view>
  32. </template>
  33. </page-card>
  34. <page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'变频参数'">
  35. <template v-slot:content>
  36. <view class="params-wrap">
  37. <view class="item" v-for="(item, index) in paramsList">
  38. <view>
  39. {{ item.name }}
  40. </view>
  41. <view>
  42. {{ item.params }}
  43. </view>
  44. </view>
  45. </view>
  46. </template>
  47. </page-card>
  48. </view>
  49. </view>
  50. </view>
  51. </template>
  52. <script>
  53. export default {
  54. data() {
  55. return {
  56. list: [{
  57. name: '停车倒计时',
  58. params: '0s'
  59. }, {
  60. name: '猴车速度',
  61. params: '0m/s'
  62. }, {
  63. name: '制动闸压力',
  64. params: '07.54MPa'
  65. }],
  66. statusList: [{
  67. name: '操作台急停',
  68. status: 1,
  69. }, {
  70. name: '965通讯中断',
  71. status: 1,
  72. }, {
  73. name: '1172通讯中断',
  74. status: 1,
  75. }, {
  76. name: '机尾上人信号',
  77. status: 1,
  78. }, {
  79. name: '1065上人信号',
  80. status: 1,
  81. }, {
  82. name: '1172上人信号',
  83. status: 1,
  84. }, {
  85. name: '上位机急停',
  86. status: 1,
  87. }, {
  88. name: '1065通讯中断',
  89. status: 1,
  90. }, {
  91. name: '机尾通讯中断',
  92. status: 1,
  93. }],
  94. paramsList: [{
  95. name: '母线电压',
  96. data: '999.00',
  97. },{
  98. name: '输入电压',
  99. data: '699.60',
  100. },{
  101. name: '输入电流',
  102. data: '9.49',
  103. },{
  104. name: '输入频率',
  105. data: '49.94',
  106. },{
  107. name: '有功功率',
  108. data: '11.00',
  109. },{
  110. name: '无功功率',
  111. data: '0.00',
  112. },{
  113. name: '变频温度',
  114. data: '19.80',
  115. },{
  116. name: '逆母线电压',
  117. data: '995.00',
  118. },{
  119. name: '输出电压',
  120. data: '584.40',
  121. },{
  122. name: '输出转矩',
  123. data: '50.10',
  124. },{
  125. name: '输出频率',
  126. data: '44.30',
  127. },{
  128. name: '电机速度',
  129. data: '885.00',
  130. },{
  131. name: '输出电流',
  132. data: '27.00',
  133. },{
  134. name: '输出功率',
  135. data: '4.30',
  136. },{
  137. name: '输入功率',
  138. data: '6.30',
  139. },{
  140. name: '交频温度',
  141. data: '21.20',
  142. }]
  143. }
  144. },
  145. onLoad() {
  146. this.getData()
  147. },
  148. methods: {
  149. goBack() { // 返回上一頁面
  150. uni.navigateBack()
  151. },
  152. async getData() {
  153. let res = await this.$http({
  154. url: `/qsy/dcs/transform/djjkcrq`,
  155. method: 'POST'
  156. })
  157. this.list = res.data.data.list
  158. this.statusList = res.data.data.statusList
  159. this.paramsList = res.data.data.paramsList
  160. }
  161. }
  162. }
  163. </script>
  164. <style scoped lang="scss">
  165. .page-body {
  166. .scroll-wrap {
  167. height: calc(100vh - 85rpx);
  168. overflow: scroll;
  169. .basic-info-wrap {
  170. position: relative;
  171. height: auto;
  172. padding: 50rpx 49rpx 0;
  173. background: url(../../../../static/page_bg.png);
  174. background-size: 110%;
  175. .info-wrap {
  176. display: flex;
  177. flex-wrap: wrap;
  178. .data-item-wrap {
  179. width: 33.33%;
  180. padding: 9rpx 0;
  181. min-height: 81rpx;
  182. text-align: center;
  183. margin-top: 48rpx;
  184. border-right: 1px solid #FFFFFF;
  185. .title {
  186. font-size: 22rpx;
  187. color: #FFFFFF;
  188. margin-bottom: 14rpx;
  189. }
  190. .data {
  191. font-weight: 700;
  192. font-size: 32rpx;
  193. color: #FFF600;
  194. }
  195. }
  196. .data-item-wrap:nth-child(-n+3) {
  197. margin-top: 0;
  198. }
  199. .data-item-wrap:nth-child(3n) {
  200. border: none;
  201. }
  202. }
  203. .img-wrap {
  204. padding: 38rpx 0 57rpx;
  205. text-align: center;
  206. image {
  207. width: 350rpx;
  208. height: 194rpx;
  209. }
  210. }
  211. .radius-wrap {
  212. position: absolute;
  213. left: 0;
  214. bottom: 0;
  215. width: 100vw;
  216. height: 30rpx;
  217. background-color: #fff;
  218. border-radius: 35rpx 35rpx 0 0;
  219. }
  220. }
  221. .detail-info-wrap {
  222. padding: 40rpx 35rpx;
  223. .detail-wrap {
  224. display: flex;
  225. flex-wrap: wrap;
  226. padding: 35rpx 55rpx 18rpx 55rpx;
  227. color: #8D8D8D;
  228. .item {
  229. display: flex;
  230. font-size: 26rpx;
  231. justify-content: space-between;
  232. width: calc(50% - 61rpx);
  233. margin-bottom: 50rpx;
  234. .params {
  235. color: #00BD00;
  236. }
  237. .status-wrap {
  238. width: 100%;
  239. /deep/ .tip-wrap {
  240. width: 100%;
  241. justify-content: space-between;
  242. }
  243. }
  244. }
  245. .item:nth-child(2n) {
  246. margin-left: 120rpx;
  247. }
  248. }
  249. .params-wrap {
  250. display: flex;
  251. flex-wrap: wrap;
  252. font-size: 26rpx;
  253. padding: 35rpx 55rpx;
  254. .item {
  255. width: calc(50% - 32rpx);
  256. display: flex;
  257. justify-content: space-between;
  258. margin-top: 50rpx;
  259. view:first-child {
  260. color: #8D8D8D;
  261. }
  262. }
  263. .item:nth-child(2n) {
  264. margin-left: 62rpx;
  265. }
  266. .item:nth-child(-n+2) {
  267. margin-top: 0;
  268. }
  269. }
  270. }
  271. }
  272. }
  273. </style>