liumin
/
NewZkgj
1
0
Fork 0
Código Incidencias 0 Pull Requests 0 Lanzamientos 0 Wiki Actividad
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
122 Commits
7 Ramas
28 MiB
 
 
 
Árbol: c919a2a8f5
Ramas Etiquetas
${ item.name }
Crear rama ${ searchTerm }
desde 'c919a2a8f5'
${ noResults }
NewZkgj/pages/mine/equipment/index.vue

451 líneas
11 KiB
Original Blame Histórico 

  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" v-if="item.audioUploadStatus=='false'">无上传</view>

  62. 					<view class="box2-you" v-if="item.audioUploadStatus=='true'">上传中</view>

  63. 					<view class="box2-you" v-if="item.audioUploadStatus=='' ">无上传</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. 

  76. 

  77. 

  78. 	</view>

  79. </template>

  80. 

  81. <script>

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

  83. 	export default {

  84. 		data() {

  85. 			return {

  86. 				tablist: [

  87. 					{

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

  89. 					},

  90. 					{

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

  92. 					},

  93. 					{

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

  95. 					},

  96. 					{

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

  98. 					},

  99. 					{

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

  101. 					}

  102. 				],

  103. 				activeClass: 0,

  104. 				pageNum:1,

  105. 				pageSize:20,

  106. 				imei:"",

  107. 				orgcode:"",

  108. 				newListdata:[],

  109. 				buildingID:'',

  110. 				jump:''

  111. 			};

  112. 		},

  113. 		onReachBottom() {

  114. 			this.pageNum +=1;

  115. 			this.init()

  116. 		},

  117. 		onLoad(options) {

  118. 			if(options.active){

  119. 				this.activeClass=options.active

  120. 			}else{

  121. 				this.activeClass=0

  122. 			}

  123. 			this.newListdata=[]

  124. 			this.pageNum=1;

  125. 			this.pageSize=20;

  126. 			 this.init() 

  127. 		},

  128. 		filters: {

  129. 			formatDate: (dateTimeStamp) => {

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

  131. 				var minute = 1000 * 60;

  132. 				var hour = minute * 60;

  133. 				var day = hour * 24;

  134. 				var halfamonth = day * 15;

  135. 				var month = day * 30;

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

  137. 				var diffValue = now - newDate;

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

  139. 				var monthC =diffValue/month;

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

  141. 				var dayC =diffValue/day;

  142. 				var hourC =diffValue/hour;

  143. 				var minC =diffValue/minute;

  144. 				var result = '';

  145. 				if(weekC>=1){

  146. 					result= "1周前";

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

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

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

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

  151. 				}

  152. 				else if(minC>=1){

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

  154. 				}else{

  155. 					result="刚刚";

  156. 				}

  157. 				return result;

  158. 			}

  159. 		},

  160. 		methods: {

  161. 			shecs(){

  162. 				this.newListdata=[]

  163. 				this.pageNum=1;

  164. 				this.pageSize=20;

  165. 				this.init()	

  166. 			},

  167. 			// tab

  168. 			clocktab(index) {

  169. 				this.activeClass=index;

  170. 				this.newListdata=[]

  171. 				this.pageNum=1;

  172. 				this.pageSize=20;

  173. 				this.init()

  174. 			},

  175. 			init(){

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

  177. 				const parames = {

  178. 					pageNum: this.pageNum,

  179. 					pageSize: this.pageSize,

  180. 					query:{

  181. 						imei:this.imei,

  182. 						onLine:this.activeClass,	

  183. 						propertyId:this.buildingID,

  184. 						orderType:1

  185. 					}

  186. 				}

  187. 				

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

  189. 					parames.query.onLine=null

  190. 				}

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

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

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

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

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

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

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

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

  199. 							return

  200. 						}else{

  201. 							uni.showToast({

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

  203. 							    duration: 2000

  204. 							});

  205. 						}

  206. 					}else{

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

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

  209. 								item.signalDevice=0

  210. 							}

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

  224. 						

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

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

  227. 						} else {

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

  229. 						}

  230. 					}

  231. 				})

  232. 			},

  233. 			ascformatDate(dateTimeStamp){

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

  235. 				let minute = 1000 * 60;

  236. 				let hour = minute * 60;

  237. 				let day = hour * 24;

  238. 				let halfamonth = day * 15;

  239. 				let month = day * 30;

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

  241. 				let diffValue = now - newDate;

  242. 				let result =diffValue/hour;

  243. 				return result;

  244. 			}

  245. 		},

  246. 	}

  247. </script>

  248. 

  249. <style lang="scss">

  250. 	.cented {

  251. 		width: 100%;

  252. 		height: 100vh;

  253. 		background: #FFFFFF;

  254. 	}

  255. 

  256. 	// .infoinputbox {

  257. 	// 	width: 100%;

  258. 	// 	height: 61rpx;

  259. 	// 	position: relative;

  260. 

  261. 	// 	.infoinput {

  262. 	// 		width: 690rpx;

  263. 	// 		height: 61rpx;

  264. 	// 		background: #DEDEDE;

  265. 	// 		border-radius: 31rpx;

  266. 	// 		margin: 0 auto;

  267. 	// 		color: #999999;

  268. 	// 		font-size: 26rpx;

  269. 	// 		padding-left: 20rpx;

  270. 	// 	}

  271. 

  272. 	// 	.dingweiinfo {

  273. 	// 		width: 40rpx;

  274. 	// 		height: 61rpx;

  275. 	// 		background-color: #DEDEDE;

  276. 	// 		position: absolute;

  277. 	// 		top: 0rpx;

  278. 	// 		left: 660rpx;

  279. 	// 		display: flex;

  280. 	// 		align-items: center;

  281. 	// 		z-index: 1000;

  282. 	// 		.sehoimg {

  283. 	// 			display: block;

  284. 	// 			width: 40rpx;

  285. 	// 			height: 40rpx;

  286. 	// 		}

  287. 	// 	}

  288. 	// }

  289. 

  290. 	.tab-box {

  291. 		width: 100%;

  292. 

  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. 

  305. 	.bottom {

  306. 		color: #209fff;

  307. 		position: relative;

  308. 	}

  309. 

  310. 	.bottomLine {

  311. 		position: absolute;

  312. 		width: 156rpx;

  313. 		height: 6rpx;

  314. 		top: 80rpx;

  315. 		background-color: #298dff;

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

  317. 		left: 16rpx;

  318. 	}

  319. 

  320. 	.infoet {

  321. 		width: 100%;

  322. 

  323. 		.infoviewbox {

  324. 			width: 690rpx;

  325. 			padding-bottom: 20rpx;

  326. 			background: #FFFFFF;

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

  328. 			border-radius: 20rpx;

  329. 			margin: 0 auto;

  330. 			margin-top: 20rpx;

  331. 

  332. 			.infobox1 {

  333. 				width: 652rpx;

  334. 				height: 88rpx;

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

  336. 				margin: 0 auto;

  337. 				display: flex;

  338. 

  339. 				.box1-zuo {

  340. 					width: 50%;

  341. 					height: 100%;

  342. 					font-size: 30rpx;

  343. 					color: #333333;

  344. 					line-height: 88rpx;

  345. 				}

  346. 

  347. 				.box1-you {

  348. 					width: 50%;

  349. 					height: 100%;

  350. 					display: flex;

  351. 					align-items: center;

  352. 

  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. 

  362. 						.youimg {

  363. 							width: 100%;

  364. 							background-color: #333333;

  365. 						}

  366. 					}

  367. 					.you11 {

  368. 						width: 20rpx;

  369. 						height: 28rpx;

  370. 						margin-left: 32rpx;

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

  372. 						background-size: 100% 100%;

  373. 						display: flex;

  374. 						flex-direction: column-reverse;

  375. 					

  376. 						.youimg {

  377. 							width: 100%;

  378. 							background-color: red;

  379. 						}

  380. 					}

  381. 

  382. 					.you2 {

  383. 						width: 114rpx;

  384. 						height: 30rpx;

  385. 						// border: 1rpx solid red;

  386. 						font-size: 20rpx;

  387. 						color: #333333;

  388. 						margin-left: 6rpx;

  389. 					}

  390. 					.you22 {

  391. 						width: 114rpx;

  392. 						height: 30rpx;

  393. 						// border: 1rpx solid red;

  394. 						font-size: 20rpx;

  395. 						color: red;

  396. 						margin-left: 6rpx;

  397. 					}

  398. 

  399. 					.you3 {

  400. 						width: 30rpx;

  401. 						height: 28rpx;

  402. 						margin-left: 16rpx;

  403. 

  404. 						.youimg {

  405. 							display: block;

  406. 							width: 30rpx;

  407. 							height: 28rpx;

  408. 						}

  409. 					}

  410. 

  411. 					.you4 {

  412. 						width: 100rpx;

  413. 						height: 30rpx;

  414. 						// border: 1rpx solid red;

  415. 						font-size: 20rpx;

  416. 						color: #333333;

  417. 						margin-left: 6rpx;

  418. 					}

  419. 

  420. 				}

  421. 			}

  422. 

  423. 			.infobox2 {

  424. 				width: 652rpx;

  425. 				height: 33rpx;

  426. 				margin: 0 auto;

  427. 				display: flex;

  428. 				margin-top: 19rpx;

  429. 

  430. 				.box2-zuo {

  431. 					width: 40%;

  432. 					height: 100%;

  433. 					line-height: 33rpx;

  434. 					font-size: 24rpx;

  435. 					color: #333333;

  436. 					text-indent: 6rpx;

  437. 				}

  438. 

  439. 				.box2-you {

  440. 					width: 60%;

  441. 					height: 100%;

  442. 					line-height: 33rpx;

  443. 					font-size: 24rpx;

  444. 					color: #333333;

  445. 					text-indent: 30rpx;

  446. 				}

  447. 			}

  448. 		}

  449. 	}

  450. </style>