liumin
/
NewZkgj
1
0
Forka 0
Codice Problemi 0 Pull Requests 0 Rilasci 0 Wiki Attività
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.
162 Commit
7 Rami (Branch)
28 MiB
 
 
 
Albero (Tree): aae9eda291
Rami (Branch) Tag
${ item.name }
Crea branch ${ searchTerm }
da 'aae9eda291'
${ noResults }
NewZkgj/pages/mine/equipment/index.vue

460 righe
11 KiB
Originale Blame Cronologia 

  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.audioUploadStatus=='false'">无上传</template>

  63. 						<template v-if="item.audioUploadStatus=='true'">上传中</template>

  64. 						<template v-if="item.audioUploadStatus=='' ">无上传</template>

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

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

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

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

  194. 					parames.query.onLine=null

  195. 				}

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

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

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

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

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

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

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

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

  204. 							return

  205. 						}else{

  206. 							uni.showToast({

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

  208. 							    duration: 2000

  209. 							});

  210. 						}

  211. 					}else{

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

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

  214. 								item.signalDevice=0

  215. 							}

  216. 							

  217. 							if(item.electricity==''){

  218. 								item.electricity=0

  219. 							}

  220. 							if(item.electricity>100){

  221. 								item.electricity=100

  222. 							}

  223. 							let num=this.ascformatDate(item.updateTime)

  224. 							if(num>12){

  225. 								item.electricity=0

  226. 							}

  227. 							

  228. 						})

  229. 						

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

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

  232. 						} else {

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

  234. 						}

  235. 					}

  236. 				})

  237. 			},

  238. 			ascformatDate(dateTimeStamp){

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

  240. 				let minute = 1000 * 60;

  241. 				let hour = minute * 60;

  242. 				let day = hour * 24;

  243. 				let halfamonth = day * 15;

  244. 				let month = day * 30;

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

  246. 				let diffValue = now - newDate;

  247. 				let result =diffValue/hour;

  248. 				return result;

  249. 			}

  250. 		},

  251. 	}

  252. </script>

  253. 

  254. <style lang="scss">

  255. 	.cented {

  256. 		width: 100%;

  257. 		height: 100vh;

  258. 		background: #FFFFFF;

  259. 	}

  260. 

  261. 	// .infoinputbox {

  262. 	// 	width: 100%;

  263. 	// 	height: 61rpx;

  264. 	// 	position: relative;

  265. 

  266. 	// 	.infoinput {

  267. 	// 		width: 690rpx;

  268. 	// 		height: 61rpx;

  269. 	// 		background: #DEDEDE;

  270. 	// 		border-radius: 31rpx;

  271. 	// 		margin: 0 auto;

  272. 	// 		color: #999999;

  273. 	// 		font-size: 26rpx;

  274. 	// 		padding-left: 20rpx;

  275. 	// 	}

  276. 

  277. 	// 	.dingweiinfo {

  278. 	// 		width: 40rpx;

  279. 	// 		height: 61rpx;

  280. 	// 		background-color: #DEDEDE;

  281. 	// 		position: absolute;

  282. 	// 		top: 0rpx;

  283. 	// 		left: 660rpx;

  284. 	// 		display: flex;

  285. 	// 		align-items: center;

  286. 	// 		z-index: 1000;

  287. 	// 		.sehoimg {

  288. 	// 			display: block;

  289. 	// 			width: 40rpx;

  290. 	// 			height: 40rpx;

  291. 	// 		}

  292. 	// 	}

  293. 	// }

  294. 

  295. 	.tab-box {

  296. 		width: 100%;

  297. 

  298. 		.tab-item-wrap {

  299. 			height: 88rpx;

  300. 			line-height: 88rpx;

  301. 			display: flex;

  302. 			justify-content: space-around;

  303. 			font-size: 4vw;

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

  305. 			background-size: 100% 1px;

  306. 			color: #959dad;

  307. 		}

  308. 	}

  309. 

  310. 	.bottom {

  311. 		color: #209fff;

  312. 		position: relative;

  313. 	}

  314. 

  315. 	.bottomLine {

  316. 		position: absolute;

  317. 		width: 156rpx;

  318. 		height: 6rpx;

  319. 		top: 80rpx;

  320. 		background-color: #298dff;

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

  322. 		left: 16rpx;

  323. 	}

  324. 

  325. 	.infoet {

  326. 		width: 100%;

  327. 

  328. 		.infoviewbox {

  329. 			width: 690rpx;

  330. 			padding-bottom: 20rpx;

  331. 			background: #FFFFFF;

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

  333. 			border-radius: 20rpx;

  334. 			margin: 0 auto;

  335. 			margin-top: 20rpx;

  336. 

  337. 			.infobox1 {

  338. 				width: 652rpx;

  339. 				height: 88rpx;

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

  341. 				margin: 0 auto;

  342. 				display: flex;

  343. 

  344. 				.box1-zuo {

  345. 					width: 50%;

  346. 					height: 100%;

  347. 					font-size: 30rpx;

  348. 					color: #333333;

  349. 					line-height: 88rpx;

  350. 				}

  351. 

  352. 				.box1-you {

  353. 					width: 50%;

  354. 					height: 100%;

  355. 					display: flex;

  356. 					align-items: center;

  357. 

  358. 					.you1 {

  359. 						width: 20rpx;

  360. 						height: 28rpx;

  361. 						margin-left: 32rpx;

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

  363. 						background-size: 100% 100%;

  364. 						display: flex;

  365. 						flex-direction: column-reverse;

  366. 

  367. 						.youimg {

  368. 							width: 100%;

  369. 							background-color: #333333;

  370. 						}

  371. 					}

  372. 					.you11 {

  373. 						width: 20rpx;

  374. 						height: 28rpx;

  375. 						margin-left: 32rpx;

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

  377. 						background-size: 100% 100%;

  378. 						display: flex;

  379. 						flex-direction: column-reverse;

  380. 					

  381. 						.youimg {

  382. 							width: 100%;

  383. 							background-color: red;

  384. 						}

  385. 					}

  386. 

  387. 					.you2 {

  388. 						width: 114rpx;

  389. 						height: 30rpx;

  390. 						// border: 1rpx solid red;

  391. 						font-size: 20rpx;

  392. 						color: #333333;

  393. 						margin-left: 6rpx;

  394. 					}

  395. 					.you22 {

  396. 						width: 114rpx;

  397. 						height: 30rpx;

  398. 						// border: 1rpx solid red;

  399. 						font-size: 20rpx;

  400. 						color: red;

  401. 						margin-left: 6rpx;

  402. 					}

  403. 

  404. 					.you3 {

  405. 						width: 30rpx;

  406. 						height: 28rpx;

  407. 						margin-left: 16rpx;

  408. 

  409. 						.youimg {

  410. 							display: block;

  411. 							width: 30rpx;

  412. 							height: 28rpx;

  413. 						}

  414. 					}

  415. 

  416. 					.you4 {

  417. 						width: 100rpx;

  418. 						height: 30rpx;

  419. 						// border: 1rpx solid red;

  420. 						font-size: 20rpx;

  421. 						color: #333333;

  422. 						margin-left: 6rpx;

  423. 					}

  424. 

  425. 				}

  426. 			}

  427. 

  428. 			.infobox2 {

  429. 				width: 652rpx;

  430. 				height: 33rpx;

  431. 				margin: 0 auto;

  432. 				display: flex;

  433. 				margin-top: 19rpx;

  434. 

  435. 				.box2-zuo {

  436. 					width: 40%;

  437. 					height: 100%;

  438. 					line-height: 33rpx;

  439. 					font-size: 24rpx;

  440. 					color: #333333;

  441. 					text-indent: 6rpx;

  442. 				}

  443. 

  444. 				.box2-you {

  445. 					width: 60%;

  446. 					height: 100%;

  447. 					line-height: 33rpx;

  448. 					font-size: 24rpx;

  449. 					color: #333333;

  450. 					text-indent: 30rpx;

  451. 					

  452. 					.stayupload {

  453. 						color: #F41313;

  454. 					}

  455. 				}

  456. 			}

  457. 		}

  458. 	}

  459. </style>