No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
 
 
 

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