Acher
/
puqiang
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
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.
16 Commits
2 Branches
2.7 MiB
 
 
 
Tree: 98b49c470e
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '98b49c470e'
${ noResults }
puqiang/pages/mine/equipment/index.vue

466 lines
11 KiB
Raw Blame History 

  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. 		

  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. 		

  19. 		

  20. 		<view class="infoet">

  21. 			<view class="infoviewbox" v-for="(item,index) in newListdata" :key="index">

  22. 				<view class="infobox1">

  23. 					<view class="box1-zuo">领用人：{{item.accName}}</view>

  24. 					<view class="box1-you">

  25. 						<view class="you1" v-if="item.electricity>20">

  26. 							<view class="youimg" :style="{ height: item.electricity + '%' }"></view>

  27. 						</view>

  28. 						<view class="you11" v-if="item.electricity<20">

  29. 							<view class="youimg" :style="{ height: item.electricity + '%' }"></view>

  30. 						</view>

  31. 						<view  class="you2">电量：

  32. 							<text v-if="item.electricity>20">{{item.electricity}}%</text>

  33. 							<text v-if="item.electricity<20" style="color: red;">{{item.electricity}}%</text>

  34. 						</view>

  35. 						

  36. 						<view class="you3">

  37. 							<image v-if="item.signalDevice==''" class="youimg" src="../../../static/images/newimg/xinhao0.png" mode=""></image>

  38. 							<image v-if="item.signalDevice<20 && item.signalDevice>0" class="youimg" src="../../../static/images/newimg/xinhao1.png" mode=""></image>

  39. 							<image v-if="item.signalDevice<50 && item.signalDevice>20" class="youimg" src="../../../static/images/newimg/xinhao2.png" mode=""></image>

  40. 							<image v-if="item.signalDevice<70 && item.signalDevice>50" class="youimg" src="../../../static/images/newimg/xinhao3.png" mode=""></image>

  41. 							<image v-if="item.signalDevice<90 && item.signalDevice>70" class="youimg" src="../../../static/images/newimg/xinhao4.png" mode=""></image>

  42. 							<image v-if="item.signalDevice<=100 && item.signalDevice>90" class="youimg" 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. 					

  48. 				</view>

  49. 				<view class="infobox2">

  50. 					<view class="box2-zuo">设备编号</view>

  51. 					<view class="box2-you">{{item.imei}}</view>

  52. 				</view>

  53. 				<view class="infobox2">

  54. 					<view class="box2-zuo">录音状态</view>

  55. 					<view class="box2-you" v-if="item.audioStatus=='false'">关闭</view>

  56. 					<view class="box2-you"  v-if="item.audioStatus=='true'">开启</view>

  57. 					<view class="box2-you"  v-if="item.audioStatus=='' ">关闭</view>

  58. 				</view>

  59. 				<view class="infobox2">

  60. 					<view class="box2-zuo">待上传</view>

  61. 					<view class="box2-you">

  62. 						<template v-if="item.fileCount && item.fileCount > 0">

  63. 							<text class="stayupload">（待上传{{ item.fileCount }}条）</text>

  64. 						</template>

  65. 						<template v-else>

  66. 							0

  67. 						</template>

  68. 					</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. 

  81. 

  82. 

  83. 	</view>

  84. </template>

  85. 

  86. <script>

  87. 	var util = require("../../../utils/util.js");

  88. 	export default {

  89. 		data() {

  90. 			return {

  91. 				tablist: [

  92. 					{

  93. 						name: "全部(0)",

  94. 					},

  95. 					{

  96. 						name: "在线(0)",

  97. 					},

  98. 					{

  99. 						name: "低电量(0)",

  100. 					},

  101. 					{

  102. 						name: "今日活跃(0)",

  103. 					},

  104. 					{

  105. 						name: "离线(0)",

  106. 					}

  107. 				],

  108. 				activeClass: 0,

  109. 				pageNum:1,

  110. 				pageSize:20,

  111. 				imei:"",

  112. 				orgcode:"",

  113. 				newListdata:[],

  114. 				buildingID:'',

  115. 				jump:''

  116. 			};

  117. 		},

  118. 		onReachBottom() {

  119. 			this.pageNum +=1;

  120. 			this.init()

  121. 		},

  122. 		onPullDownRefresh(){

  123. 			this.init()

  124. 			setTimeout(function () {

  125. 			    uni.stopPullDownRefresh();

  126. 			}, 1000);

  127. 		},

  128. 		onLoad(options) {

  129. 			if(options.active){

  130. 				this.activeClass=options.active

  131. 			}else{

  132. 				this.activeClass=0

  133. 			}

  134. 			this.newListdata=[]

  135. 			this.pageNum=1;

  136. 			this.pageSize=20;

  137. 			 this.init() 

  138. 		},

  139. 		filters: {

  140. 			formatDate: (dateTimeStamp) => {

  141. 				var newDate = new Date(dateTimeStamp.replace(/-/g, '/')).getTime();

  142. 				var minute = 1000 * 60;

  143. 				var hour = minute * 60;

  144. 				var day = hour * 24;

  145. 				var halfamonth = day * 15;

  146. 				var month = day * 30;

  147. 				var now = new Date().getTime();	

  148. 				var diffValue = now - newDate;

  149. 				if(diffValue < 0){return;}

  150. 				var monthC =diffValue/month;

  151. 				var weekC =diffValue/(7*day);

  152. 				var dayC =diffValue/day;

  153. 				var hourC =diffValue/hour;

  154. 				var minC =diffValue/minute;

  155. 				var result = '';

  156. 				if(weekC>=1){

  157. 					result= "1周前";

  158. 				}else if(dayC>=1){

  159. 					result=""+ parseInt(dayC) +"天前";

  160. 				} else if(hourC>=1){

  161. 					result=""+ parseInt(hourC) +"小时前";

  162. 				}

  163. 				else if(minC>=1){

  164. 					result=""+ parseInt(minC) +"分钟前";

  165. 				}else{

  166. 					result="刚刚";

  167. 				}

  168. 				return result;

  169. 			}

  170. 		},

  171. 		methods: {

  172. 			shecs(){

  173. 				this.newListdata=[]

  174. 				this.pageNum=1;

  175. 				this.pageSize=20;

  176. 				this.init()	

  177. 			},

  178. 			// tab

  179. 			clocktab(index) {

  180. 				this.activeClass=index;

  181. 				this.newListdata=[]

  182. 				this.pageNum=1;

  183. 				this.pageSize=20;

  184. 				this.init()

  185. 			},

  186. 			init(){

  187. 				this.buildingID=uni.getStorageSync('buildingID').id;

  188. 				const parames = {

  189. 					pageNum: this.pageNum,

  190. 					pageSize: this.pageSize,

  191. 					query:{

  192. 						imei:this.imei,

  193. 						onLine:this.activeClass,	

  194. 						propertyId:this.buildingID,

  195. 						orderType:1

  196. 					}

  197. 				}

  198. 				

  199. 				if(this.activeClass==0){

  200. 					parames.query.onLine=null

  201. 				}

  202. 				this.$u.post("/equipment/apiFindByPage", parames).then(res => {

  203. 					this.tablist[0].name="全部("+res.allCount+")";

  204. 					this.tablist[1].name="在线("+res.eqOnLineCount+")";

  205. 					this.tablist[2].name="低电量("+res.lowElectricityCount+")";

  206. 					this.tablist[3].name="今日活跃("+res.activeCount+")";

  207. 					this.tablist[4].name="离线("+res.eqOffLineCount+")";

  208. 					if(res.obj.list.results==null){

  209. 						if (this.pageNum == 1){

  210. 							return

  211. 						}else{

  212. 							uni.showToast({

  213. 							    title: '已经到底了！',

  214. 							    duration: 2000

  215. 							});

  216. 						}

  217. 					}else{

  218. 						res.obj.list.results.forEach(item=>{

  219. 							if(item.onLine==0){

  220. 								item.signalDevice=0

  221. 							}

  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. 						})

  235. 						

  236. 						if (this.pageNum == 1) {

  237. 							this.newListdata=res.obj.list.results

  238. 						} else {

  239. 							this.newListdata = [...this.newListdata, ...res.obj.list.results];	

  240. 						}

  241. 					}

  242. 				})

  243. 			},

  244. 			ascformatDate(dateTimeStamp){

  245. 				let newDate = new Date(dateTimeStamp.replace(/-/g, '/')).getTime();

  246. 				let minute = 1000 * 60;

  247. 				let hour = minute * 60;

  248. 				let day = hour * 24;

  249. 				let halfamonth = day * 15;

  250. 				let month = day * 30;

  251. 				let now = new Date().getTime();	

  252. 				let diffValue = now - newDate;

  253. 				let result =diffValue/hour;

  254. 				return result;

  255. 			}

  256. 		},

  257. 	}

  258. </script>

  259. 

  260. <style lang="scss">

  261. 	.cented {

  262. 		width: 100%;

  263. 		height: 100vh;

  264. 		background: #FFFFFF;

  265. 	}

  266. 

  267. 	// .infoinputbox {

  268. 	// 	width: 100%;

  269. 	// 	height: 61rpx;

  270. 	// 	position: relative;

  271. 

  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. 

  283. 	// 	.dingweiinfo {

  284. 	// 		width: 40rpx;

  285. 	// 		height: 61rpx;

  286. 	// 		background-color: #DEDEDE;

  287. 	// 		position: absolute;

  288. 	// 		top: 0rpx;

  289. 	// 		left: 660rpx;

  290. 	// 		display: flex;

  291. 	// 		align-items: center;

  292. 	// 		z-index: 1000;

  293. 	// 		.sehoimg {

  294. 	// 			display: block;

  295. 	// 			width: 40rpx;

  296. 	// 			height: 40rpx;

  297. 	// 		}

  298. 	// 	}

  299. 	// }

  300. 

  301. 	.tab-box {

  302. 		width: 100%;

  303. 

  304. 		.tab-item-wrap {

  305. 			height: 88rpx;

  306. 			line-height: 88rpx;

  307. 			display: flex;

  308. 			justify-content: space-around;

  309. 			font-size: 4vw;

  310. 			background: linear-gradient(180deg, #e5e5e5, #e5e5e5, rgba(229, 229, 229, 0)) bottom left no-repeat;

  311. 			background-size: 100% 1px;

  312. 			color: #959dad;

  313. 		}

  314. 	}

  315. 

  316. 	.bottom {

  317. 		color: #209fff;

  318. 		position: relative;

  319. 	}

  320. 

  321. 	.bottomLine {

  322. 		position: absolute;

  323. 		width: 156rpx;

  324. 		height: 6rpx;

  325. 		top: 80rpx;

  326. 		background-color: #298dff;

  327. 		border-radius: 8rpx 8rpx 0rpx 0rpx;

  328. 		left: 16rpx;

  329. 	}

  330. 

  331. 	.infoet {

  332. 		width: 100%;

  333. 

  334. 		.infoviewbox {

  335. 			width: 690rpx;

  336. 			padding-bottom: 20rpx;

  337. 			background: #FFFFFF;

  338. 			box-shadow: 0px 0px 8rpx 6rpx rgba(0, 0, 0, 0.06);

  339. 			border-radius: 20rpx;

  340. 			margin: 0 auto;

  341. 			margin-top: 20rpx;

  342. 

  343. 			.infobox1 {

  344. 				width: 652rpx;

  345. 				height: 88rpx;

  346. 				border-bottom: 1rpx solid #D9D9D9;

  347. 				margin: 0 auto;

  348. 				display: flex;

  349. 

  350. 				.box1-zuo {

  351. 					width: 50%;

  352. 					height: 100%;

  353. 					font-size: 30rpx;

  354. 					color: #333333;

  355. 					line-height: 88rpx;

  356. 				}

  357. 

  358. 				.box1-you {

  359. 					width: 50%;

  360. 					height: 100%;

  361. 					display: flex;

  362. 					align-items: center;

  363. 

  364. 					.you1 {

  365. 						width: 20rpx;

  366. 						height: 28rpx;

  367. 						margin-left: 32rpx;

  368. 						background-image: url(../../../static/images/newimg/dianliang.png);

  369. 						background-size: 100% 100%;

  370. 						display: flex;

  371. 						flex-direction: column-reverse;

  372. 

  373. 						.youimg {

  374. 							width: 100%;

  375. 							background-color: #333333;

  376. 						}

  377. 					}

  378. 					.you11 {

  379. 						width: 20rpx;

  380. 						height: 28rpx;

  381. 						margin-left: 32rpx;

  382. 						background-image: url(../../../static/images/newimg/dianliang456.png);

  383. 						background-size: 100% 100%;

  384. 						display: flex;

  385. 						flex-direction: column-reverse;

  386. 					

  387. 						.youimg {

  388. 							width: 100%;

  389. 							background-color: red;

  390. 						}

  391. 					}

  392. 

  393. 					.you2 {

  394. 						width: 114rpx;

  395. 						height: 30rpx;

  396. 						// border: 1rpx solid red;

  397. 						font-size: 20rpx;

  398. 						color: #333333;

  399. 						margin-left: 6rpx;

  400. 					}

  401. 					.you22 {

  402. 						width: 114rpx;

  403. 						height: 30rpx;

  404. 						// border: 1rpx solid red;

  405. 						font-size: 20rpx;

  406. 						color: red;

  407. 						margin-left: 6rpx;

  408. 					}

  409. 

  410. 					.you3 {

  411. 						width: 30rpx;

  412. 						height: 28rpx;

  413. 						margin-left: 16rpx;

  414. 

  415. 						.youimg {

  416. 							display: block;

  417. 							width: 30rpx;

  418. 							height: 28rpx;

  419. 						}

  420. 					}

  421. 

  422. 					.you4 {

  423. 						width: 100rpx;

  424. 						height: 30rpx;

  425. 						// border: 1rpx solid red;

  426. 						font-size: 20rpx;

  427. 						color: #333333;

  428. 						margin-left: 6rpx;

  429. 					}

  430. 

  431. 				}

  432. 			}

  433. 

  434. 			.infobox2 {

  435. 				width: 652rpx;

  436. 				height: 33rpx;

  437. 				margin: 0 auto;

  438. 				display: flex;

  439. 				margin-top: 19rpx;

  440. 

  441. 				.box2-zuo {

  442. 					width: 40%;

  443. 					height: 100%;

  444. 					line-height: 33rpx;

  445. 					font-size: 24rpx;

  446. 					color: #333333;

  447. 					text-indent: 6rpx;

  448. 				}

  449. 

  450. 				.box2-you {

  451. 					width: 60%;

  452. 					height: 100%;

  453. 					line-height: 33rpx;

  454. 					font-size: 24rpx;

  455. 					color: #333333;

  456. 					text-indent: 30rpx;

  457. 					

  458. 					.stayupload {

  459. 						color: #F41313;

  460. 					}

  461. 				}

  462. 			}

  463. 		}

  464. 	}

  465. </style>