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.
 
 
 

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