You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

466 regels
11 KiB

  1. <template>
  2. <view class="cented">
  3. <view style="width: 690rpx;margin: 0 auto;margin-top: 20rpx;">
  4. <u-search @search='shecs()' :show-action='false' placeholder="请输入设备编号或领用人进行搜索" v-model="imei"></u-search>
  5. </view>
  6. <view class="tab-box">
  7. <!-- <view class="tab-item-wrap">
  8. <view v-for="(item, index) in tablist" :key="index" :class="activeClass == index ? 'bottom' : ''" @tap="clocktab(index)">
  9. {{item.names}}( {{item.num}} )
  10. <view class="bottomLine" v-if="activeClass == index"></view>
  11. </view>
  12. </view> -->
  13. <u-tabs-swiper ref="tabs" font-size="30" :bold="true" swiper-width="700" :current="activeClass" @change="clocktab()"
  14. inactive-color="#b1b1b1" active-color="#008ef2" :list="tablist" :is-scroll="true">
  15. </u-tabs-swiper>
  16. </view>
  17. <view class="infoet">
  18. <view class="infoviewbox" v-for="(item,index) in newListdata" :key="index">
  19. <view class="infobox1">
  20. <view class="box1-zuo">领用人:{{item.accName}}</view>
  21. <view class="box1-you">
  22. <view class="you1" v-if="item.electricity>20">
  23. <view class="youimg" :style="{ height: item.electricity + '%' }"></view>
  24. </view>
  25. <view class="you11" v-if="item.electricity<20">
  26. <view class="youimg" :style="{ height: item.electricity + '%' }"></view>
  27. </view>
  28. <view class="you2">电量:
  29. <text v-if="item.electricity>20">{{item.electricity}}%</text>
  30. <text v-if="item.electricity<20" style="color: red;">{{item.electricity}}%</text>
  31. </view>
  32. <view class="you3">
  33. <image v-if="item.signalDevice==''" class="youimg" src="../../../static/images/newimg/xinhao0.png" mode=""></image>
  34. <image v-if="item.signalDevice<20 && item.signalDevice>0" class="youimg" src="../../../static/images/newimg/xinhao1.png" mode=""></image>
  35. <image v-if="item.signalDevice<50 && item.signalDevice>20" class="youimg" src="../../../static/images/newimg/xinhao2.png" mode=""></image>
  36. <image v-if="item.signalDevice<70 && item.signalDevice>50" class="youimg" src="../../../static/images/newimg/xinhao3.png" mode=""></image>
  37. <image v-if="item.signalDevice<90 && item.signalDevice>70" class="youimg" src="../../../static/images/newimg/xinhao4.png" mode=""></image>
  38. <image v-if="item.signalDevice<=100 && item.signalDevice>90" class="youimg" src="../../../static/images/newimg/xinhao5.png" mode=""></image>
  39. </view>
  40. <view class="you4" v-if="item.signalDevice=='' ">信号:0</view>
  41. <view class="you4" v-else>信号:{{item.signalDevice}}</view>
  42. </view>
  43. </view>
  44. <view class="infobox2">
  45. <view class="box2-zuo">设备编号</view>
  46. <view class="box2-you">{{item.imei}}</view>
  47. </view>
  48. <view class="infobox2">
  49. <view class="box2-zuo">录音状态</view>
  50. <view class="box2-you" v-if="item.audioStatus=='false'">关闭</view>
  51. <view class="box2-you" v-if="item.audioStatus=='true'">开启</view>
  52. <view class="box2-you" v-if="item.audioStatus=='' ">关闭</view>
  53. </view>
  54. <view class="infobox2">
  55. <view class="box2-zuo">待上传</view>
  56. <view class="box2-you"><!--
  57. <template v-if="item.audioUploadStatus=='false'">无上传</template>
  58. <template v-if="item.audioUploadStatus=='true'">上传中</template>
  59. <template v-if="item.audioUploadStatus=='' ">无上传</template> -->
  60. <template v-if="item.fileCount && item.fileCount > 0">
  61. <text class="stayupload">{{ item.fileCount }}条</text>
  62. </template>
  63. <template v-else>
  64. 0
  65. </template>
  66. </view>
  67. </view>
  68. <view class="infobox2">
  69. <view class="box2-zuo">更新时间</view>
  70. <view class="box2-you">{{item.updateTime}}</view>
  71. </view>
  72. <view class="infobox2" v-if="activeClass==1">
  73. <view class="box2-zuo">最后在线时间</view>
  74. <view class="box2-you" style="font-size: 28rpx;color: red;">{{item.updateTime | formatDate}}</view>
  75. </view>
  76. </view>
  77. </view>
  78. </view>
  79. </template>
  80. <script>
  81. var util = require("../../../utils/util.js");
  82. export default {
  83. data() {
  84. return {
  85. tablist: [
  86. {
  87. name: "全部(0)",
  88. },
  89. {
  90. name: "在线(0)",
  91. },
  92. {
  93. name: "低电量(0)",
  94. },
  95. {
  96. name: "今日活跃(0)",
  97. },
  98. {
  99. name: "离线(0)",
  100. }
  101. ],
  102. activeClass: 0,
  103. pageNum:1,
  104. pageSize:20,
  105. imei:"",
  106. orgcode:"",
  107. newListdata:[],
  108. buildingID:'',
  109. jump:''
  110. };
  111. },
  112. onReachBottom() {
  113. this.pageNum +=1;
  114. this.init()
  115. },
  116. onPullDownRefresh(){
  117. this.init()
  118. setTimeout(function () {
  119. uni.stopPullDownRefresh();
  120. }, 1000);
  121. },
  122. onLoad(options) {
  123. if(options.active){
  124. this.activeClass=options.active
  125. }else{
  126. this.activeClass=0
  127. }
  128. this.newListdata=[]
  129. this.pageNum=1;
  130. this.pageSize=20;
  131. this.init()
  132. },
  133. filters: {
  134. formatDate: (dateTimeStamp) => {
  135. var newDate = new Date(dateTimeStamp.replace(/-/g, '/')).getTime();
  136. var minute = 1000 * 60;
  137. var hour = minute * 60;
  138. var day = hour * 24;
  139. var halfamonth = day * 15;
  140. var month = day * 30;
  141. var now = new Date().getTime();
  142. var diffValue = now - newDate;
  143. if(diffValue < 0){return;}
  144. var monthC =diffValue/month;
  145. var weekC =diffValue/(7*day);
  146. var dayC =diffValue/day;
  147. var hourC =diffValue/hour;
  148. var minC =diffValue/minute;
  149. var result = '';
  150. if(weekC>=1){
  151. result= "1周前";
  152. }else if(dayC>=1){
  153. result=""+ parseInt(dayC) +"天前";
  154. } else if(hourC>=1){
  155. result=""+ parseInt(hourC) +"小时前";
  156. }
  157. else if(minC>=1){
  158. result=""+ parseInt(minC) +"分钟前";
  159. }else{
  160. result="刚刚";
  161. }
  162. return result;
  163. }
  164. },
  165. methods: {
  166. shecs(){
  167. this.newListdata=[]
  168. this.pageNum=1;
  169. this.pageSize=20;
  170. this.init()
  171. },
  172. // tab
  173. clocktab(index) {
  174. this.activeClass=index;
  175. this.newListdata=[]
  176. this.pageNum=1;
  177. this.pageSize=20;
  178. this.init()
  179. },
  180. init(){
  181. this.buildingID=uni.getStorageSync('buildingID').id;
  182. const parames = {
  183. pageNum: this.pageNum,
  184. pageSize: this.pageSize,
  185. query:{
  186. imei:this.imei,
  187. onLine:this.activeClass,
  188. propertyId:this.buildingID,
  189. orderType:1
  190. }
  191. }
  192. if(this.activeClass==0){
  193. parames.query.onLine=null
  194. }
  195. this.$u.post("/equipment/apiFindByPage", parames).then(res => {
  196. this.tablist[0].name="全部("+res.allCount+")";
  197. this.tablist[1].name="在线("+res.eqOnLineCount+")";
  198. this.tablist[2].name="低电量("+res.lowElectricityCount+")";
  199. this.tablist[3].name="今日活跃("+res.activeCount+")";
  200. this.tablist[4].name="离线("+res.eqOffLineCount+")";
  201. if(res.obj.list.results==null){
  202. if (this.pageNum == 1){
  203. return
  204. }else{
  205. uni.showToast({
  206. title: '已经到底了!',
  207. duration: 2000
  208. });
  209. }
  210. }else{
  211. res.obj.list.results.forEach(item=>{
  212. if(item.onLine==0){
  213. item.signalDevice=0
  214. }
  215. if(item.electricity==''){
  216. item.electricity=0
  217. }
  218. if(item.electricity>100){
  219. item.electricity=100
  220. }
  221. let num=this.ascformatDate(item.updateTime)
  222. if(num>12){
  223. item.electricity=0
  224. }
  225. })
  226. if (this.pageNum == 1) {
  227. this.newListdata=res.obj.list.results
  228. } else {
  229. this.newListdata = [...this.newListdata, ...res.obj.list.results];
  230. }
  231. }
  232. })
  233. },
  234. ascformatDate(dateTimeStamp){
  235. let newDate = new Date(dateTimeStamp.replace(/-/g, '/')).getTime();
  236. let minute = 1000 * 60;
  237. let hour = minute * 60;
  238. let day = hour * 24;
  239. let halfamonth = day * 15;
  240. let month = day * 30;
  241. let now = new Date().getTime();
  242. let diffValue = now - newDate;
  243. let result =diffValue/hour;
  244. return result;
  245. }
  246. },
  247. }
  248. </script>
  249. <style lang="scss">
  250. .cented {
  251. width: 100%;
  252. height: 100vh;
  253. background: #FFFFFF;
  254. }
  255. // .infoinputbox {
  256. // width: 100%;
  257. // height: 61rpx;
  258. // position: relative;
  259. // .infoinput {
  260. // width: 690rpx;
  261. // height: 61rpx;
  262. // background: #DEDEDE;
  263. // border-radius: 31rpx;
  264. // margin: 0 auto;
  265. // color: #999999;
  266. // font-size: 26rpx;
  267. // padding-left: 20rpx;
  268. // }
  269. // .dingweiinfo {
  270. // width: 40rpx;
  271. // height: 61rpx;
  272. // background-color: #DEDEDE;
  273. // position: absolute;
  274. // top: 0rpx;
  275. // left: 660rpx;
  276. // display: flex;
  277. // align-items: center;
  278. // z-index: 1000;
  279. // .sehoimg {
  280. // display: block;
  281. // width: 40rpx;
  282. // height: 40rpx;
  283. // }
  284. // }
  285. // }
  286. .tab-box {
  287. width: 100%;
  288. .tab-item-wrap {
  289. height: 88rpx;
  290. line-height: 88rpx;
  291. display: flex;
  292. justify-content: space-around;
  293. font-size: 4vw;
  294. background: linear-gradient(180deg, #e5e5e5, #e5e5e5, rgba(229, 229, 229, 0)) bottom left no-repeat;
  295. background-size: 100% 1px;
  296. color: #959dad;
  297. }
  298. }
  299. .bottom {
  300. color: #209fff;
  301. position: relative;
  302. }
  303. .bottomLine {
  304. position: absolute;
  305. width: 156rpx;
  306. height: 6rpx;
  307. top: 80rpx;
  308. background-color: #298dff;
  309. border-radius: 8rpx 8rpx 0rpx 0rpx;
  310. left: 16rpx;
  311. }
  312. .infoet {
  313. width: 100%;
  314. .infoviewbox {
  315. width: 690rpx;
  316. padding-bottom: 20rpx;
  317. background: #FFFFFF;
  318. box-shadow: 0px 0px 8rpx 6rpx rgba(0, 0, 0, 0.06);
  319. border-radius: 20rpx;
  320. margin: 0 auto;
  321. margin-top: 20rpx;
  322. .infobox1 {
  323. width: 652rpx;
  324. height: 88rpx;
  325. border-bottom: 1rpx solid #D9D9D9;
  326. margin: 0 auto;
  327. display: flex;
  328. .box1-zuo {
  329. width: 50%;
  330. height: 100%;
  331. font-size: 30rpx;
  332. color: #333333;
  333. line-height: 88rpx;
  334. }
  335. .box1-you {
  336. width: 50%;
  337. height: 100%;
  338. display: flex;
  339. align-items: center;
  340. .you1 {
  341. width: 20rpx;
  342. height: 28rpx;
  343. margin-left: 32rpx;
  344. background-image: url(../../../static/images/newimg/dianliang.png);
  345. background-size: 100% 100%;
  346. display: flex;
  347. flex-direction: column-reverse;
  348. .youimg {
  349. width: 100%;
  350. background-color: #333333;
  351. }
  352. }
  353. .you11 {
  354. width: 20rpx;
  355. height: 28rpx;
  356. margin-left: 32rpx;
  357. background-image: url(../../../static/images/newimg/dianliang456.png);
  358. background-size: 100% 100%;
  359. display: flex;
  360. flex-direction: column-reverse;
  361. .youimg {
  362. width: 100%;
  363. background-color: red;
  364. }
  365. }
  366. .you2 {
  367. width: 114rpx;
  368. height: 30rpx;
  369. // border: 1rpx solid red;
  370. font-size: 20rpx;
  371. color: #333333;
  372. margin-left: 6rpx;
  373. }
  374. .you22 {
  375. width: 114rpx;
  376. height: 30rpx;
  377. // border: 1rpx solid red;
  378. font-size: 20rpx;
  379. color: red;
  380. margin-left: 6rpx;
  381. }
  382. .you3 {
  383. width: 30rpx;
  384. height: 28rpx;
  385. margin-left: 16rpx;
  386. .youimg {
  387. display: block;
  388. width: 30rpx;
  389. height: 28rpx;
  390. }
  391. }
  392. .you4 {
  393. width: 100rpx;
  394. height: 30rpx;
  395. // border: 1rpx solid red;
  396. font-size: 20rpx;
  397. color: #333333;
  398. margin-left: 6rpx;
  399. }
  400. }
  401. }
  402. .infobox2 {
  403. width: 652rpx;
  404. height: 33rpx;
  405. margin: 0 auto;
  406. display: flex;
  407. margin-top: 19rpx;
  408. .box2-zuo {
  409. width: 40%;
  410. height: 100%;
  411. line-height: 33rpx;
  412. font-size: 24rpx;
  413. color: #333333;
  414. text-indent: 6rpx;
  415. }
  416. .box2-you {
  417. width: 60%;
  418. height: 100%;
  419. line-height: 33rpx;
  420. font-size: 24rpx;
  421. color: #333333;
  422. text-indent: 30rpx;
  423. .stayupload {
  424. color: #F41313;
  425. }
  426. }
  427. }
  428. }
  429. }
  430. </style>