AI销管
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.
 
 
 
 

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