AI销管
25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.
 
 
 
 

478 satır
11 KiB

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