fireStation_details.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. <template>
  2. <view>
  3. <navInfo :title="'微型消防站详情'"></navInfo>
  4. <view class="bgTopImg">
  5. <image slot="right" :src="`${urls}/navBg@2x.png`" class="bgTopImg"></image>
  6. </view>
  7. <view v-if="tableData != ''" class="container uni-container ">
  8. <view class="buju">
  9. <view class="buju">
  10. <text class="miaoshu">社区名称 :</text>
  11. <text>{{ tableData.microName }}</text>
  12. </view>
  13. <text class="miaoshu">所属区县 :</text>
  14. <text>{{ tableData.county }}</text>
  15. </view>
  16. <view class="buju">
  17. <text class="miaoshu">所属单位 :</text>
  18. <text>{{ tableData.orgName }}</text>
  19. </view>
  20. <view class="buju">
  21. <text class="miaoshu">详细地址 :</text>
  22. <text>{{ tableData.addr }}</text>
  23. </view>
  24. <view class="buju">
  25. <text class="miaoshu">控制室值班人员 :</text>
  26. <text>{{ tableData.dutyer }}</text>
  27. </view>
  28. <view class="buju">
  29. <text class="miaoshu">负责人 :</text>
  30. <text>{{ tableData.charger }}</text>
  31. </view>
  32. <view class="buju">
  33. <text class="miaoshu">建站日期 :</text>
  34. <text>{{ tableData.builtOn }}</text>
  35. </view>
  36. <view class="buju">
  37. <text class="miaoshu">队员数量 :</text>
  38. <text>{{ tableData.members }}</text>
  39. </view>
  40. <view class="buju">
  41. <text class="miaoshu">报警电话 :</text>
  42. <text>{{ tableData.alarmTel }}</text>
  43. </view>
  44. <view class="buju"><text class="miaoshu">微型消防站车辆配备情况 :</text></view>
  45. <view class="buju">
  46. <view class="width100">
  47. <uni-table stripe border emptyText="暂无更多数据">
  48. <uni-tr>
  49. <uni-th align="center">水罐车</uni-th>
  50. <uni-td align="center">{{ tableData.waterTanker }}</uni-td>
  51. </uni-tr>
  52. <uni-tr>
  53. <uni-th align="center">泡沫车</uni-th>
  54. <uni-td align="center">{{ tableData.foamCar }}</uni-td>
  55. </uni-tr>
  56. <uni-tr>
  57. <uni-th align="center">消防摩托</uni-th>
  58. <uni-td align="center">{{ tableData.fireMoto }}</uni-td>
  59. </uni-tr>
  60. <uni-tr>
  61. <uni-th align="center">其它</uni-th>
  62. <uni-td align="center">{{ tableData.others }}</uni-td>
  63. </uni-tr>
  64. </uni-table>
  65. </view>
  66. </view>
  67. <u-button style="width:60%;margin-top:80rpx" @click="gotoEditStation(tableData)" shape="circle" size="large" color="#4cb2b6"
  68. text="修改信息"></u-button>
  69. </view>
  70. </view>
  71. </template>
  72. <script>
  73. var that = null;
  74. import config from '@/config'
  75. const baseUrlImg=config.baseUrlImg
  76. import navInfo from '@/pagesA/components/my-nav/nav'
  77. import {
  78. shijianc
  79. } from '@/utils/common.js'
  80. export default {
  81. components: {
  82. navInfo
  83. },
  84. data() {
  85. return {
  86. urls:baseUrlImg,
  87. tableData: {
  88. orgName: ''
  89. }
  90. };
  91. },
  92. onLoad: function(option) {
  93. that = this;
  94. var data = option.id;
  95. // 接收来自上个页面传递的参数
  96. const eventChannel = this.getOpenerEventChannel();
  97. eventChannel.on('acceptDataFromOpenerPage', function(val) {
  98. that.tableData = val;
  99. that.tableData.builtOn=uni.$u.timeFormat(val.builtOn, 'yyyy-mm-dd')
  100. });
  101. this.tableData.orgName = option.orgName;
  102. console.log('option: ', that.tableData);
  103. },
  104. methods: {
  105. // 传递当前页面数据到 ‘修改信息’
  106. gotoEditStation(val) {
  107. uni.navigateTo({
  108. url: '/pagesA/fire/fire_station/edit_fireStation/edit_fireStation',
  109. events: {
  110. // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
  111. acceptDataFromOpenedPage: function(val) {
  112. this.tableData = val;
  113. }
  114. },
  115. success: function(res) {
  116. // 通过eventChannel向被打开页面传送数据
  117. res.eventChannel.emit('acceptDataFromOpenerPage', val);
  118. }
  119. });
  120. }
  121. }
  122. };
  123. </script>
  124. <style lang="scss" scoped>
  125. page {
  126. background-color: #fff !important;
  127. }
  128. .buju {
  129. margin: 40rpx 0;
  130. }
  131. .container {
  132. border-radius: 30px 30px 0px 0px;
  133. background: #fff;
  134. /*#ifdef H5*/
  135. margin-top: 50rpx;
  136. /* #endif */
  137. /* #ifdef MP-WEIXIN*/
  138. margin-top: 100rpx;
  139. /* #endif */
  140. z-index: 999999999999999999;
  141. position: relative;
  142. }
  143. .cont {}
  144. .weiwan {
  145. color: #d51a52;
  146. background: rgba(213, 26, 82, 0.2);
  147. padding: 5rpx 20rpx;
  148. border-radius: 2px;
  149. border: 1px solid #d51a52;
  150. }
  151. .yiwan {
  152. color: #4cb2b6;
  153. background: rgba(76, 178, 182, 0.2);
  154. padding: 5rpx 20rpx;
  155. border-radius: 2px;
  156. border: 1px solid #4cb2b6;
  157. }
  158. .miaoshu {
  159. margin-right: 20rpx;
  160. color: #274647;
  161. font-weight: 600;
  162. }
  163. /deep/.uni-table-tr,
  164. /deep/.table--stripe[data-v-6cd49106] .uni-table-tr:nth-child(2n + 3),
  165. /deep/.table--stripe.data-v-6cd49106 .uni-table-tr:nth-child(2n + 3),/deep/.table--stripe {
  166. background-color: #F2F4F6;
  167. }
  168. /deep/.table--border[data-v-511e81f9],
  169. /deep/.table--border.data-v-511e81f9,/deep/.table--border {
  170. border-right: 2px #E5E5E5 solid;
  171. border-top-left-radius: 10px !important;
  172. border-bottom-left-radius: 10px !important;
  173. }
  174. /deep/.table--border[data-v-321f8e79],
  175. /deep/.table--border.data-v-321f8e79,/deep/.table--borde{
  176. border-top-right-radius: 10px !important;
  177. border-bottom-right-radius: 10px !important;
  178. }
  179. /deep/ .uni-table {
  180. //这行代码为间隔效果!!!
  181. border-spacing: 0px 6px !important;
  182. background-color: #fff;
  183. }
  184. /deep/ .table--border {
  185. border: none;
  186. }
  187. </style>