zhxf-app/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" style="margin-top:0">
					<input @focus="InputFocus" @blur="InputBlur" @input="handleInput()" v-model="searchInput"
						:adjust-position="false" type="text" placeholder="" confirm-type="search"
						style="border:none!important"></input>
					<text class="cuIcon-search "></text>
				</view>
			</view>
			<view class="select-items">
				<view class=" site-item" v-if="!searchList.length" style="text-align:center">暂无结果</view>
				<view class="select-item" v-for="(item,index) in searchList" @click="clickSelectItem(item,index)"
					:key="index">{{item.owner_name}}</view>
			</view>
		</view>
		<!-- 下拉选择 end -->

		<!-- 图表 -->
		<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 :fbindData="staticData" :findicator="indicator" :fdatavalue="datavalue" v-if="staticData!= '' && hackReset && JSON.stringify(staticData) != '{}'"></chart>
				</view>
				<view v-if="Inv == 1">
					<chart2  v-if="staticData!= ''" :bindData="staticData"></chart2>
				</view>
				<view v-if="Inv == 2"  class="chart3-box">
					<ul class="chart3-icon">
						<li @tap="goOfflineList()">
							<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 @tap="goNormalList()">
							<image src="../../static/chart3-5.png" style="width:64rpx;height:64rpx"></image>
						</li>
					</ul>
					<chart3  v-if="staticData!= ''" :bindData="staticData">
					</chart3>
				</view>
			</view>
		</view>
		<!-- 图表 end-->

		<!-- 宫格列表 -->
		<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!=0">{{item.badge>99?'99+':item.badge}}</block>
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- 宫格列表 end -->

	</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 searchSelect from './components/searchSelect/searchSelect.vue';

	import json from '../../data/json.js';

	//引入js sdk的封装
	import * as jwx from '../../util/jssdk.js'

	export default {
		components: {
			chart,
			chart2,
			chart3,
			searchSelect
		},

		data() {
			return {
				staticData: '',
				indicator:[],
				datavalue:[],
				dataname:[],
				alarmCount: json.staticData.data[0].alarmCount,
				cuIconList: json.cuIconList,
				Inv: 0,
				defaultSite: 0,
				flag: false,
				searchList: [],
				searchList2: [],
				searchInput: '',
				selectedCode: 10012,
				getData: [],
				codeResult: '',

			};
		},

		// 自定义导航事件
		onNavigationBarButtonTap(e) {
			if (e.float == 'right') {
				// alert("你点击了扫一扫");
				this.scanQRCode();
				
				
			} else {
				// alert("你点击了获取位置");
				// this.getLocation()
				this.showTag()
			}
		},

		onLoad(option) {

			if (option.op) {
				// alert('op')
				// 首页数据渲染
				this.getSearchList();
				this.getHomeData({
					'company_code': uni.getStorageSync('selectedCode') ? uni.getStorageSync('selectedCode') : this
						.defaultSite
				});
				this.getHandleData({
					'company_code': uni.getStorageSync('selectedCode') ? uni.getStorageSync('selectedCode') : this
						.defaultSite
				});

			} else {
				this.init()
			}

			// 首页数据渲染
			// this.getSearchList();
			// this.getHomeData({
			// 	'company_code': uni.getStorageSync('selectedCode') ? uni.getStorageSync('selectedCode') : this
			// 		.defaultSite
			// });
			// this.getHandleData({
			// 	'company_code': uni.getStorageSync('selectedCode') ? uni.getStorageSync('selectedCode') : this
			// 		.defaultSite
			// });
			
			var res = uni.getStorageSync('selectedCode');
			var res2 = uni.getStorageSync('selectedName');
			if (res) {
				uni.setNavigationBarTitle({
					title: res2
				});
			}

			// 图表切换渲染
			this.hackReset = false;
			this.$nextTick(() => {
				this.hackReset = true;
			})
		},
		methods: {
			async init() {
				window.location.href = this.$BASE_URL + "Com/getPageAuthorization1"
			},
			//扫码
			scanQRCode() {
				// 将this赋值给that
				let that = this;
				// 微信公众号获取位置
				jwx.configWeiXin(jweixin => {
					jweixin.scanQRCode({
						needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
						scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
						success: function(res) {
							setTimeout(function() {
								/* 放1000ms后执行的代码 */
								alert(res.resultStr)
								that.getCodeResult({
									"ercode": res.resultStr
								})
							}, 1000)
						}
					});
				});
			},
			
			// 扫码成功后请求
			async getCodeResult(param = {}) {
				const res = await this.$myRequest({
					url: 'ScanPush/scan_push',
					data: param
				})
				if (res.data.flag) {
					uni.showToast({
						title: '扫码成功',
						icon: "none"
					})
				}
			},

			//获取地理位置
			getLocation() {
				alert(2)
				// 将this赋值给that
				let that = this;
				// 微信公众号获取位置
				jwx.configWeiXin(jweixin => {
					alert(22)
					jweixin.getLocation({
						type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
						success: function(res) {
							alert(res.longitude)
						}
					});
				});
			},

			// 九宫格页面跳转
			navItemClick(index) {
				let url = "";
				switch (index) {
					case 0:
						url = "/pages/alarmingList/alarmingList"
						break;
					case 1:
						url = "/pages/deviceType/deviceType"
						break;
					case 2:
						url = "/pages/inspectList/inspectList"
						break;
					case 3:
						url = "/pages/xunJian/xunJian"
						break;
					case 4:
						url = "/pages/repair/repair"
						break;
					case 5:
						url = "/pages/weiBao/weiBao"
						break;
					case 6:
						url = "/pages/videoList/videoList"
						break;
					case 7:
						url = "/pages/safeGuard/safeGuard"
						break;
						// case 8:
						// 	url = "/pages/test/test"
						// 	break;
					case 9:
						url = "/pages/deviceManage/deviceManage"
						break;
					case 10:
						url = "/pages/accountManage/accountManage"
						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) {}
						}
					});
				}
			},
			// 页面跳转
			goOfflineList() {
				uni.navigateTo({
					url: '/pages/deviceOffLine/deviceOffLine?status_type=1',
				});
			},
			goNormalList() {
				uni.navigateTo({
					url: '/pages/deviceOffLine/deviceOffLine?status_type=2',
				});
			},
			//站点下拉请求
			async getSearchList(param = {}) {
				const res = await this.$myRequest({
					url: 'Index/getCompanyList',
					data: param
				})
				this.getData = res.data.data
				this.defaultSite = this.getData[0].owner_code;
				if (!uni.getStorageSync('selectedCode')) {
					uni.setStorageSync('selectedCode', this.getData[0].owner_code);
					uni.setStorageSync('selectedName', this.getData[0].owner_name);
				}
				res.data.data.forEach(item => {
					this.searchList.push(item)
					this.searchList2.push(item);
				});
			},
			showTag() {
				this.flag = !this.flag;
			},
			// 下拉选择
			clickSelectItem(item, index) {
				this.staticData = '';
				this.selectedCode = item.owner_code;
				uni.setStorageSync('selectedCode', item.owner_code);
				uni.setStorageSync('selectedName', item.owner_name);
				this.searchInput = item.owner_name;
				uni.setNavigationBarTitle({
					title: this.searchInput
				});
				this.getHomeData({
					'company_code': uni.getStorageSync('selectedCode')
				});
				this.getHandleData({
					'company_code': uni.getStorageSync('selectedCode')
				});
				this.flag = false;
				
				
			},
			handleInput() {
				var newlist = this.searchList2.filter(item => item.owner_name.indexOf(this.searchInput) > -1);
				this.searchList = newlist
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			changeTab(Inv) {
				that.navIdx = Inv;
			},
			//echarts图表请求
			async getHomeData(param = {}) {
				const res = await this.$myRequest({
					url: 'Index/getHomePageData',
					data: param
				})
				// console.log('首页请求staticData')
				// console.log(res.data.data[0])
				this.staticData = res.data.data[0];
				
				// var data = res.data.data[0]
				
				var datavalue = [this.staticData.fire_water_count, this.staticData.alarm_host_count, this.staticData.electrical_fire_count, this.staticData.other_count, this.staticData.video_monitoring_count
				]
				var dataname = ['消防水系统', '报警主机', '电气火灾', '其他', '监控视频']
				var color = ['#3C8BF0', '#06CDF8', '#0ECB70', '#6744EF', '#FFD803'];
				
				var aa = [this.staticData.fire_water_count, this.staticData.alarm_host_count, this.staticData
					.electrical_fire_count, this.staticData.other_count, this.staticData.video_monitoring_count
				]
				aa.sort(function(a, b) {
					return a - b;
				});
				aa = aa.pop();
				var datamax = [aa, aa, aa, aa, aa];
				
				this.datavalue = datavalue;
				this.dataname=dataname;
				
				dataname.map((val, ind) => {
					this.indicator.push({
						name: val,
						max: datamax[ind],
						color: color[ind]
					})
				})
				this.indicator=this.indicator.slice(-5)
			},
			// 未处理告警请求
			async getHandleData(param = {}) {
				const res = await this.$myRequest({
					url: 'Index/getFunctionalModuleStatistics',
					showLoading: true,
					data: param
				})
				this.cuIconList[0].badge = res.data.data[0].comprehensive_alarm_count;
				this.cuIconList[2].badge = res.data.data[0].fire_brigade_inspector_count
			},
		}
	}
</script>

<style >
	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: 30rpx;

	}

	.chart3-box {
		position: relative
	}

	.chart3-icon {
		width: 90%;
		position: absolute;
		top: 60rpx;
		left: 30rpx;
		z-index: 1;
	}

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

	ul,
	li {
		padding: 0;
		margin: 0;
		list-style: none
	}
	
	.shadow {
		box-shadow: 1px 1px 4px rgb(26 26 26 / 10%);
	}
</style>

<style>
	
</style>