p-personnel-orientation-section-1.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. <template>
  2. <view>
  3. <view class="content">
  4. <view class="title">
  5. 当前井下人员
  6. </view>
  7. <view class="inner">
  8. <slot></slot>
  9. </view>
  10. <!-- 当前下井领导 -->
  11. <view class="list" v-if="people_list.length > 0">
  12. <view class="label">
  13. <view class="text box_1">姓名</view>
  14. <view class="text box_2">下井时间</view>
  15. <view class="text box_3">当前位置</view>
  16. </view>
  17. <view class="item" v-for="(item,index) in people_list" :key="index">
  18. <view class="text box_1">{{item.name}}</view>
  19. <view class="text box_2">{{item.down_time}}</view>
  20. <view class="text box_3">{{item.station_name}}</view>
  21. </view>
  22. </view>
  23. </view>
  24. </view>
  25. </template>
  26. <script>
  27. export default {
  28. props: ['mine'],
  29. data() {
  30. return {
  31. // mine:"",
  32. people_list: [],
  33. }
  34. },
  35. watch: {
  36. // mine: function(newVal, oldVal) {
  37. // this.mine = newVal
  38. // console.log(newVal)
  39. // }
  40. },
  41. created() {
  42. this.$p_api.personnel_people_now({
  43. mine: this.mine
  44. }).then((res) => {
  45. console.log(res)
  46. this.people_list = res.data.data.people_list
  47. })
  48. }
  49. }
  50. </script>
  51. <style lang="scss">
  52. .content {
  53. margin-top: 16rpx;
  54. background: #FFFFFF;
  55. box-shadow: 0px 3rpx 29rpx 0px rgba(59, 74, 116, 0.14);
  56. border-radius: 20rpx;
  57. .title {
  58. line-height: 96rpx;
  59. text-align: center;
  60. font-size: 30rpx;
  61. font-family: PingFangSC-Regular, PingFang SC;
  62. font-weight: 400;
  63. color: #232627;
  64. border-bottom: 2rpx solid #f3f3f3;
  65. }
  66. .inner {
  67. // height: 500px;
  68. }
  69. }
  70. .list {
  71. padding: 0 10rpx;
  72. .label {
  73. display: flex;
  74. align-items: center;
  75. height: 82rpx;
  76. background: #F3F6FA;
  77. .text {
  78. text-align: center;
  79. font-size: 27rpx;
  80. font-family: PingFangSC-Regular, PingFang SC;
  81. font-weight: 400;
  82. color: #232627;
  83. overflow: hidden;
  84. white-space: nowrap;
  85. text-overflow: ellipsis;
  86. }
  87. .box_1 {
  88. width: 150rpx;
  89. }
  90. .box_2 {
  91. width: 150rpx;
  92. }
  93. .box_3 {
  94. text-align: right;
  95. width: 400rpx;
  96. padding-right: 15rpx;
  97. }
  98. }
  99. .item {
  100. display: flex;
  101. align-items: center;
  102. height: 82rpx;
  103. .text {
  104. text-align: center;
  105. font-size: 27rpx;
  106. font-family: PingFangSC-Regular, PingFang SC;
  107. font-weight: 400;
  108. color: #232627;
  109. overflow: hidden;
  110. white-space: nowrap;
  111. text-overflow: ellipsis;
  112. }
  113. .box_1 {
  114. width: 150rpx;
  115. }
  116. .box_2 {
  117. width: 150rpx;
  118. }
  119. .box_3 {
  120. text-align: right;
  121. width: 400rpx;
  122. padding-right: 15rpx;
  123. }
  124. }
  125. }
  126. </style>