uniapp/pages/index/index.vue

<template>
	<view style="background:#f1f1f1;" class="padding-sm">
		<view class="searchSelect shadow" v-if="flag">
			<view class="cu-bar search bg-white">
				<view class="search-form round">
					<input @focus="InputFocus" @blur="InputBlur" @input="handleInput()" v-model="searchInput" :adjust-position="false"
					 type="text" placeholder="" confirm-type="search"></input>
					<text class="cuIcon-search "></text>
				</view>
			</view>
			<view class="select-items">
				<view class="select-item" v-for="(item,index) in searchList" @click="clickSelectItem(item,index)" :key="index">{{item}}</view>
			</view>
		</view>
		<view class="section1 section bg-white padding-xs">
			<view class=" static-tabs grid margin-bottom text-center col-3 margin-top-sm margin-bottom-sm">

				<view :class="['padding-sm ',Inv==0?'active':'']" @click="Inv=0">报警信息统计</view>
				<view :class="['padding-sm ',Inv==1?'active':'']" @click="Inv=1">数据等级统计</view>
				<view :class="['padding-sm ',Inv==2?'active':'']" @click="Inv=2">设备运行状态</view>
			</view>
			<view class="time text-center">统计时段：{{staticData.statisticalPeriod}}
			</view>
			<view style="height:570rpx">
				<view v-if="Inv == 0">
					<chart :bindData="staticData" v-if="hackReset"></chart>
				</view>
				<view v-if="Inv == 1">

					<chart2 :bindData="staticData"></chart2>
				</view>
				<view v-if="Inv == 2" class="chart3-box">
					<ul class="chart3-icon">
						<li>
							<image src="../../static/chart3-1.png" style="width:64rpx;height:64rpx"></image>
						</li>
						<li>
							<image src="../../static/chart3-2.png" style="width:64rpx;height:64rpx"></image>
						</li>
						<li>
							<image src="../../static/chart3-3.png" style="width:64rpx;height:64rpx"></image>
						</li>
						<li>
							<image src="../../static/chart3-4.png" style="width:64rpx;height:64rpx"></image>
						</li>
						<li>
							<image src="../../static/chart3-5.png" style="width:64rpx;height:64rpx"></image>
						</li>
					</ul>
					<chart3 :bindData="staticData">
					</chart3>
				</view>
			</view>
		</view>

		<!-- 宫格列表 -->
		<!-- <square :cuIconList="cuIconList"></square> -->
		<view class="section2 section  bg-white margin-top-sm margin-bottom-sm">
			<view class="cu-list grid col-3 no-border">
				<view class="cu-item justify-center align-center" @tap=navItemClick(index) v-for="(item,index) in cuIconList" :key="index">
					<image :src="item.imgUrl" style="width:100rpx;height:100rpx"></image>
					<view class="cu-tag badge" v-if="item.badge!=0">
						<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import chart from './components/chart/chart.vue';
	import chart2 from './components/chart2/chart2.vue';
	import chart3 from './components/chart3/chart3.vue';
	import chart4 from './components/chart4/chart4.vue';
	import json from '../../data/json.js';

	export default {
		components: {
			chart,
			chart2,
			chart3,
			chart4

		},
		data() {
			return {
				componentKey: 0,
				arr: [],
				searchInput: '',
				alarmCount:'',
				flag: false,
				// 宫格列表数据
				cuIconList: [{
					imgUrl: '../../static/square1.png',
					badge: 111,
					name: '综合报警',
					redirectUrl: '/pages/siteList/siteList?type=1'
				}, {
					imgUrl: '../../static/square2.png',
					badge: 100,
					name: '运行监测',
					redirectUrl: '/pages/siteList/siteList?type=2'
				}, {
					imgUrl: '../../static/square-wb.png',
					badge: 0,
					name: '维保',
					redirectUrl: ''
				}, {
					imgUrl: '../../static/square-bx.png',
					badge: 0,
					name: '报修',
					redirectUrl: ''
				}, {
					imgUrl: '../../static/square-rl.png',
					badge: 0,
					name: '人脸识别',
					redirectUrl: ''
				}, {
					imgUrl: '../../static/square-xj.png',
					badge: 0,
					badge: 0,
					name: '巡检',
					redirectUrl: ''
				}, {
					imgUrl: '../../static/square-bz.png',
					badge: 0,
					badge: 0,
					name: '风险保障',
					redirectUrl: ''
				}],
				Inv: 0,
				searchList: [],
				searchList2: [],
				staticData: {}
			};
		},
		onNavigationBarButtonTap(e) {
			if (e.float == 'right') {
				console.log("你点击了扫一扫")
				uni.scanCode({
					// success: function(res) {
					// 	console.log('条码类型：' + res.scanType);
					// 	console.log('条码内容：' + res.result);
					// }
					success: function(res) {
						let result = res.result;
						if (result.indexOf('http://') == 0 || result.indexOf('https://') == 0) {
							//是网址，直接跳转  
							plus.runtime.openURL(result); //调用手机浏览器  
							//怎么在APP内跳转网址？  
						} else {
							//不是网址，打印出结果  
							uni.showToast({
								title: res.result
							})
						}
					},
					fail: function(err) {
						console.log('扫码失败', err)
					}
				});
			} else {
				this.showTag()
			}
		},

		onLoad(option) {

			let ua = navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == "micromessenger"){
				//是
				this.init();
			}else{
				//不是
				// uni.navigateTo({
				// 	url: '/pages/login/login',
				// });
				// setTimeout(function() {
				// 	uni.navigateTo({
				// 		url: '/pages/login/login',
				// 	});
				// }, 2000);
			}


			this.hackReset = false;
			this.$nextTick(() => {
				this.hackReset = true;
			})
			this.getData();
			this.getSearchList();
		},
		methods: {

			// start
			getUrlCode() {
				var url = location.search
				this.winUrl = url
				var theRequest = new Object()
				if (url.indexOf("?") != -1) {
					var str = url.substr(1)
					var strs = str.split("&")
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
					}
				}
				return theRequest
			},
			async getUrlPrams(key) {
				var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)", "i");
				var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
				var context = "";
				if (r != null) {
					context = r[2];
				}
				return context;
			},
			async init() {
				var appId = "wx4eab2e3b5531d58b";
				var params = {};
				var CODE = this.getUrlCode();
				var code = CODE['code'];
				if (code) {

					params.code = code;
			

					//使用code请求服务器接口，换取用户用户openID
					const res = await this.$myRequest({
						url: 'Com/getPageAuthorization',
						data: params
					})
					if (res.data.flag == 3000) {
						// alert("授权失败,请重新登录");
						window.location.href ='https://qhome.usky.cn/index.html#/';
					}
			
					if (res.data.flag == 3003) {
						uni.navigateTo({
							url: '/pages/authority/authority',
						});
					}
					if (res.data.flag == 3002) {
						// alert("授权失败,请重新登录");
						window.location.href ='https://qhome.usky.cn/index.html#/';
					}
					return "ok";
				}

				var cs = {};
				var curl = window.location.href;
				cs.curl = curl;

				const res1 = await this.$myRequest({
					url: 'Com/getAuthorizationUrl',
					data: cs
				})

				var turl = res1.data.turl;
				window.location.href =
					'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx4eab2e3b5531d58b&redirect_uri=' + turl +
					'&response_type=code&scope=snsapi_base&state=abc123#wechat_redirect';
			},
			// end

			//首页初始化授权
			async getPageAuthorization(ming = {}) {
				const res = await this.$myRequest({
					url: 'Com/getPageAuthorization',
					data: ming
				})

				if (res.data.flag == 3000) {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}
				if (res.data.flag == 3002) {
					uni.navigateTo({
						url: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx4eab2e3b5531d58b&redirect_uri=' + res.data
							.tourl + '&response_type=code&scope=snsapi_base&state=abc123#wechat_redirect',
					});
				}

			},

			async getData() {
				const res = await this.$myRequest({
					url: 'Index/getDataStatistics',
					showLoading: true
				})
				this.staticData = res.data.data[0]
				this.alarmCount=this.staticData.alarmCount
			},


			async getSearchList(ming = {}) {
				const res = await this.$myRequest({
					url: 'Index/getSiteDropDownBox',
					data: ming
				})
				res.data.data.forEach(item => {
					this.searchList.push(item.siteName)
					this.searchList2.push(item.siteName)
				});
			},

			clickSelectItem(item, index) {
				this.getSearchList({
					"siteName": item
				});
				this.flag = false
			},

			handleInput() {
				var newlist = this.searchList2.filter(item => item.indexOf(this.searchInput) > -1)
				this.searchList = newlist
			},

			navItemClick(index) {
				let url = "";
				switch (index) {
					case 0:
						url = "/pages/siteListAlarming/siteListAlarming"
						break;
					case 1:
						url = "/pages/siteList/siteList"
						break;
					default:
						break;
				}
				if (url) {
					uni.navigateTo({
						url: url
					})
				} else {
					uni.showModal({
						title: 'Tips',
						content: '此模块开发中~',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
							} else if (res.cancel) {
							}
						}
					});
				}
			},

			showTag() {
				this.flag = !this.flag;
			},

			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},

			changeTab(Inv) {
				that.navIdx = Inv;

			},

		}
	}
</script>

<style lang="scss">
	body {
		background: #f1f1f1 !important;
	}

	.select-items {
		overflow: auto;
		height: 80vh
	}

	.static-tabs {
		border-radius: 50rpx;
		border: 1rpx solid #4074E7;
	}

	.static-tabs>view {
		color: #4074E7;
		font-size: 30rpx;
	}

	.static-tabs>view.active {
		color: #fff;
		background: #4074E7
	}

	.static-tabs>view:first-child {
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
	}

	.static-tabs>view:nth-child(2) {
		border-left: 1px solid #4074E7;
		border-right: 1px solid #4074E7
	}

	.static-tabs>view:last-child {
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
	}


	/* 检测时间 */
	.time {
		border-radius: 50rpx;
		background: #FAFCFF;
		border: 1px solid #E8F1FF;
		padding: 20rpx;
		color: #666666;
		font-size: 28rpx;

	}

	.chart3-box {
		position: relative
	}

	.chart3-icon {
		position: absolute;
		top: 60rpx;
		left: 30rpx
	}

	.chart3-icon li {
		padding-top: 25rpx
	}

	ul,
	li {
		padding: 0;
		margin: 0;
		list-style: none
	}
</style>

<style>
	.shadow {
		box-shadow: 1px 1px 4px rgb(26 26 26 / 10%);
	}
</style>