Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
 
 
 

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