<template>
	<view class="fullHeight">
		<headers :showBack="true">
			<view class="headerName">
				升降机监测
			</view>
		</headers>
		<view class="menuBox">
			<view class="menuItem" @click="changeMenu(0)" :class="tabIndex==0?'active':''">
				数据总览
			</view>
			<view class="menuItem" @click="changeMenu(1)" :class="tabIndex==1?'active':''">
				数据趋势
			</view>
			<view class="menuItem" @click="changeMenu(2)" :class="tabIndex==2?'active':''">
				报警列表
			</view>
			<view class="menuItem" @click="changeMenu(3)" :class="tabIndex==3?'active':''">
				违规信息
			</view>
		</view>
		<!-- 数据总览 -->
		<view class="" v-if="tabIndex==0">
			<!-- <view class="blockBox">
				<view class="aqiBox">
					空气质量 <text class="txt">{{aqiData.analysisData}}</text><text class="txt">{{aqiData.analysisType}}</text>
				</view>
				<view class="numContent">
					<view class="numBox numBox1">
						<view class="num">
							{{environmentDevList.length}}
						</view>
						<view class="label">
							已有设备数量
						</view>
					</view>
					<view class="numBox">
						<view class="num">
							{{onlineDevNum}}
						</view>
						<view class="label">
							正常工作设备数量
						</view>
					</view>
				</view>
			</view> -->
			<view class="selectContent">
				<picker mode="selector" :range="environmentDevList" @change="changeDev" range-key="devName"
					:value="devIndex">
					<view class="selectVideoBox">
						<text class="videoName"
							v-if="environmentDevList.length>0">{{environmentDevList[devIndex].devName}}</text>
						<uni-icons class="arrow" type="arrowdown" size="15"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="blockBox">
				<!-- <view class="tipsBox">
					<image src="/static/tips.png" class="alarmIcon"></image>
					<text>PM10已超标！请开启喷淋装置和防尘措施</text>
				</view> -->
				<view class="realTimeBox">
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.loading}} kg
							</view>
							<view class="label">
								载重
							</view>
						</view>
					</view>
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.loadRatio}} %
							</view>
							<view class="label">
								重量百分比
							</view>
						</view>
					</view>
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.height}} m
							</view>
							<view class="label">
								高度
							</view>
						</view>
					</view>
					<view class="item">
						<view class="itemInner">
							<view class="num">
								<!-- {{(realTimeData.height/maxHeight*100).toFixed(2)}} % -->
								{{realTimeData.height}} %
							</view>
							<view class="label">
								高度百分比
							</view>
						</view>
					</view>
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.biasAngle}} °
							</view>
							<view class="label">
								前倾角
							</view>
						</view>
					</view>
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.biasRatio}} %
							</view>
							<view class="label">
								倾角百分比
							</view>
						</view>
					</view>
					<view class="item">
						<view class="itemInner">
							<view class="num">
								{{realTimeData.peopleNumber}} 人
							</view>
							<view class="label">
								人数
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="selectContent" v-if="videoList.length>0">
				<picker mode="selector" :range="videoList" @change="changeVideo" range-key="videoName"
					:value="videoIndex">
					<view class="selectVideoBox">
						<text class="videoName">{{videoList[videoIndex].videoName}}</text>
						<uni-icons class="arrow" type="arrowdown" size="15"></uni-icons>
					</view>
				</picker>
			</view>
			<block v-if="videoUrl">
				<view class="moudleTitle2">
					实时视频
				</view>
				<video class="videoBox" id="myVideo" :src="videoUrl" controls autoplay></video>
			</block>
			<view class="blockTitle">
				司机列表
			</view>
			<view class="blockBox">
				<view class="tableBox">
					<view class="tableHead">
						<view class="item">姓名</view>
						<view class="item">联系电话</view>
						<view class="item">照片</view>
					</view>
					<view v-for="(item,index) in driverList" :key="index" class="tableBody">
						<view class="item">{{item.workerName}}</view>
						<view class="item">{{item.phoneNumber}}</view>
						<view class="item">
							<image :src="url_config+'image/'+item.fieldAcquisitionUrl" class="profile_photo"
								@click="previewImg(url_config+'image/'+item.fieldAcquisitionUrl)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="" v-if="tabIndex==1">
			<view class="selectContent">
				<picker mode="selector" :range="environmentDevList" @change="changeDev" range-key="devName"
					:value="devIndex">
					<view class="selectVideoBox">
						<text class="videoName"
							v-if="environmentDevList.length>0">{{environmentDevList[devIndex].devName}}</text>
						<uni-icons class="arrow" type="arrowdown" size="15"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="blockBox">
				<view class="chartTitle">
					载重 (kg)
				</view>
				<u-charts canvas-id="lineChart1" chartType="line" :opts="lineChartData1" ref="lineChart1" :cWidth="315"
					:cHeight="200" :legends="false" />
			</view>
			<view class="blockBox">
				<view class="chartTitle">
					高度 (m)
				</view>
				<u-charts canvas-id="lineChart2" chartType="line" :opts="lineChartData2" ref="lineChart2" :cWidth="315"
					:cHeight="200" :legends="false" />
			</view>
			<!-- <view class="blockBox">
				<view class="chartTitle">
					风速 (m/s)
				</view>
				<u-charts canvas-id="lineChart3" chartType="line" :opts="lineChartData3" ref="lineChart3" :cWidth="315" :cHeight="200" :legends="false"/>
			</view>
			<view class="blockBox">
				<view class="chartTitle">
					噪音 (db)
				</view>
				<u-charts canvas-id="lineChart4" chartType="line" :opts="lineChartData4" ref="lineChart4" :cWidth="315" :cHeight="200" :legends="false"/>
			</view> -->
		</view>
		<view class="" v-if="tabIndex==2">
			<view class="selectContent selectContent2">
				<picker mode="selector" :range="environmentDevList" @change="changeDev" range-key="devName"
					:value="devIndex">
					<view class="selectVideoBox">
						<text class="videoName"
							v-if="environmentDevList.length>0">{{environmentDevList[devIndex].devName}}</text>
						<uni-icons class="arrow" type="arrowdown" size="15"></uni-icons>
					</view>
				</picker>

				<view v-if="typeState.length>0" class="flex evenly typeState">
					<view :class="statusSelect==item.val?'this_class':''" v-for="(item,index) in typeState" :key="index"
						@click="typeStateEve(item.val)">
						{{item.txt}}
					</view>

				</view>
				<!-- <picker mode="date" @change="changeDate" :value="searchDate" style="margin-left:15px">
					<view class="selectVideoBox">
						<text class="videoName">{{searchDate}}</text>
						<uni-icons class="arrow" type="arrowdown" size="15"></uni-icons>
					</view>
				</picker> -->
			</view>
			<view class="blockBox" v-for="(item,index) in alarmList" :key="index" @click="toDetails(item.id)">
				<view class="" style="position: absolute;right: 40rpx;top:40rpx;font-size:28rpx;">
					<text
						:style="item.status==1?'color: #00aaff;':item.status==2?'color:#00aaff':item.status==3?'color:#00aa00':'color:#00aa00'">{{status[item.status]}}</text>
				</view>

				<view class="alarmItem">
					<text class="label">设备名称：</text><text class="value">{{item.devName}}</text>
				</view>
				<view class="alarmItem">
					<text class="label">设备编号：</text><text class="value">{{item.devSn?item.devSn:''}}</text>
				</view>



				<view style="margin:12rpx 0;font-size: 24rpx;" class="rigBox">
					人数报警：<text
						:style="{color:item.peopleCntAlarm==0?'#44AB47':'#FF3F33'}">{{item.peopleCntAlarm==0?'正常':'报警'}}</text>
				</view>
				<view style="margin:12rpx 0;font-size: 24rpx;" class="rigBox">
					载重报警：<text
						:style="{color:item.weightAlarm==0?'#44AB47':'#FF3F33'}">{{item.weightAlarm==0?'正常':'报警'}}</text>
				</view>
				<view style="margin:12rpx 0;font-size: 24rpx;" class="rigBox">
					速度报警：<text
						:style="{color:item.speedAlarm==0?'#44AB47':'#FF3F33'}">{{item.speedAlarm==0?'正常':'报警'}}</text>
				</view>
				<view style="margin:12rpx 0;font-size: 24rpx;" class="rigBox">
					高度报警：<text
						:style="{color:item.heightAlarm==0?'#44AB47':'#FF3F33'}">{{item.heightAlarm==0?'正常':'报警'}}</text>
				</view>
				<view style="margin:12rpx 0;font-size: 24rpx;" class="rigBox">
					倾角X报警：<text
						:style="{color:item.obliguityXAlarm==0?'#44AB47':'#FF3F33'}">{{item.obliguityXAlarm==0?'正常':'报警'}}</text>
				</view>
				<view style="margin:12rpx 0;font-size: 24rpx;" class="rigBox">
					倾角Y报警：<text
						:style="{color:item.obliguityYAlarm==0?'#44AB47':'#FF3F33'}">{{item.obliguityYAlarm==0?'正常':'报警'}}</text>
				</view>
				<view style="margin:12rpx 0;font-size: 24rpx;" class="rigBox">
					风速报警：<text
						:style="{color:item.windSpeedAlarm==0?'#44AB47':'#FF3F33'}">{{item.windSpeedAlarm==0?'正常':'报警'}}</text>
				</view>
				<view style="margin:12rpx 0;font-size: 24rpx;" class="rigBox">
					1号电机报警：<text
						:style="{color:item.motor1Alarm==0?'#44AB47':'#FF3F33'}">{{item.motor1Alarm==0?'正常':'报警'}}</text>
				</view>
				<view style="margin:12rpx 0;font-size: 24rpx;" class="rigBox">
					2号电机报警：<text
						:style="{color:item.motor2Alarm==0?'#44AB47':'#FF3F33'}">{{item.motor2Alarm==0?'正常':'报警'}}</text>
				</view>
				<view style="margin:12rpx 0;font-size: 24rpx;" class="rigBox">
					3号电机报警：<text
						:style="{color:item.motor3Alarm==0?'#44AB47':'#FF3F33'}">{{item.motor3Alarm==0?'正常':'报警'}}</text>
				</view>
				<view style="margin:12rpx 0;font-size: 24rpx;" class="rigBox">
					防冲顶报警：<text
						:style="{color:item.topAlarm==0?'#44AB47':'#FF3F33'}">{{item.topAlarm==0?'正常':'报警'}}</text>
				</view>
				<view style="margin:12rpx 0;font-size: 24rpx;" class="rigBox">
					防坠器报警：<text
						:style="{color:item.fallAlarm==0?'#44AB47':'#FF3F33'}">{{item.fallAlarm==0?'正常':'报警'}}</text>
				</view>
				<view style="margin:12rpx 0;font-size: 24rpx;" class="rigBox">
					下限位报警：<text
						:style="{color:item.bottomAlarm==0?'#44AB47':'#FF3F33'}">{{item.bottomAlarm==0?'正常':'报警'}}</text>
				</view>
				<view class="alarmItem">
					<text class="label">报警时间：</text><text class="value">{{item.startTime}}</text>
				</view>

				<!-- <view class="alarmItem">
					<text class="label">准载：</text><text class="value">{{item.maxLoad}}</text>
				</view>
				<view class="alarmItem">
					<text class="label">载重：</text><text class="value">{{item.loading}}</text>
				</view>
				<view class="alarmItem">
					<text class="label">载重比：</text><text class="value">{{item.loadRatio}}</text>
				</view>
				<view class="alarmItem">
					<text class="label">制动距离：</text><text class="value">{{item.brakingDistance}}</text>
				</view>
				<view class="alarmItem">
					<text class="label">高度：</text><text class="value">{{item.height}}</text>
				</view>
				<view class="alarmItem">
					<text class="label">运行速度：</text><text class="value">{{item.speed}}</text>
				</view>
				<view class="alarmItem">
					<text class="label">状态：</text><text class="value">{{ item.status == 0?'正常': item.status == 1?'预警':item.status == 2?'报警':item.status == 3?'违章':'其他' }}</text>
				</view> -->
			</view>
			<view class="placeholderBox" v-if="alarmList.length==0">
				<image src="/static/noData.png" mode="" class="noDataImg"></image>
				<view class="text">
					暂无报警
				</view>
			</view>
		</view>
		<view v-if="tabIndex==3">
			<view class="selectContent selectContent2">
				<picker mode="selector" :range="environmentDevList" @change="changeDev2" range-key="devName"
					:value="devIndex">
					<view class="selectVideoBox">
						<text class="videoName"
							v-if="environmentDevList.length>0">{{environmentDevList[devIndex].devName}}</text>
						<uni-icons class="arrow" type="arrowdown" size="15"></uni-icons>
					</view>
				</picker>
				<view v-if="typeState.length>0" class="flex evenly typeState">
					<view :class="statusSelect==item.val?'this_class':''" v-for="(item,index) in typeState" :key="index"
						@click="typeStateEve(item.val,'Violation')">
						{{item.txt}}
					</view>

				</view>
				<!-- <picker mode="date" @change="changeDate2" :value="searchDate2" style="margin-left:15px">
					<view class="selectVideoBox">
						<text class="videoName">{{searchDate2}}</text>
						<uni-icons class="arrow" type="arrowdown" size="15"></uni-icons>
					</view>
				</picker> -->
			</view>
			<view class="violationInformationList">
				<view class="" v-for="(item,index) in violationInformationList" :key="item.id">
					<view class="vItem" @click="jump(item.id)">
						<view style="width: 100%;height: 280rpx;position: relative;">
							<image class="vItemImg" :src="url_config+'image/'+item.violationImage" mode=""></image>
							<view class="status">
								{{status[item.status]}}
							</view>
						</view>
						<view class="infoBox">
							<view class="devName">
								设备：{{item.devName}}
							</view>
							<view class="violationType">
								违规项：{{item.violationType}}
							</view>
							<view class="violationDate">
								{{item.violationDate}}
							</view>
						</view>
					</view>
				</view>
				<view class="placeholderBox" v-if="violationInformationList.length==0">
					<image src="/static/noData.png" mode="" class="noDataImg"></image>
					<view class="text">
						{{tips}}
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/component.vue';
	import headers from "../../../components/headers/headers.vue"
	import {
		GetDateStr
	} from "../../../static/js/util.js"
	export default {
		components: {
			uCharts
		},
		data() {
			return {
				typeState: [{
					txt: '待发起',
					val: 1
				}, {
					txt: '已整改',
					val: 3
				}], //statusSelect：整改状态 1:待发起 ,2:待整改 3：已整改
				statusSelect: 1,
				maxHeight: 0,
				status: {
					1: "待发起",
					2: "待整改",
					3: "已整改"
				},
				userInfo: {},
				projectDetail: '',
				environmentDevList: [],
				devIndex: 0,
				realTimeData: {
					loading: '--',
					biasRatio: '--',
					biasAngle: '--',
					heightRatio: '--',
					height: '--',
					loadRatio: '--',
					peopleNumber: '--',
					loading: '--',
				},
				alarmList: [],
				dustData_24: [],
				currentDevDetail: {},
				searchDate: '',
				searchDate2: '',
				lineChartData1: {
					categories: [],
					series: [{
						name: "载重",
						data: []
					}]
				},
				lineChartData2: {
					categories: [],
					series: [{
						name: "高度",
						data: []
					}]
				},
				// lineChartData3:{
				// 	categories: [],
				// 	series: [{
				// 			name: "风速",
				// 			data: []
				// 	}]
				// },
				// lineChartData4:{
				// 	categories: [],
				// 	series: [{
				// 			name: "噪音",
				// 			data: []
				// 	}]
				// },
				tabIndex: 0,
				onlineDevNum: 0,
				videoUrl: '',
				videoList: [],
				videoIndex: 0,
				driverList: [],
				onload: false,
				searchDate2: '',
				violationInformationList: [],
				pageNo: 1,
				pageBottom: true,
				tips: ''
			};
		},
		onLoad() {
			if(uni.getStorageSync('page_lifterMonitoring_index')){
				this.tabIndex = uni.getStorageSync('page_lifterMonitoring_index');
				console.log(this.tabIndex,'===============')
				uni.removeStorageSync('page_lifterMonitoring_index')
			}else{
				this.tabIndex = 0;
			}
			
			this.onload = true;
		},
		onShow() {

			if (!this.onload) {
				if(uni.getStorageSync('page_lifterMonitoring_index')){
					this.tabIndex = uni.getStorageSync('page_lifterMonitoring_index');
					console.log(this.tabIndex,'===============2')
					uni.removeStorageSync('page_lifterMonitoring_index')
				}else{
					this.tabIndex = 0;
				}
				this.onload = true;
			}
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
			this.searchDate = GetDateStr(0, '-')
			this.searchDate2 = GetDateStr(0, '-')
			this.getEnvironmentDev();
			console.log(this.tabIndex)
			this.loadData();


			if (this.userInfo.accountType == 6) { //整改人状态
				this.typeState = [];
				this.statusSelect = 2;

			} else {

				this.typeState = [{
					txt: '待发起',
					val: 1
				}, {
					txt: '已整改',
					val: 3
				}]
			}
		},
		onReachBottom() {
			if (this.pageBottom) {
				this.pageNo = this.pageNo + 1;
				this.getViolationInformationList();
			}
		},
		onHide() {
			this.onload = false;
		},
		methods: {
			typeStateEve(v, t) {
				this.statusSelect = v;
				this.pageNo = 1;
				if (t == 'Violation') {
					this.violationInformationList = [];
					this.getViolationInformationList();
				} else {
					this.alarmList = [];
					this.getAlarmData();
				}

			},
			//跳转详情
			jump(id) {
				uni.setStorageSync('page_lifterMonitoring_index',this.tabIndex);
				uni.navigateTo({
					url: "/pages/errorAction/errorAction?id=" + id
				});
			},
			//获取违规信息
			getViolationInformationList() {
				
				if(typeof(this.currentDevDetail)=='undefined'){

					return
				}

				let qData = {
					devSn: this.currentDevDetail.devSn,
					pageSize: 10,
					pageNo: this.pageNo,
					status: this.statusSelect,
					
					// violationDate:this.searchDate2,
					// devName:this.currentDevDetail.devName
				}
				if (this.userInfo.accountType == 6) {
					qData.pushPersonId = this.userInfo.userId
				}
				let that = this;
				this.sendRequest({
					url: "xmgl/lifterViolation/selectPage",
					data: qData,
					method: "get",
					success(res) {
						let data = res.result.records;
						if (data.length > 0) {
							that.violationInformationList = [...that.violationInformationList, ...res.result
								.records
							];
							that.pageBottom = true;
						} else {
							that.pageBottom = false;
						}
						if (that.violationInformationList.length == 0) {
							that.tips = '暂无数据';
							that.pageBottom = false;
						}

					}
				})
			},
			filterAlarm(val) {
				if (val == '0') {
					return "正常"
				} else if (val == 1) {
					return "报警"
				} else if (val == 2) {
					return "预警"
				}
			},
			toDetails(id) {
				uni.setStorageSync('page_lifterMonitoring_index',this.tabIndex);
				uni.navigateTo({
					url: '/pages/elevatorEscalation/elevatorEscalation?id=' + id
				})
			},
			previewImg(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			changeVideo(e) {
				this.videoIndex = e.target.value
				this.isHasVideo()
			},
			//判断设备有没有绑定视频
			isHasVideo() {
				var that = this
				if (that.videoList.length > 0) {
					if (that.videoList[this.videoIndex].videoType == 2) {
						that.videoUrl = that.videoList[this.videoIndex].liveRadioUrl
					} else {
						that.getPlayUrl()
					}
				}
			},
			getPlayUrl() {
				var that = this
				var videoInfo = that.videoList[this.videoIndex]
				var json = {
					itemId: that.videoList[this.videoIndex].itemId
				}
				if (videoInfo.videoType == 3) {
					json.streamType = 1
					json.type = 'rtsp' //rtsp或者hls
				}
				this.sendRequest({
					url: "xmgl/videoItem/getVideoItemInfo",
					data: json,
					method: "post",
					success(res) {
						switch (videoInfo.videoType) {
							case 1:
								that.videoUrl = res.result.videoInfo.hdFlvAddress
								break;
							default:
								that.videoUrl = res.result.videoInfo.url
								break;
						}
					}
				})
			},
			changeDate(e) {
				this.searchDate = e.target.value
				this.getAlarmData()
			},
			//违规信息选择
			changeDate2(e) {
				this.searchDate2 = e.target.value
				this.pageNo = 1;
				this.violationInformationList = [];
				this.getViolationInformationList();
			},
			//tab切换
			changeMenu(index) {
				this.tabIndex = index;
				this.loadData();
				this.currentDevDetail = this.environmentDevList[0];
				this.devIndex = 0;
				if (this.userInfo.accountType == 6) { //整改人状态
					this.typeState = [];
					this.statusSelect = 2;

				} else {
					this.statusSelect = 1;
					this.typeState = [{
						txt: '待发起',
						val: 1
					}, {
						txt: '已整改',
						val: 3
					}]
				}
				if (index == 3) {
					this.pageNo = 1;
					this.statusSelect = 1;
					this.violationInformationList = [];
					this.getViolationInformationList();
				}
			},
			loadData() {
				if (this.environmentDevList.length > 0) {
					switch (this.tabIndex) {
						case 0:
							this.getRealTimeData()
							this.getDevDetail()
							break;
						case 1:
							this.getDustData()
							break;
						case 2:
							this.pageNo = 1;
							this.getAlarmData()
							break;
						case 3:
							this.pageNo = 1;
							this.violationInformationList = [];
							this.getViolationInformationList();
							break;
					}
				}
			},
			changeDev(e) {
				this.devIndex = e.target.value
				this.currentDevDetail = this.environmentDevList[this.devIndex]
				this.loadData()
			},
			//设备选择
			changeDev2(e) {
				this.devIndex = e.target.value
				this.currentDevDetail = this.environmentDevList[this.devIndex]
				this.pageNo = 1;
				this.violationInformationList = [];
				this.getViolationInformationList();
			},
			//获取数据趋势
			getDustData() {
				var that = this
				this.sendRequest({
					url: "xmgl/lifterCurrentData/getTodayLifterCurrentDataList",
					data: {
						// projectSn: this.projectDetail.projectSn,
						// searchDate: this.searchDate,
						devSn: this.currentDevDetail.devSn
					},
					method: "POST",
					success(res) {
						var DATA = res.result
						console.log('实时数据', res)
						var xdata = [],
							ydata1 = [],
							ydata2 = [],
							ydata3 = [],
							ydata4 = [];
						DATA.forEach(element => {
							xdata.push(element.reciveTime.split(' ')[1])
							ydata1.push(element.loading)
							ydata2.push(element.height)
						})
						that.lineChartData1.categories = xdata
						that.lineChartData2.categories = xdata
						// that.lineChartData3.categories=xdata
						// that.lineChartData4.categories=xdata

						that.lineChartData1.series = [{
							name: "载重",
							data: ydata1
						}]
						that.lineChartData2.series = [{
							name: "高度",
							data: ydata2
						}]
						// that.lineChartData3.series=ydata3
						// that.lineChartData4.series=ydata4

						that.$refs.lineChart1.changeData('lineChart1', that.lineChartData1)
						that.$refs.lineChart2.changeData('lineChart2', that.lineChartData2)
						// that.$refs.lineChart3.changeData('lineChart3',that.lineChartData3)
						// that.$refs.lineChart4.changeData('lineChart4',that.lineChartData4)
					}
				})
			},
			//获取报警列表
			getAlarmData() {
				var that = this
				let qData = {
					projectSn: this.projectDetail.projectSn,
					pageNo: 1,
					pageSize: 100,
					// startTime: this.searchDate,
					// endTime: this.searchDate,
					devSn: this.currentDevDetail.devSn,
					accountType: this.userInfo.accountType,
					status: this.statusSelect,
				
				}
				if (this.userInfo.accountType == 6) {
					qData.pushPersonId = this.userInfo.userId
				}
				this.sendRequest({
					url: "xmgl/lifterAlarm/list",
					data:qData,
					 method: "POST",
					success(res) {
						that.alarmList = res.result.records
					}
				})
			},
			//获取设备
			getEnvironmentDev() {
				var that = this
				this.sendRequest({
					url: "xmgl/lifter/list",
					data: {
						projectSn: this.projectDetail.projectSn
					},
					method: "POST",
					success(res) {
						that.environmentDevList = res.result
						if (res.result.length > 0) {
							// for (var i = 0; i < res.result.length; i++) {
							// 	if(res.result[i].isClosed==1){
							// 		that.onlineDevNum+=1
							// 	}
							// }
							that.currentDevDetail = res.result[0]
							that.getRealTimeData()
							that.getDevDetail()
						}

					}
				})
			},
			// 获取设备详细
			getDevDetail() {
				var that = this
				this.sendRequest({
					url: "xmgl/lifter/selectLifterBySn",
					data: {
						devSn: this.currentDevDetail.devSn
					},
					method: "POST",
					success(res) {
						console.log(res, '获取设备详细')
						that.videoList = res.result.videoList
						that.maxHeight = res.result.lifter.maxHeight
						that.isHasVideo()
						that.driverList = res.result.driverList
					}
				})
			},
			//获取实时数据
			getRealTimeData() {
				var that = this
				this.sendRequest({
					url: "xmgl/lifterCurrentData/getNewestLifterCurrentData",
					data: {
						// projectSn: this.projectDetail.projectSn,
						devSn: this.currentDevDetail.devSn
					},
					method: "POST",
					success(res) {
						if (res.result) {
							that.realTimeData = res.result
							console.log('that.realTimeData-------',that.realTimeData);
						} else {
							that.realTimeData = {
								loading: '--',
								biasRatio: '--',
								biasAngle: '--',
								heightRatio: '--',
								height: '--',
								loadRatio: '--',
								peopleNumber: '--',
								loading: '--',
							}
						}

					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.typeState {
		height: 80rpx;
		background-color: #fff;
		font-size: 28rpx;

		width: 44%;
	}

	.this_class {
		color: #007AFF;
	}

	.tips {
		font-size: #666;
		text-align: center;
		padding-top: 200px;
	}

	.vItem {
		width: 100%;
		box-sizing: border-box;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
		background-color: #fff;
		box-shadow: 0 10rpx 10rpx #eee;
		border-radius: 8rpx;
		overflow: hidden;

		.vItemImg {
			width: 100%;
			height: 280rpx;
			background-color: #eee;
		}

		.status {
			position: absolute;
			font-size: 26rpx;
			bottom: 0;
			padding: 12rpx 20rpx;
			background-color: rgba(0, 0, 0, .3);
			left: 0;
			width: 100%;
			color: #fff;
		}

		.infoBox {
			padding: 10rpx 20rpx;

			.devName {
				font-size: 28rpx;
			}

			.violationType {
				font-size: 26rpx;
				margin: 10rpx 0;
			}

			.violationDate {
				font-size: 22rpx;
				color: #999;
			}
		}

	}

	.violationInformationList {
		padding: 20rpx;
		padding-top: 0;
	}

	.menuBox {
		display: flex;
		align-items: center;
		height: 36px;
		font-size: 15px;
		background-color: white;
		margin-top: -1px;
		position: relative;
		z-index: 999;
		border-bottom: 1px solid rgba(194, 194, 194, 0.2);

		.menuItem {
			flex: 1;
			text-align: center;

			&.active {
				color: rgba(43, 141, 243, 1);
			}
		}
	}

	.blockBox {
		position: relative;
		box-shadow: 0 4px 24px 0px rgba(212, 220, 236, 0.69);
		border-radius: 8px;
		margin: 15px;
		padding: 15px;
	}

	.numContent {
		text-align: center;
	}

	.numBox {
		width: 130px;
		height: 50px;
		border-radius: 8px;
		background-image: linear-gradient(rgba(134, 145, 252, 1), rgba(16, 97, 254, 1));
		font-size: 12px;
		color: white;
		text-align: center;
		display: inline-block;

		.num {
			font-size: 15px;
			margin: 5px 0 0px;

		}
	}

	.numBox1 {
		margin-right: 10px;
	}

	.selectContent {
		text-align: center;
		margin-top: 15px;
	}

	.selectVideoBox {
		border: 1px solid rgba(42, 43, 91, 0.2);
		border-radius: 18px;
		height: 35px;
		font-size: 15px;

		display: inline-block;

		.videoName {
			padding: 0 12px 0 15px;
			// border-right: 1px solid rgba(42, 43, 91, 0.2);
			line-height: 35px;
			height: 35px;
		}

		.arrow {
			padding: 0 12px 0 2px;
		}
	}

	.arrow {
		margin-left: 10px;
	}

	.realTimeBox {
		overflow: hidden;

		.item {
			float: left;
			width: 33.33%;

			.itemInner {
				// box-shadow: 0 4px 24px 0px rgba(212, 220, 236, 0.69);
				border: 1px solid rgba(220, 220, 220, 0.3);
				margin: 3.5px;
				font-size: 12px;
				text-align: center;
				padding: 7px 0;
			}

			.num {
				font-size: 15px;
				color: rgba(43, 141, 243, 1);
			}
		}
	}

	.alarmIcon {
		width: 20px;
		height: 20px;
	}

	.switchIcon {
		width: 50px;
		height: 29px;
	}

	.blockTitle {
		text-align: center;
	}

	.tableBox {
		font-size: 14px;
		width: 100%;

		.tableHead {
			font-weight: bold;
			display: flex;
			border-bottom: 1px solid rgba(42, 43, 91, 0.1);

			.item {
				flex: 1;
				padding: 0 0 10px;
				text-align: center;
			}
		}

		.tableBody {
			display: flex;
			align-items: center;

			.item {
				flex: 1;
				text-align: center;
				justify-content: center;
				padding: 10px 0 0px;
			}
		}
	}

	.chartTitle {
		font-size: 14px;
		font-weight: 500;
		margin-bottom: 15px;
	}

	.selectContent2 {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.alarmItem {
		font-size: 14px;

		.label {
			opacity: 0.6;
		}
	}

	.profile_photo {
		width: 30px;
		height: 30px;
	}

	.moudleTitle2 {
		font-size: 10px;
		opacity: 0.69;
		font-weight: 400;
		margin: 15px 0;
		text-align: center;
	}

	.videoBox {
		width: calc(100% - 30px);
		height: 225px;
		margin: 0px 15px;
		border-radius: 10px;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.center {
		justify-content: center;
	}

	.between {
		justify-content: space-between;
	}

	.warp {
		flex-wrap: wrap;
	}

	.evenly {
		justify-content: space-evenly;
	}
</style>
