liumin
/
NewZkgj
1
0
Fork 0
Código Issues 0 Pull requests 0 Versões 0 Wiki Atividade
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
54 Commits
7 Branches
28 MiB
 
 
 
Tag: 67c9a8aac1
Branches Tags
${ item.name }
Criar branch ${ searchTerm }
de 67c9a8aac1
${ noResults }
NewZkgj/pages/mine/equipment/index.vue

452 linhas
11 KiB
Original Anotar Histórico 

  1. <template>

  2. 	<view class="cented">

  3. 		<view class="infoinputbox">

  4. 			<input type="text" v-model="imei" placeholder="请输入设备编号或领用人进行搜索" class="infoinput" />

  5. 			<view class="dingweiinfo" @click="shecs()">

  6. 				<image class="sehoimg" src="../../../static/images/newimg/search.png" mode=""></image>

  7. 			</view>

  8. 		</view>

  9. 		<view class="tab-box">

  10. 			<view class="tab-item-wrap">

  11. 				<view v-for="(item, index) in tablist" :key="index" :class="activeClass == index ? 'bottom' : ''" @tap="clocktab(index)">

  12. 					{{item.names}}( {{item.num}} )

  13. 					<view class="bottomLine" v-if="activeClass == index"></view>

  14. 				</view>

  15. 			</view>

  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. 						

  33. 						<view class="you3">

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

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

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

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

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

  39. 							<image v-if="item.signalDevice<=100 && item.signalDevice>90" class="youimg" src="../../../static/images/newimg/xinhao5.png" mode=""></image>

  40. 						</view>

  41. 						<view class="you4" v-if="item.signalDevice=='' ">信号：0</view>

  42. 						<view class="you4" v-else>信号：{{item.signalDevice}}</view>

  43. 					</view>

  44. 					

  45. 				</view>

  46. 				<view class="infobox2">

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

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

  49. 				</view>

  50. 				<view class="infobox2">

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

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

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

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

  55. 				</view>

  56. 				<view class="infobox2">

  57. 					<view class="box2-zuo">上传状态</view>

  58. 					<view class="box2-you" v-if="item.audioUploadStatus=='false'">无上传</view>

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

  60. 					<view class="box2-you" v-if="item.audioUploadStatus=='' ">无上传</view>

  61. 				</view>

  62. 				<view class="infobox2">

  63. 					<view class="box2-zuo">更新时间</view>

  64. 					<view class="box2-you">{{item.updateTime}}</view>

  65. 				</view>

  66. 				<view class="infobox2" v-if="activeClass==1">

  67. 					<view class="box2-zuo">最后使用时间</view>

  68. 					<view class="box2-you" style="font-size: 28rpx;color: red;">{{item.updateTime | formatDate}}</view>

  69. 				</view>

  70. 			</view>

  71. 		</view>

  72. 

  73. 

  74. 

  75. 	</view>

  76. </template>

  77. 

  78. <script>

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

  80. 	export default {

  81. 		data() {

  82. 			return {

  83. 				tablist: [{

  84. 						names: "在线数量",

  85. 						num: "0"

  86. 					},

  87. 					{

  88. 						names: "离线数量",

  89. 						num: "0"

  90. 					},

  91. 					{

  92. 						names: "低电量设备",

  93. 						num: "0"

  94. 					}

  95. 				],

  96. 				activeClass: 0,

  97. 				pageNum:1,

  98. 				pageSize:20,

  99. 				imei:"",

  100. 				orgcode:"",

  101. 				onLine:1,

  102. 				newListdata:[],

  103. 				buildingID:'',

  104. 				electricity:'',

  105. 				jump:''

  106. 			};

  107. 		},

  108. 		onReachBottom() {

  109. 			this.pageNum +=1;

  110. 			this.init()

  111. 		},

  112. 		onLoad(options) {

  113. 			this.jump=options.jump;

  114. 			if(this.jump=="jump"){

  115. 				this.activeClass=2;

  116. 				this.electricity=20;

  117. 			}

  118. 			 this.init() 

  119. 		},

  120. 		filters: {

  121. 			formatDate: (dateTimeStamp) => {

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

  123. 				var minute = 1000 * 60;

  124. 				var hour = minute * 60;

  125. 				var day = hour * 24;

  126. 				var halfamonth = day * 15;

  127. 				var month = day * 30;

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

  129. 				var diffValue = now - newDate;

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

  131. 				var monthC =diffValue/month;

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

  133. 				var dayC =diffValue/day;

  134. 				var hourC =diffValue/hour;

  135. 				var minC =diffValue/minute;

  136. 				var result = '';

  137. 				if(weekC>=1){

  138. 					result= "1周前";

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

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

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

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

  143. 				}

  144. 				else if(minC>=1){

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

  146. 				}else{

  147. 					result="刚刚";

  148. 				}

  149. 				return result;

  150. 			}

  151. 		},

  152. 		methods: {

  153. 			shecs(){

  154. 				this.newListdata=[]

  155. 				this.pageNum=1;

  156. 				this.pageSize=5;

  157. 				this.init()	

  158. 			},

  159. 			// tab

  160. 			clocktab(index) {

  161. 				this.newListdata=[]

  162. 				this.pageNum=1;

  163. 				this.pageSize=5;

  164. 				this.activeClass = index;

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

  166. 					this.onLine=1;

  167. 					this.electricity='';

  168. 				}else if(this.activeClass==1){

  169. 					this.onLine=0;

  170. 					this.electricity='';

  171. 				}else{

  172. 					this.onLine=1;

  173. 					this.electricity=20;

  174. 				}

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

  185. 						propertyId:this.buildingID,

  186. 						electricity:this.electricity,

  187. 						orderType:1

  188. 					}

  189. 				}

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

  191. 					this.tablist[0].num=res.eqOnLineCount

  192. 					this.tablist[1].num=res.eqOffLineCount

  193. 					this.tablist[2].num=res.lowElectricityCount

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

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

  196. 							return

  197. 						}else{

  198. 							uni.showToast({

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

  200. 							    duration: 2000

  201. 							});

  202. 						}

  203. 					}else{

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

  205. 							

  206. 							

  207. 							if(this.activeClass==1){

  208. 								item.signalDevice=0

  209. 							}

  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: #F7F7F7;

  254. 		padding-top: 33rpx;

  255. 	}

  256. 

  257. 	.infoinputbox {

  258. 		width: 100%;

  259. 		height: 61rpx;

  260. 		position: relative;

  261. 

  262. 		.infoinput {

  263. 			width: 690rpx;

  264. 			height: 61rpx;

  265. 			background: #DEDEDE;

  266. 			border-radius: 31rpx;

  267. 			margin: 0 auto;

  268. 			color: #999999;

  269. 			font-size: 26rpx;

  270. 			padding-left: 20rpx;

  271. 		}

  272. 

  273. 		.dingweiinfo {

  274. 			width: 40rpx;

  275. 			height: 61rpx;

  276. 			background-color: #DEDEDE;

  277. 			position: absolute;

  278. 			top: 0rpx;

  279. 			left: 660rpx;

  280. 			display: flex;

  281. 			align-items: center;

  282. 			z-index: 1000;

  283. 			.sehoimg {

  284. 				display: block;

  285. 				width: 40rpx;

  286. 				height: 40rpx;

  287. 			}

  288. 		}

  289. 	}

  290. 

  291. 	.tab-box {

  292. 		width: 100%;

  293. 

  294. 		.tab-item-wrap {

  295. 			height: 88rpx;

  296. 			line-height: 88rpx;

  297. 			display: flex;

  298. 			justify-content: space-around;

  299. 			font-size: 4vw;

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

  301. 			background-size: 100% 1px;

  302. 			color: #959dad;

  303. 		}

  304. 	}

  305. 

  306. 	.bottom {

  307. 		color: #209fff;

  308. 		position: relative;

  309. 	}

  310. 

  311. 	.bottomLine {

  312. 		position: absolute;

  313. 		width: 156rpx;

  314. 		height: 6rpx;

  315. 		top: 80rpx;

  316. 		background-color: #298dff;

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

  318. 		left: 16rpx;

  319. 	}

  320. 

  321. 	.infoet {

  322. 		width: 100%;

  323. 

  324. 		.infoviewbox {

  325. 			width: 690rpx;

  326. 			padding-bottom: 20rpx;

  327. 			background: #FFFFFF;

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

  329. 			border-radius: 20rpx;

  330. 			margin: 0 auto;

  331. 			margin-top: 20rpx;

  332. 

  333. 			.infobox1 {

  334. 				width: 652rpx;

  335. 				height: 88rpx;

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

  337. 				margin: 0 auto;

  338. 				display: flex;

  339. 

  340. 				.box1-zuo {

  341. 					width: 50%;

  342. 					height: 100%;

  343. 					font-size: 30rpx;

  344. 					color: #333333;

  345. 					line-height: 88rpx;

  346. 				}

  347. 

  348. 				.box1-you {

  349. 					width: 50%;

  350. 					height: 100%;

  351. 					display: flex;

  352. 					align-items: center;

  353. 

  354. 					.you1 {

  355. 						width: 20rpx;

  356. 						height: 28rpx;

  357. 						margin-left: 32rpx;

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

  359. 						background-size: 100% 100%;

  360. 						display: flex;

  361. 						flex-direction: column-reverse;

  362. 

  363. 						.youimg {

  364. 							width: 100%;

  365. 							background-color: #333333;

  366. 						}

  367. 					}

  368. 					.you11 {

  369. 						width: 20rpx;

  370. 						height: 28rpx;

  371. 						margin-left: 32rpx;

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

  373. 						background-size: 100% 100%;

  374. 						display: flex;

  375. 						flex-direction: column-reverse;

  376. 					

  377. 						.youimg {

  378. 							width: 100%;

  379. 							background-color: red;

  380. 						}

  381. 					}

  382. 

  383. 					.you2 {

  384. 						width: 114rpx;

  385. 						height: 30rpx;

  386. 						// border: 1rpx solid red;

  387. 						font-size: 20rpx;

  388. 						color: #333333;

  389. 						margin-left: 6rpx;

  390. 					}

  391. 					.you22 {

  392. 						width: 114rpx;

  393. 						height: 30rpx;

  394. 						// border: 1rpx solid red;

  395. 						font-size: 20rpx;

  396. 						color: red;

  397. 						margin-left: 6rpx;

  398. 					}

  399. 

  400. 					.you3 {

  401. 						width: 30rpx;

  402. 						height: 28rpx;

  403. 						margin-left: 16rpx;

  404. 

  405. 						.youimg {

  406. 							display: block;

  407. 							width: 30rpx;

  408. 							height: 28rpx;

  409. 						}

  410. 					}

  411. 

  412. 					.you4 {

  413. 						width: 100rpx;

  414. 						height: 30rpx;

  415. 						// border: 1rpx solid red;

  416. 						font-size: 20rpx;

  417. 						color: #333333;

  418. 						margin-left: 6rpx;

  419. 					}

  420. 

  421. 				}

  422. 			}

  423. 

  424. 			.infobox2 {

  425. 				width: 652rpx;

  426. 				height: 33rpx;

  427. 				margin: 0 auto;

  428. 				display: flex;

  429. 				margin-top: 19rpx;

  430. 

  431. 				.box2-zuo {

  432. 					width: 40%;

  433. 					height: 100%;

  434. 					line-height: 33rpx;

  435. 					font-size: 24rpx;

  436. 					color: #333333;

  437. 					text-indent: 6rpx;

  438. 				}

  439. 

  440. 				.box2-you {

  441. 					width: 60%;

  442. 					height: 100%;

  443. 					line-height: 33rpx;

  444. 					font-size: 24rpx;

  445. 					color: #333333;

  446. 					text-indent: 30rpx;

  447. 				}

  448. 			}

  449. 		}

  450. 	}

  451. </style>