選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

index.vue 11 KiB

3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
3年前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450
  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>