siteManage.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
  1. <template>
  2. <view class="site-wrapper">
  3. <!-- 筛选框start -->
  4. <view style="height:200rpx"></view>
  5. <view class="ding">
  6. <view class="cu-bar search bg-gray filter-section" style="padding-top:10rpx">
  7. <view class="search-form round bg-white" style="position:relative;overflow:auto">
  8. <input name="siteName" v-model="formMess.siteName" @click="toggleShow" @focus="focusfns"
  9. @input="handleInput()" placeholder="请输入或选择所属新线"></input>
  10. </view>
  11. </view>
  12. <view class="cu-bar search bg-gray filter-section">
  13. <view class="search-form round bg-white">
  14. <text class="cuIcon-search"></text>
  15. <input class="" type="text" placeholder="请输入站点名称" v-model="siteName"></input>
  16. </view>
  17. <view class="action">
  18. <button class="cu-btn bg-blue round" @click="searchSiteList">查询</button>
  19. </view>
  20. </view>
  21. </view>
  22. <view class="siteItems" v-if="isShow" style="max-height:60vh;overflow:auto;position:absolute;z-index:999; margin: 0 32rpx;
  23. width: calc(100% - 64rpx);top:100rpx">
  24. <view class=" site-item" v-if="!siteItemData.length">暂无结果</view>
  25. <view class="site-item" v-for="(item,index) in siteItemData" @click="changeModel(item,index)" :key="index" style="padding:16rpx 22rpx">
  26. {{item.route_name}}
  27. </view>
  28. </view>
  29. <!-- 筛选框end -->
  30. <!-- 站点列表start -->
  31. <view class="site-items" style="margin-top:0;height: calc(100vh - 380rpx)">
  32. <view class="cu-list menu-avatar">
  33. <view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''"
  34. v-for="(item,index) in siteList" :key="index" @touchstart="ListTouchStart"
  35. @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
  36. <view class="cu-avatar round lg" style="background-image: url(../../static/site-icon.png);"></view>
  37. <view class="content" @tap="goDeviceManage(item)">
  38. <view class="text-grey site-tit inOneLine" style="display:block">{{item.siteName}}</view>
  39. </view>
  40. <view class="nav-right num">
  41. <view class="text-grey text-xs">
  42. <image @click="mapLocation(item)" src="../../static/nav-icon.png"
  43. style="width:25rpx;height:25rpx;margin-right:26rpx"></image>
  44. </view>
  45. </view>
  46. <view class="move">
  47. <view class="bg-grey" @click.stop="editItem(item)">编辑</view>
  48. <view class="bg-red" @click.stop="deleteItem(item)">删除</view>
  49. </view>
  50. </view>
  51. </view>
  52. <view v-if="!siteList.length&&siteListRes==1" class="text-center margin-top"> 暂无数据</view>
  53. <view v-show="isLoadMore&&this.currentPage>1" style="padding-bottom:60px">
  54. <uni-load-more :status="loadStatus"></uni-load-more>
  55. </view>
  56. </view>
  57. <!-- 站点列表end -->
  58. <!-- 新增按钮start -->
  59. <view style="width: 100%;
  60. position: fixed;
  61. bottom: 0px;
  62. right: 0px;
  63. height: 64px;
  64. background: #fff;">
  65. <view class="plus">
  66. <image src="../../static/plus.png" style="width:100rpx;height:100rpx" @tap="goAddPage()"></image>
  67. </view>
  68. </view>
  69. <!-- 新增按钮end -->
  70. </view>
  71. </template>
  72. <!-- <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
  73. <script>
  74. </script>
  75. <script>
  76. //引入js sdk的封装
  77. import * as jwx from '../../util/jssdk.js'
  78. export default {
  79. data() {
  80. return {
  81. modalName: null,
  82. listTouchStart: 0,
  83. listTouchDirection: null,
  84. siteName: '',
  85. siteList: [],
  86. siteListRes: 0,
  87. router_id: 0,
  88. routeListData: [],
  89. route_name: '',
  90. isShow: false,
  91. formMess: {
  92. "siteName": "",
  93. },
  94. siteItemDataOrigin: [],
  95. siteItemData: [],
  96. currentPage: 1,
  97. size: 10,
  98. loadStatus: 'loading', //加载样式:more-加载前样式,loading-加载中样式,nomore-没有数据样式
  99. isLoadMore: false, //是否加载中
  100. deleteStatus:false
  101. };
  102. },
  103. onReachBottom() { //上拉触底函数
  104. if (!this.isLoadMore) { //此处判断,上锁,防止重复请求
  105. this.isLoadMore = true
  106. this.currentPage += 1;
  107. this.loadData()
  108. }
  109. },
  110. onLoad: function(option) {
  111. //站点列表渲染
  112. this.loadData()
  113. this.getRoutrBox()
  114. },
  115. methods: {
  116. //筛选
  117. searchSiteList() {
  118. this.siteList=[];
  119. this.currentPage = 1;
  120. this.siteListRes = 0;
  121. this.loadData()
  122. },
  123. loadData(){
  124. this.getSiteList({
  125. "siteName": this.siteName,
  126. "route_name": this.formMess.siteName,
  127. currentPage: this.currentPage,
  128. size: this.size,
  129. })
  130. },
  131. //新线名称下拉数据请求
  132. async getRoutrBox(params = {}) {
  133. const res = await this.$myRequest({
  134. url: 'Archives/getRoutrBox',
  135. showLoading: true,
  136. data: params
  137. })
  138. // this.routeListData = res.data.data;
  139. // console.log(this.routeListData)
  140. this.siteItemData = res.data.data;
  141. this.siteItemDataOrigin = res.data.data;
  142. this.siteItemData = this.siteItemDataOrigin;
  143. },
  144. //选中下拉选项,隐藏框,赋值
  145. changeModel: function(item, index) {
  146. this.isShow = false;
  147. this.formMess.siteName = item.route_name;
  148. },
  149. // 输入框点击 显示隐藏下拉框
  150. toggleShow: function() {
  151. this.isShow = !this.isShow;
  152. },
  153. //点击下拉筛选
  154. handleInput() {
  155. //将元素根据搜索内容过滤出来 这里改变了siteItemData
  156. this.siteItemData = this.siteItemDataOrigin;
  157. this.siteItemData = this.siteItemData.filter(item => item.route_name.indexOf(this.formMess.siteName) > -1);
  158. },
  159. focusfns: function(e) {
  160. //将元素根据搜索内容过滤出来 这里改变了siteItemData
  161. this.siteItemData = this.siteItemDataOrigin;
  162. this.siteItemData = this.siteItemData.filter(item => item.route_name.indexOf(this.formMess.siteName) >
  163. -1);
  164. },
  165. //编辑
  166. editItem(item) {
  167. uni.redirectTo({
  168. url: '/pages/siteAdd/siteAdd?id=' + item.id + '',
  169. });
  170. },
  171. //删除
  172. deleteItem(item) {
  173. this.deleteStatus=true
  174. uni.showModal({
  175. title: '确认删除吗?',
  176. content: '',
  177. success: function(result) {
  178. if (result.confirm) {
  179. this.setDelSite({
  180. "id": item.id
  181. })
  182. } else if (result.cancel) {
  183. // console.log('用户点击取消');
  184. }
  185. }.bind(this)
  186. });
  187. },
  188. // 打开导航
  189. mapLocation(item) {
  190. //h5 地图导航
  191. // window.location.href = 'http://apis.map.qq.com/uri/v1/marker?marker=coord:'+parseFloat(item.latitude)+','+parseFloat(item.longitude)+''
  192. //app导航
  193. // uni.openLocation({
  194. // latitude: parseFloat(item.latitude),
  195. // longitude: parseFloat(item.longitude),
  196. // success: function() {
  197. // // console.log('success');
  198. // }
  199. // });
  200. // 微信公众号导航
  201. jwx.configWeiXin(jweixin => {
  202. let shareInfo = {
  203. latitude: parseFloat(item.latitude), // 纬度,浮点数,范围为90 ~ -90
  204. longitude: parseFloat(item.longitude), // 经度,浮点数,范围为180 ~ -180。
  205. name: item.siteName, // 位置名
  206. address: item.address, // 地址详情说明
  207. scale: 15, // 地图缩放级别,整型值,范围从1~28。默认为最大
  208. };
  209. jweixin.openLocation(shareInfo);
  210. });
  211. },
  212. async setDelSite(ming = {}) {
  213. const res = await this.$myRequest({
  214. url: 'SiteManagement/setDelSite',
  215. data: ming
  216. })
  217. if (!res.data.flag) {
  218. uni.showToast({
  219. title: "删除失败",
  220. icon: "none"
  221. });
  222. } else {
  223. uni.showToast({
  224. title: "删除成功",
  225. });
  226. setTimeout(() => {
  227. console.log(this.siteList)
  228. // this.siteList=[]
  229. this.loadData()
  230. }, 1000);
  231. }
  232. },
  233. async getSiteList(ming = {}) {
  234. const res = await this.$myRequest({
  235. url: 'SiteManagement/getSiteList',
  236. showLoading: true,
  237. data: ming
  238. })
  239. this.siteListRes = 1;
  240. if(this.deleteStatus){
  241. this.siteList=[];
  242. this.deleteStatus=false;
  243. }
  244. if (res.data.total) {
  245. this.siteList = this.siteList.concat(res.data.data)
  246. console.log('this.siteList')
  247. console.log(this.siteList)
  248. if (res.data.data.length < this.size) { //判断接口返回数据量小于请求数据量,则表示此为最后一页
  249. this.isLoadMore = true
  250. this.loadStatus = 'nomore'
  251. } else {
  252. this.isLoadMore = false
  253. }
  254. } else {
  255. this.isLoadMore = true
  256. this.loadStatus = 'nomore'
  257. }
  258. },
  259. // 新增跳转
  260. goAddPage() {
  261. uni.redirectTo({
  262. url: '/pages/siteAdd/siteAdd',
  263. success: res => {},
  264. fail: () => {},
  265. complete: () => {}
  266. });
  267. },
  268. //跳转到设备管理页面
  269. goDeviceManage(item) {
  270. uni.navigateTo({
  271. url: '/pages/deviceManage/deviceManage?siteId=' + item.id + '',
  272. success: res => {},
  273. fail: () => {},
  274. complete: () => {}
  275. });
  276. },
  277. // ListTouch触摸开始
  278. ListTouchStart(e) {
  279. this.listTouchStart = e.touches[0].pageX
  280. },
  281. // ListTouch计算方向
  282. ListTouchMove(e) {
  283. this.listTouchDirection = e.touches[0].pageX - this.listTouchStart < -80 ? 'left' : 'right'
  284. },
  285. // ListTouch计算滚动
  286. ListTouchEnd(e) {
  287. if (this.listTouchDirection == 'left') {
  288. this.modalName = e.currentTarget.dataset.target
  289. } else {
  290. this.modalName = null
  291. }
  292. this.listTouchDirection = null
  293. }
  294. }
  295. }
  296. </script>
  297. <style>
  298. </style>