network.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. <template>
  2. <view class="content">
  3. <map
  4. id="map"
  5. :latitude="lat"
  6. :longitude="lng"
  7. scale="18"
  8. show-compass
  9. show-location
  10. :markers="markers"
  11. style="width: 100%; height:500rpx;">
  12. </map>
  13. <!-- 网点信息及设备 -->
  14. <view class="details" v-if="stationData">
  15. <view class="details-address">
  16. <image src="/static/md-big-pic.png" class="store-pic"></image>
  17. <view class="store-info">
  18. <view>{{ stationData.name || '--' }}</view>
  19. <view>{{ stationData.provinceName||'' }}{{ stationData.cityName||'' }}{{ stationData.districtName||'' }}{{ stationData.address||'' }}</view>
  20. <view>
  21. 营业时间:
  22. <text v-for="(tItem, tInd) in stationData.deliveryTimeRuleItemList" :key="tInd">
  23. {{ tItem.openTime }} - {{ tItem.closeTime }}{{ tInd == stationData.deliveryTimeRuleItemList.length - 1 ? '' : ',' }}
  24. </text>
  25. </view>
  26. </view>
  27. </view>
  28. <!-- 设备列表 -->
  29. <view class="details-dev">
  30. <view class="details-dev-box" v-for="item in deviceData" :key="item.id">
  31. <view class="details-dev-title">设备编号:<text>{{ item.srcDeviceCode }}</text></view>
  32. <view class="details-dev-cons">
  33. <view class="dev-item" v-for="boxItem in item.deviceTypeBoxList" :key="boxItem.id">
  34. <view class="item-pic-con">
  35. <text v-if="boxItem.flag==1" class="full-sign">已满</text>
  36. <u-image mode="aspectFit" height="80" width="80" :src="`/static/${boxItem.rubbishType}.png`" class="type-sign"></u-image>
  37. </view>
  38. <view class="dev-main">
  39. <view>
  40. {{ boxItem.rubbishTypeDictValue }}
  41. </view>
  42. <view class="rule-con">
  43. {{ boxItem.boxCode | stockVal(item) }}
  44. </view>
  45. </view>
  46. </view>
  47. </view>
  48. </view>
  49. <u-empty v-if="deviceData.length==0" icon-size="60" text="暂无设备" mode="list" margin-top="120"></u-empty>
  50. </view>
  51. </view>
  52. </view>
  53. </template>
  54. <script>
  55. import { stationDevice, getWaitToCleanDetailHeader } from '@/api/cleared.js'
  56. export default {
  57. data() {
  58. return {
  59. stationNo: '', // 网点编号
  60. lat: '',
  61. lng: '',
  62. mapCtx: null, // 地图对象
  63. markers: [], // 标注点
  64. stationData: null, // 网点信息
  65. deviceData: [], // 设备信息
  66. };
  67. },
  68. filters: {
  69. stockVal: function (val, obj) { // 各个内置箱体的当前【库存量】
  70. let num
  71. if(val == 1){
  72. num = obj.boxOne ? (obj.boxOne/1000).toFixed(3) : 0
  73. return num + 'kg'
  74. }else if(val == 2){
  75. num = obj.boxTwo ? (obj.boxTwo/1000).toFixed(3) : 0
  76. return num + 'kg'
  77. }else if(val == 3){
  78. num = obj.boxThree ? (obj.boxThree/1000).toFixed(3) : 0
  79. return num + 'kg'
  80. }else if(val == 4){
  81. num = obj.boxFour ? (obj.boxFour/1000).toFixed(3) : 0
  82. return num + 'kg'
  83. }else if(val == 5){
  84. num = obj.boxFive ? (obj.boxFive/1000).toFixed(3) : 0
  85. return num + 'kg'
  86. }
  87. }
  88. },
  89. onLoad(options) {
  90. this.stationNo = options.stationNo
  91. this.getStation() // 网点信息
  92. this.getDevice() // 设备信息
  93. // 开启分享
  94. uni.showShareMenu({
  95. withShareTicket: true,
  96. menus: ['shareAppMessage', 'shareTimeline']
  97. })
  98. },
  99. methods: {
  100. // 网点信息
  101. getStation(){
  102. getWaitToCleanDetailHeader({ stationNo: this.stationNo }).then(res => {
  103. if(res.status == 200){
  104. this.stationData = res.data
  105. this.markers = []
  106. this.markers.push({
  107. latitude: res.data.lat,
  108. longitude: res.data.lng,
  109. width: 30,
  110. height: 30,
  111. iconPath: "/static/store.png"
  112. })
  113. this.lng = res.data.lng
  114. this.lat = res.data.lat
  115. }else{
  116. this.stationData = null
  117. this.markers = []
  118. this.lng = ''
  119. this.lat = ''
  120. }
  121. })
  122. },
  123. // 设备信息
  124. getDevice(){
  125. stationDevice({ stationNo: this.stationNo }).then(res => {
  126. if(res.status == 200){
  127. this.deviceData = res.data
  128. }else{
  129. this.deviceData = []
  130. }
  131. })
  132. },
  133. // 根据垃圾类型获取兑换规则
  134. getRule(type){
  135. let row = null
  136. if(this.stationData.goldExRuleItemList){
  137. row = this.stationData.goldExRuleItemList.find(item => item.rubbishType == type)
  138. }
  139. return { rubbishWeight: row.rubbishWeight || 0, goleNum: row.goleNum || 0 }
  140. }
  141. }
  142. }
  143. </script>
  144. <style lang="scss">
  145. .content{
  146. width: 100%;
  147. padding: 0;
  148. .details{
  149. margin: 20upx;
  150. .details-address{
  151. display: flex;
  152. align-items: center;
  153. padding: 20upx;
  154. background: #FFFFFF;
  155. border-radius: 15upx;
  156. box-shadow: 0upx 3upx 6upx #eee;
  157. margin-bottom: 20upx;
  158. .store-pic{
  159. width: 120rpx;
  160. height:120rpx;
  161. margin-right: 20rpx;
  162. }
  163. .store-info{
  164. >view{
  165. font-size: 24upx;
  166. padding: 5upx 0;
  167. color: #666;
  168. &:first-child{
  169. font-weight: bold;
  170. font-size: 30upx;
  171. color: #333;
  172. }
  173. }
  174. }
  175. }
  176. .details-dev{
  177. .details-dev-box{
  178. padding: 20upx 20upx 5upx;
  179. background: #FFFFFF;
  180. border-radius: 15upx;
  181. box-shadow: 0upx 3upx 6upx #eee;
  182. margin-bottom: 20upx;
  183. .details-dev-title{
  184. border-bottom: 1px solid #F8F8F8;
  185. padding: 10upx 0 20upx;
  186. text{
  187. color: #666;
  188. }
  189. }
  190. .details-dev-cons{
  191. padding: 10upx 0;
  192. display: flex;
  193. flex-wrap: wrap;
  194. .dev-item{
  195. width: 50%;
  196. display: flex;
  197. align-items: center;
  198. > view{
  199. padding: 25upx 10upx 15upx 0;
  200. &:last-child{
  201. view{
  202. display: flex;
  203. align-items: center;
  204. .u-tag{
  205. margin-left: 10upx;
  206. }
  207. }
  208. }
  209. }
  210. .item-pic-con{
  211. position: relative;
  212. padding-left: 30rpx;
  213. .full-sign{
  214. font-size: 24rpx;
  215. padding: 4rpx 10rpx 14rpx;
  216. color: #fff;
  217. background: url('/static/full-bg.png') no-repeat;
  218. background-size: 100% 100%;
  219. transform: scale(0.8);
  220. position: absolute;
  221. left: 0;
  222. top: 0;
  223. width: 68rpx;
  224. height: 55rpx;
  225. z-index: 9;
  226. }
  227. }
  228. .dev-main{
  229. .rule-con{
  230. color: #666;
  231. font-size: 24upx;
  232. .goleNum{
  233. color: #eb0000;
  234. font-size: 26rpx;
  235. font-weight: bold;
  236. margin-left: 4rpx;
  237. }
  238. .ld-pic{
  239. width: 30rpx;
  240. height: 30rpx;
  241. margin-left: 6rpx;
  242. }
  243. }
  244. }
  245. }
  246. }
  247. }
  248. }
  249. }
  250. }
  251. </style>