AI销管
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
 
 
 
 

441 righe
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. icon: 'none',
  210. duration: 2000
  211. });
  212. }
  213. } else {
  214. res.obj.list.results.forEach(item => {
  215. if (item.onLine == 0) {
  216. item.signalDevice = 0
  217. }
  218. if (item.electricity == '') {
  219. item.electricity = 0
  220. }
  221. if (item.electricity > 100) {
  222. item.electricity = 100
  223. }
  224. let num = this.ascformatDate(item.updateTime)
  225. if (num > 12) {
  226. item.electricity = 0
  227. }
  228. })
  229. if (this.pageNum == 1) {
  230. this.newListdata = res.obj.list.results
  231. } else {
  232. this.newListdata = [...this.newListdata, ...res.obj.list.results];
  233. }
  234. }
  235. })
  236. },
  237. ascformatDate(dateTimeStamp) {
  238. let newDate = new Date(dateTimeStamp.replace(/-/g, '/')).getTime();
  239. let minute = 1000 * 60;
  240. let hour = minute * 60;
  241. let day = hour * 24;
  242. let halfamonth = day * 15;
  243. let month = day * 30;
  244. let now = new Date().getTime();
  245. let diffValue = now - newDate;
  246. let result = diffValue / hour;
  247. return result;
  248. }
  249. },
  250. }
  251. </script>
  252. <style lang="scss">
  253. .cented {
  254. width: 100%;
  255. min-height: 100vh;
  256. background: #FFFFFF;
  257. .header {
  258. position: sticky;
  259. top: var(--window-top);
  260. z-index: 999;
  261. }
  262. }
  263. .tab-box {
  264. width: 100%;
  265. .tab-item-wrap {
  266. height: 88rpx;
  267. line-height: 88rpx;
  268. display: flex;
  269. justify-content: space-around;
  270. font-size: 4vw;
  271. background: linear-gradient(180deg, #e5e5e5, #e5e5e5, rgba(229, 229, 229, 0)) bottom left no-repeat;
  272. background-size: 100% 1px;
  273. color: #959dad;
  274. }
  275. }
  276. .bottom {
  277. color: #209fff;
  278. position: relative;
  279. }
  280. .bottomLine {
  281. position: absolute;
  282. width: 156rpx;
  283. height: 6rpx;
  284. top: 80rpx;
  285. background-color: #298dff;
  286. border-radius: 8rpx 8rpx 0rpx 0rpx;
  287. left: 16rpx;
  288. }
  289. .infoet {
  290. width: 100%;
  291. .infoviewbox {
  292. width: 690rpx;
  293. padding-bottom: 20rpx;
  294. background: #FFFFFF;
  295. box-shadow: 0px 0px 8rpx 6rpx rgba(0, 0, 0, 0.06);
  296. border-radius: 20rpx;
  297. margin: 0 auto;
  298. margin-top: 20rpx;
  299. .infobox1 {
  300. width: 652rpx;
  301. height: 88rpx;
  302. border-bottom: 1rpx solid #D9D9D9;
  303. margin: 0 auto;
  304. display: flex;
  305. .box1-zuo {
  306. width: 50%;
  307. height: 100%;
  308. font-size: 30rpx;
  309. color: #333333;
  310. line-height: 88rpx;
  311. }
  312. .box1-you {
  313. width: 50%;
  314. height: 100%;
  315. display: flex;
  316. align-items: center;
  317. .you1 {
  318. width: 20rpx;
  319. height: 28rpx;
  320. margin-left: 32rpx;
  321. background-image: url(../../../static/images/newimg/dianliang.png);
  322. background-size: 100% 100%;
  323. display: flex;
  324. flex-direction: column-reverse;
  325. .youimg {
  326. width: 100%;
  327. background-color: #333333;
  328. }
  329. }
  330. .you11 {
  331. width: 20rpx;
  332. height: 28rpx;
  333. margin-left: 32rpx;
  334. background-image: url(../../../static/images/newimg/dianliang456.png);
  335. background-size: 100% 100%;
  336. display: flex;
  337. flex-direction: column-reverse;
  338. .youimg {
  339. width: 100%;
  340. background-color: red;
  341. }
  342. }
  343. .you2 {
  344. width: 114rpx;
  345. height: 30rpx;
  346. font-size: 20rpx;
  347. color: #333333;
  348. margin-left: 6rpx;
  349. }
  350. .you22 {
  351. width: 114rpx;
  352. height: 30rpx;
  353. font-size: 20rpx;
  354. color: red;
  355. margin-left: 6rpx;
  356. }
  357. .you3 {
  358. width: 30rpx;
  359. height: 28rpx;
  360. margin-left: 16rpx;
  361. .youimg {
  362. display: block;
  363. width: 30rpx;
  364. height: 28rpx;
  365. }
  366. }
  367. .you4 {
  368. width: 100rpx;
  369. height: 30rpx;
  370. font-size: 20rpx;
  371. color: #333333;
  372. margin-left: 6rpx;
  373. }
  374. }
  375. }
  376. .infobox2 {
  377. width: 652rpx;
  378. height: 33rpx;
  379. margin: 0 auto;
  380. display: flex;
  381. margin-top: 19rpx;
  382. .box2-zuo {
  383. width: 40%;
  384. height: 100%;
  385. line-height: 33rpx;
  386. font-size: 24rpx;
  387. color: #333333;
  388. }
  389. .box2-you {
  390. width: 60%;
  391. height: 100%;
  392. line-height: 33rpx;
  393. font-size: 24rpx;
  394. color: #333333;
  395. .stayupload {
  396. display: block;
  397. color: #F41313;
  398. }
  399. }
  400. }
  401. }
  402. }
  403. </style>