您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 

454 行
11 KiB

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