AI销管
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

index.vue 12 KiB

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