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.

index.vue 11 KiB

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