driving-machine.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  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="data-wrap">
  7. <view class="data-item-wrap" v-for="(item, index) in dataList" :key="index">
  8. <view class="title">{{ item.name }}</view>
  9. <view class="data">{{ item.params }}</view>
  10. </view>
  11. </view>
  12. <view class="radius-wrap"></view>
  13. </view>
  14. <view class="detail-info-wrap">
  15. <page-card :name="'掘进机信息'" style="margin-bottom: 30rpx;">
  16. <template v-slot:content>
  17. <view class="info-wrap">
  18. <view class="item-wrap">
  19. <view class="name">未掘进距离</view>
  20. <view class="data">324.8m</view>
  21. </view>
  22. <view class="item-wrap">
  23. <view class="name">已掘进距离</view>
  24. <view class="data">2344.2m</view>
  25. </view>
  26. </view>
  27. <view class="driving-info-wrap">
  28. <image src="@/static/znjj.png"/>
  29. </view>
  30. </template>
  31. </page-card>
  32. <page-card :name="'机身姿态'" :notShow="true" style="margin-bottom: 30rpx;">
  33. <template v-slot:content>
  34. <view>
  35. <simple-table :tableHead="tableHead" :list="bodyList"></simple-table>
  36. </view>
  37. </template>
  38. </page-card>
  39. <page-card :name="'旋臂姿态'" :notShow="true" style="margin-bottom: 30rpx;">
  40. <template v-slot:content>
  41. <view>
  42. <simple-table :tableHead="tableHead" :list="armList"></simple-table>
  43. </view>
  44. </template>
  45. </page-card>
  46. <page-card :name="'输入电压'" :notShow="true">
  47. <template v-slot:content>
  48. <view>
  49. <simple-table :tableHead="tableHead" :list="voltageList"></simple-table>
  50. </view>
  51. </template>
  52. </page-card>
  53. </view>
  54. </view>
  55. </view>
  56. </template>
  57. <script>
  58. export default {
  59. data() {
  60. return {
  61. tableHead: ['名称', '参数'], // 表头名称
  62. dataList: [{ // 掘进机信息
  63. name: '工作面名称',
  64. params: '150201工作面胶带巷'
  65. },{
  66. name: '施工单位',
  67. params: '综掘二队'
  68. },{
  69. name: '生产组织模式',
  70. params: '二掘一修'
  71. },{
  72. name: '综掘机型号',
  73. params: 'EBZ200M-2A'
  74. },{
  75. name: '截割功率',
  76. params: '200kw'
  77. },{
  78. name: '巷道长度',
  79. params: '2667'
  80. },{
  81. name: '掘进断面',
  82. params: '23.31m²'
  83. },{
  84. name: '永久支护工艺',
  85. params: '锚、网、索、W钢带 桁架联合支护'
  86. },{
  87. name: '胶带机型号',
  88. params: 'DSJ100/40/160 胶带输送机'
  89. },{
  90. name: '胶带机控制方式',
  91. params: '集控'
  92. }],
  93. machineList: [{
  94. name: '未掘进距离',
  95. params: '324.8m'
  96. },{
  97. name: '已掘进距离',
  98. params: '2344.2m'
  99. }],
  100. bodyList: [{ // 机身姿态
  101. name: '俯仰角度(°)',
  102. params: ['-0.09']
  103. },{
  104. name: '水平角度(°)',
  105. params: ['91.47']
  106. },{
  107. name: '翻滚角度(°)',
  108. params: ['0.2']
  109. },{
  110. name: '掘进机行走速度(mm/s)',
  111. params: ['0']
  112. }],
  113. armList: [{ // 旋臂姿态
  114. name: '回旋角度(°)',
  115. params: ['0']
  116. },{
  117. name: '升降角度(°)',
  118. params: ['0']
  119. }],
  120. voltageList: [{
  121. name: '线线电压(V)',
  122. params: ['0']
  123. }]
  124. }
  125. },
  126. onLoad() {
  127. },
  128. methods: {
  129. goBack() { // 返回上一頁面
  130. uni.navigateBack()
  131. }
  132. }
  133. }
  134. </script>
  135. <style scoped lang="scss">
  136. .page-body {
  137. .scroll-wrap {
  138. height: calc(100vh - 85rpx);
  139. overflow: scroll;
  140. .basic-info-wrap {
  141. position: relative;
  142. height: 810rpx;
  143. padding: 25rpx 35rpx 99rpx;
  144. background-color: #00A1E9;
  145. background: url(../../../../static/page_bg.png);
  146. background-size: 100% 110%;
  147. background-repeat: no-repeat;
  148. .data-wrap {
  149. display: flex;
  150. flex-wrap: wrap;
  151. .data-item-wrap {
  152. width: 33.33%;
  153. padding: 9rpx 0;
  154. min-height: 81rpx;
  155. text-align: center;
  156. margin-top: 60rpx;
  157. border-right: 1px solid #FFFFFF;
  158. .title {
  159. font-size: 22rpx;
  160. color: #FFFFFF;
  161. margin-bottom: 14rpx;
  162. }
  163. .data {
  164. font-weight: 700;
  165. font-size: 32rpx;
  166. color: #FFF600;
  167. }
  168. }
  169. .data-item-wrap:nth-child(-n+3){
  170. margin-top: 0;
  171. }
  172. .data-item-wrap:nth-child(3n) {
  173. border: none;
  174. }
  175. }
  176. .radius-wrap {
  177. position: absolute;
  178. left: 0;
  179. bottom: 0;
  180. width: 100vw;
  181. height: 30rpx;
  182. background-color: #fff;
  183. border-radius: 35rpx 35rpx 0 0;
  184. }
  185. }
  186. .detail-info-wrap {
  187. padding: 40rpx 35rpx;
  188. .info-wrap {
  189. display: flex;
  190. padding: 36rpx 35rpx 58rpx;
  191. .item-wrap {
  192. display: flex;
  193. font-size: 26rpx;
  194. width: 50%;
  195. .name {
  196. color: #8D8D8D;
  197. margin-right: 31rpx;
  198. }
  199. .data {
  200. color: #000000;
  201. }
  202. }
  203. }
  204. .driving-info-wrap {
  205. text-align: center;
  206. image {
  207. width: 427rpx;
  208. height: 264rpx;
  209. vertical-align: bottom;// 解决image背景图片下方有10rpx 的白边
  210. padding-bottom: 44rpx;
  211. }
  212. }
  213. }
  214. }
  215. }
  216. </style>