<template>
	<view class="addIssue">
		<view class="fixedheader">
			<headers :showBack="true" :themeType="true">
				<view class="headerName">
					桥机监测
				</view>
			</headers>
		</view>
		<view class="search-box" :style="{paddingTop: mobileTopHeight + 44 + 'px'}">
			<u-collapse>
				<u-collapse-item>
					<view @click="bridgeInfo.collapseFlag = !bridgeInfo.collapseFlag" class="collapse-header"
						slot="title-all">
						<view>
							<view></view>
							<view>{{ bridgeInfo.bridgeName || '全部'}}</view>
						</view>
						<view>
							<view>{{bridgeCraneDevList.length > 0 ? bridgeCraneDevList.length - 1 : 0}}台</view>
							<view class="arrow-bottom"></view>
						</view>
					</view>
					<view class="collapse-content" v-show="bridgeInfo.collapseFlag">
						<view @click="onBridgeCraneDevClick(item)"
							:class="{'view-active': item.devId == bridgeInfo.bridgeId}"
							v-for="item in bridgeCraneDevList" :key="item.devId">{{item.devName}}</view>
					</view>
				</u-collapse-item>
			</u-collapse>
			<u-tabs :bar-height="4" :font-size="28" active-color="#498CEC" inactive-color="#B3B3B3" :bar-width="140"
				:list="list" :is-scroll="false" :current="current" @change="currentChange"></u-tabs>
		</view>
		<view class="content">
			<template v-if="current == 0">
				<view class="box-main1" v-if="!bridgeInfo.bridgeId">
					<view class="box-main1_header">
						今日桥机工作情况
					</view>
					<view class="main1-item" v-for="(item, index) in bridgeTodayList" :key="item.id">
						<view class="main1-item-top">
							<view :class="`item-image${index}`"></view>
							<view class="item-top_right">
								<view>
									<view>{{item.title}}</view>
									<view>{{item.countNum}}次</view>
								</view>
								<view class="schedule">
									<view
										:style="`width: ${Math.abs(item.countPer) >= 100 ? 100 : Math.abs(item.countPer)}%`">
									</view>
								</view>
							</view>
						</view>
						<view class="main1-item-bottom">
							<view class="">
								<view class=""></view>
								<view class="">相比昨日</view>
							</view>
							<view class="">
								<view class="">{{item.countPer}}%</view>
								<view :class="item.countPer >= 0 ? 'bottom-image_up' : 'bottom-image_down'"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="box-main4" v-else>
					<view class="content-box content-box1">
						<view class="box-main1_header">
							实时监控
							<view class="" @click="onClickType(5)">
								<view>{{videoInfo.videoName}}</view>
								<view></view>
							</view>
						</view>
						<view class="bridge-video" v-if="!videoShow && videoFlag">
							<!-- APP环境使用web-view -->
							<!--  #ifdef APP-PLUS  -->
							<video v-if="!isYsy" class="videoBox" id="myVideo" :custom-cache="false"
								:src="playUrlFilter" controls autoplay></video>
							<!--  #endif  -->
							<!-- H5环境使用ezuikit -->
							<!--  #ifdef H5  -->
							<my-player-m3u8 v-if="!isYsy && playUrlFilter" :showMask="true" :src="playUrlFilter"
								:autoplay="true" />
							<video v-else class="videoBox" id="myVideo" :custom-cache="false" :src="playUrlFilter"
								controls autoplay>
							</video>
							<!--  #endif  -->
							<view v-if="isYsy && playUrlFilter && accessToken"
								:style="{width: '100%', height: '225px'}">
								<!-- H5环境使用ezuikit -->
								<!--  #ifdef H5  -->
								<iframe :src="ysyPlayUrl" :style="webviewStyles" frameborder="0"
									:scrolling="'no'"></iframe>
								<!--  #endif  -->
								<!-- APP环境使用web-view -->
								<!--  #ifdef APP-PLUS  -->
								<web-view :src="ysyPlayUrl" :style="webviewStyles"
									:webview-styles="webviewConfig"></web-view>
								<!--  #endif  -->
							</view>
						</view>
						<view class="bridge-video" v-else>
							<view class="videoBox1"></view>
						</view>
					</view>
					<view class="content-box content-box2">
						<view class="box-main1_header">
							桥机实时数据
						</view>
						<view class="box-main4_item">
							<view>上传时间:</view>
							<view>{{bridgeCraneNewestInfo.uploadTime}}</view>
						</view>
						<view class="box-main4_item">
							<view>设备类型:</view>
							<view>{{bridgeCraneNewestInfo.devType}}</view>
						</view>
						<view class="box-main4_item">
							<view>本次工作时间(h):</view>
							<view>{{bridgeCraneNewestInfo.workTime}}</view>
						</view>
						<view class="box-main4_item">
							<view>累计工作时间(h):</view>
							<view>{{bridgeCraneNewestInfo.cumulativeWorkingTime}}</view>
						</view>
						<view class="box-main4_item">
							<view>工作循环次数(次):</view>
							<view>{{bridgeCraneNewestInfo.operatingCycleNumber}}</view>
						</view>
						<view class="box-main4_item">
							<view>总重量(t):</view>
							<view>{{bridgeCraneNewestInfo.neiweight5}}</view>
						</view>
						<view class="box-main4_item">
							<view>前天车小车行程(m):</view>
							<view>{{bridgeCraneNewestInfo.distance1}}</view>
						</view>
						<view class="box-main4_item">
							<view>后天车小车行程(m):</view>
							<view>{{bridgeCraneNewestInfo.distance2}}</view>
						</view>
						<view class="box-main4_item">
							<view>前天车前部安全距离(m):</view>
							<view>{{bridgeCraneNewestInfo.distance10}}</view>
						</view>
						<view class="box-main4_item">
							<view>后天车前部安全距离(级):</view>
							<view>{{bridgeCraneNewestInfo.distance12}}</view>
						</view>
						<view class="box-main4_item">
							<view>前天车后部安全距离(m):</view>
							<view>{{bridgeCraneNewestInfo.distance11}}</view>
						</view>
						<view class="box-main4_item">
							<view>后天车后部安全距离(m):</view>
							<view>{{bridgeCraneNewestInfo.distance13}}</view>
						</view>
						<view class="box-main4_item">
							<view>大车行程(m):</view>
							<view>{{bridgeCraneNewestInfo.distance7}}</view>
						</view>
						<view class="box-main4_item">
							<view>大车偏斜行程(m):</view>
							<view>{{bridgeCraneNewestInfo.distance14}}</view>
						</view>
						<view class="box-main4_item">
							<view>前天车吊钩速度(min):</view>
							<view>{{bridgeCraneNewestInfo.speed1}}</view>
						</view>
						<view class="box-main4_item">
							<view>前天车吊钩高度(m):</view>
							<view>{{bridgeCraneNewestInfo.distance5}}</view>
						</view>
						<view class="box-main4_item">
							<view>前天车吊钩重量(t):</view>
							<view>{{bridgeCraneNewestInfo.neiweight1}}</view>
						</view>
						<view class="box-main4_item">
							<view>后天车吊钩速度(min):</view>
							<view>{{bridgeCraneNewestInfo.speed2}}</view>
						</view>
						<view class="box-main4_item">
							<view>后天车吊钩高度(m):</view>
							<view>{{bridgeCraneNewestInfo.distance6}}</view>
						</view>
						<view class="box-main4_item">
							<view>后天车吊钩重量(t):</view>
							<view>{{bridgeCraneNewestInfo.neiweight2}}</view>
						</view>
					</view>
				</view>
			</template>
			<view class="box-main2" v-else-if="current == 1">
				<view class="content-box content-box1">
					<view class="box-main1_header">
						报警统计
					</view>
					<view class="box-main2-time">
						<view @click="alarmByCodeClick(item)"
							:class="{'time-active': item.id == countAlarmByCodeInfo.timeActive}"
							v-for="item in timeList" :key="item.id">
							{{item.title}}
						</view>
					</view>
					<template v-if="countAlarmByCodeList.length > 0">
						<view class="box-main2-box_charts">
							<qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2" />
						</view>
						<view class="box-main2-box_roll">
							<view class="box-main2-box" v-for="(item,index) in countAlarmByCodeList" :key="index">
								<view class="bg_color" :style="{'background-color': colorList[index]}"></view>
								<view>{{item.name}}</view>
							</view>
						</view>
					</template>
					<view class="new-nodata_height2" v-else>
						<view class="new-nodata">
							<view></view>
							<text>暂无数据...</text>
						</view>
					</view>
				</view>
				<view class="content-box content-box2">
					<view class="box-main1_header">
						今日桥机工作情况
					</view>
					<template v-if="bridgeCraneAlarmList.length > 0">
						<view class="content-box2_main" v-for="item in bridgeCraneAlarmList" :key="item.id">
							<view class="box2_main_top">
								<view>
									<view></view>
									<view>{{item.devName}}</view>
								</view>
								<view>
									{{item.alarmTime}}
								</view>
							</view>
							<view class="box2_main_bottom">
								<view></view>
								<view>告警信息:{{alarmTypeCodeListUp(item.alarmTypeCode)}}</view>
							</view>
						</view>
					</template>
					<view class="new-nodata_height2" v-else>
						<view class="new-nodata">
							<view></view>
							<text>暂无数据...</text>
						</view>
					</view>
				</view>
			</view>
			<view class="box-main3" v-else-if="current == 2">
				<view class="content-box content-box1" v-if="!bridgeInfo.bridgeId">
					<view class="box-main1_header">
						运载排行榜
					</view>
					<view class="box-main2-time">
						<view @click="workTimeByWorkerClick(item)"
							:class="{'time-active': item.id == countWorkTimeByWorkerInfo.timeActive}"
							v-for="item in timeList" :key="item.id">
							{{item.title}}
						</view>
					</view>
					<template v-if="countWorkTimeByWorkerList.length > 0">
						<view class="box-main3_item" :class="`box-main3_item${index}`"
							v-for="(item, index) in countWorkTimeByWorkerList" :key="index">
							<view>
								<view>{{item.workerName || '--'}}</view>
								<view>{{item.neiweight5}}</view>
							</view>
							<view>
								<view></view>
								<view>运载量NO.{{index + 1}}</view>
							</view>
							<view></view>
						</view>
					</template>
					<view class="new-nodata_height2" v-else>
						<view class="new-nodata">
							<view></view>
							<text>暂无数据...</text>
						</view>
					</view>
				</view>
				<view class="content-box content-box2">
					<view class="box-main1_header">
						近7天工作时长统计趋势图
					</view>
					<view class="box-main2-box_charts">
						<view class="box_charts-title">工作时长(H)</view>
						<qiun-data-charts tooltipFormat="defaultTooltip" type="area" :opts="opts1"
							:chartData="chartData1" />
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-popup :mask-close-able="false" v-model="videoShow" :closeable="false" mode="bottom">
			<view class="content-popup">
				<view class="content-popup_header"> 实时监控 </view>
				<scroll-view v-if="bridgeVideoList.length > 0" scroll-y="true" style="height: 800rpx;">
					<TreeView @node-click="onSupervisorClick" :multiple="false" checked-bg-color="rgba(81,129,246,0.1)"
						:data="bridgeVideoList" :children-key="'children'" :label-key="'videoName'" :id-key="'id'"
						:value="[videoId]" />
				</scroll-view>
				<view class="new-nodata_height" v-else>
					<view class="new-nodata">
						<view></view>
						<text>暂无数据...</text>
					</view>
				</view>
				<view class="confrim-btn">
					<view @click="onCancelClick(5)">取消</view>
					<view @click="onSubmitType(5)">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		isJSON
	} from "@/utils/tool.js"
	import MyPlayerM3u8 from '@/components/my-player-m3u8/my-player-m3u8.vue';
	import TreeView from "@/components/tree-view/TreeView.vue";
	export default {
		components: {
			MyPlayerM3u8,
			TreeView
		},
		data() {
			return {
				mobileTopHeight: 0,
				projectDetail: {},
				list: [{
					name: '实时数据'
				}, {
					name: '报警记录'
				}, {
					name: '工效分析'
				}],
				current: 0,
				bridgeTodayList: [{
					id: 1,
					title: "今日累计循环工作次数",
					countNum: 0,
					countPer: 0,
				}, {
					id: 2,
					title: "今日累计违章报警次数",
					countNum: 0,
					countPer: 0,
				}],
				bridgeInfo: {
					collapseFlag: false, // 控制筛选
					bridgeId: "",
					bridgeName: "",
					bridgeCraneDevId: "",
				},
				chartData2: {},
				opts2: {
					padding: [5, 5, 5, 5],
					dataLabel: false,
					enableScroll: false,
					tooltipShow: false,
					title: {
						name: "",
					},
					subtitle: {
						name: '',
					},
					legend: {
						show: false,
					},
					extra: {
						pie: {
							activeOpacity: 0,
							activeRadius: 0,
							offsetAngle: 0,
							labelWidth: 0,
							border: false,
							borderWidth: 0,
							borderColor: "#FFFFFF"
						}
					}
				},
				colorList: ['#C62828', '#F20081', '#AB47BC', '#9F8FBD', '#3949AB', '#2196F3 ', '#48C7D7', '#0097A7',
					'#8BC34A', '#C0CA33', '#FBC02D',
					'#FF9800', '#8D6E63', '#607D8B', '#c00000', '#ff0000', '#ffc000', '#ffff00', '#00b0f0', '#0070c0',
					'#92d050', '#00b050', '#002060', '#7030a0', '#262626',
					'#a6a6a6', '#660010', '#b21016'
				],
				timeActive: 1,
				timeList: [{
					id: 1,
					title: "今日"
				}, {
					id: 2,
					title: "近7天"
				}, {
					id: 3,
					title: "近30天"
				}],
				chartData1: {},
				opts1: {
					padding: [50, 15, 5, 15],
					enableScroll: false,
					dataLabel: false,
					color: ['#2B8CF3'],
					xAxis: {
						disableGrid: false,
						calibration: true,
						fontColor: "#B3B3B3",
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						disabled: false,
						gridColor: "#B3B3B3",
						data: [{
							calibration: true,
							fontColor: "#B3B3B3",
							// position: "left",
							// title: "工作时长(H)",
						}]
					},
					title: {
						name: "",
					},
					subtitle: {
						name: '',
					},
					legend: {
						show: false,
					},
					extra: {
						area: {
							type: "curve",
							opacity: 1,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					},
				},
				// 设备列表
				bridgeCraneDevList: [],
				// 司机运载列表
				countWorkTimeByWorkerList: [],
				countWorkTimeByWorkerInfo: {
					timeActive: 1,
					startDate: "",
					endDate: "",
				},
				// 报警统计
				countAlarmByCodeList: [],
				countAlarmByCodeInfo: {
					timeActive: 1,
					startDate: "",
					endDate: "",
				},
				// 今日桥机工种情况
				bridgeCraneAlarmList: [],
				// 工作循环数据信息
				bridgeCraneNewestInfo: {},
				// 获取设备监控
				bridgeVideoList: [],
				accessToken: "",
				url: "",
				videoInfo: {
					id: "",
					videoName: "",
				},
				// 监理人员
				videoShow: false,
				videoId: "",
				projectVideoConfig: {},
				videoFlag: true,
			}
		},
		onLoad(opts) {
			this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'));
			this.getBridgeCraneDevList();
		},
		mounted() {
			var that = this
			uni.getSystemInfo({
				success(res) {
					that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
					uni.setStorageSync('systemInfo', res)
					console.log(res)
				}
			})
		},
		onPageScroll(e) {
			// e.scrollTop 表示当前页面滚动的距离
			console.log('页面滚动距离：', e.scrollTop);
			var that = this
			// 创建查询请求
			const query = uni.createSelectorQuery().in(this);
			// 选择目标节点并获取其信息
			query.select('.bridge-video').boundingClientRect(data => {
				console.log(data.top); // 输出节点信息
				if((that.mobileTopHeight + 44) < data.top) {
					that.videoFlag = true;
				} else {
					that.videoFlag = false;
				}
			}).exec();
			// 在这里编写你的滚动相关逻辑
		},
		methods: {
			// 多选下拉 5 监控
			onClickType(type) {
				console.log(1111, this.videoInfo)
				if (type == 5) {
					this.videoId = this.videoInfo.id;
					this.videoShow = true;
				}
			},
			// 监理人员
			onSupervisorClick(id, checked, label) {
				this.videoId = id;
			},
			onSubmitType(type) {
				if (type == 5) {
					const find = this.bridgeVideoList.find(item => this.videoId == item.id);
					if (find) {
						this.videoInfo = find;
						this.getPlayUrl();
					}
					this.videoShow = false;
				}
			},
			onCancelClick(type) {
				if (type == 5) {
					this.videoId = this.videoInfo.id;
					this.videoShow = false;
				}
			},
			onBridgeCraneDevClick(row) {
				this.bridgeInfo.bridgeId = row.devId;
				this.bridgeInfo.bridgeCraneDevId = row.id;
				this.bridgeInfo.bridgeName = row.devName;
				this.currentChange(this.current);
				this.bridgeInfo.collapseFlag = false;
			},
			// 列表查询桥机设备信息
			getBridgeCraneDevList() {
				var that = this
				this.sendRequest({
					url: 'xmgl/bridgeCraneDev/list',
					data: {
						projectSn: this.projectDetail.projectSn,
					},
					method: "GET",
					success(res) {
						if (res.code == 200) {
							that.bridgeCraneDevList = [{
									id: "",
									devName: "全部"
								},
								...res.result,
							];
						}
					}
				})
			},
			currentChange(index) {
				this.current = index;
				if (this.current == 0) {
					if (!this.bridgeInfo.bridgeId) {
						this.getBridgeCraneAlarmCountAlarmToday();
					} else {
						this.getBridgeCraneDevQueryById();
						this.getNewestDataBridgeCraneData();
					}
				} else if (this.current == 1) {
					this.getBridgeCraneAlarmPage();
					this.alarmByCodeClick({
						id: this.countAlarmByCodeInfo.timeActive,
					});
				} else if (this.current == 2) {
					this.getBridgeCraneDataCountWorkTimeByDate();
					if (!this.bridgeInfo.bridgeId) {
						this.workTimeByWorkerClick({
							id: this.countWorkTimeByWorkerInfo.timeActive,
						});
					}
				}
			},
			// 通过id查询桥机设备信息
			getBridgeCraneDevQueryById() {
				var that = this
				this.sendRequest({
					url: 'xmgl/bridgeCraneDev/queryById',
					data: {
						projectSn: this.projectDetail.projectSn,
						id: this.bridgeInfo.bridgeCraneDevId,
					},
					method: "get",
					success(res) {
						if (res.code == 200) {
							that.bridgeVideoList = Array.isArray(res.result.videoList) ? res.result.videoList : [];
							that.projectVideoConfig = res.result.projectVideoConfig;
							if (that.bridgeVideoList.length > 0) {
								const resultInfo = that.bridgeVideoList[0];
								that.videoInfo = resultInfo;
								that.getPlayUrl();
							}
						}
					}
				})
			},
			getPlayUrl() {
				var that = this
				var json = {
					itemId: this.videoInfo.videoItemId
				}
				if (this.projectVideoConfig.videoType == 3) {
					json.streamType = this.videoInfo.defaultStreamType || 1;
					json.type = 'rtsp' //rtsp或者hls
				}
				this.sendRequest({
					url: "xmgl/videoItem/getVideoItemInfo",
					data: json,
					method: "post",
					success(res) {
						switch (that.projectVideoConfig.videoType) {
							case 1:
								// that.url=res.result.videoInfo.hdFlvAddress
								that.url = res.result.videoInfo
								that.accessToken = res.result.accessToken
								break;
							default:
								that.url = res.result.videoInfo.url
								break;
						}
					}
				})
			},
			// 查询最新的一条桥机工作循环数据信息
			getNewestDataBridgeCraneData() {
				var that = this
				this.sendRequest({
					url: 'xmgl/bridgeCraneData/getNewestData',
					data: {
						projectSn: this.projectDetail.projectSn,
						devId: this.bridgeInfo.bridgeId,
					},
					method: "post",
					success(res) {
						if (res.code == 200) {
							that.bridgeCraneNewestInfo = res.result;
						}
					}
				})
			},
			// 分页列表查询桥机报警数据信息
			getBridgeCraneAlarmPage() {
				var that = this
				this.sendRequest({
					url: 'xmgl/bridgeCraneAlarm/page',
					data: {
						projectSn: this.projectDetail.projectSn,
						alarmTime_begin: this.$dayjs().format("YYYY-MM-DD"),
						alarmTime_end: this.$dayjs().format("YYYY-MM-DD"),
						devId: this.bridgeInfo.bridgeId,
						pageNo: 1,
						pageSize: -1,
					},
					method: "get",
					success(res) {
						if (res.code == 200) {
							that.bridgeCraneAlarmList = res.result.records;
						}
					}
				})
			},
			alarmByCodeClick(row) {
				this.countAlarmByCodeInfo.timeActive = row.id;
				if (row.id == 1) {
					this.countAlarmByCodeInfo.startDate = this.$dayjs().format("YYYY-MM-DD");
					this.countAlarmByCodeInfo.endDate = this.$dayjs().format("YYYY-MM-DD");
				} else if (row.id == 2) {
					this.countAlarmByCodeInfo.startDate = this.$dayjs().subtract(6, "day").format("YYYY-MM-DD");
					this.countAlarmByCodeInfo.endDate = this.$dayjs().format("YYYY-MM-DD");
				} else if (row.id == 3) {
					this.countAlarmByCodeInfo.startDate = this.$dayjs().subtract(29, "day").format("YYYY-MM-DD");
					this.countAlarmByCodeInfo.endDate = this.$dayjs().format("YYYY-MM-DD");
				}
				this.getBridgeCraneAlarmCountAlarmByCode();
			},
			// 报警统计
			getBridgeCraneAlarmCountAlarmByCode() {
				var that = this
				this.sendRequest({
					url: 'xmgl/bridgeCraneAlarm/countAlarmByCode',
					data: {
						projectSn: this.projectDetail.projectSn,
						startDate: this.countAlarmByCodeInfo.startDate,
						endDate: this.countAlarmByCodeInfo.endDate,
						devId: this.bridgeInfo.bridgeId,
					},
					method: "post",
					success(res) {
						if (res.code == 200) {
							that.countAlarmByCodeList = res.result.map(item => {
								return {
									...item,
									name: item.monitorParamCodeName || item.monitorParamCode,
									value: item.num,
								}
							});
							that.opts2.color = that.colorList;
							that.chartData2 = {
								series: [{
									data: that.countAlarmByCodeList,
								}]
							};
						}
					}
				})
			},
			workTimeByWorkerClick(row) {
				this.countWorkTimeByWorkerInfo.timeActive = row.id;
				if (row.id == 1) {
					this.countWorkTimeByWorkerInfo.startDate = this.$dayjs().format("YYYY-MM-DD");
					this.countWorkTimeByWorkerInfo.endDate = this.$dayjs().format("YYYY-MM-DD");
				} else if (row.id == 2) {
					this.countWorkTimeByWorkerInfo.startDate = this.$dayjs().subtract(6, "day").format("YYYY-MM-DD");
					this.countWorkTimeByWorkerInfo.endDate = this.$dayjs().format("YYYY-MM-DD");
				} else if (row.id == 3) {
					this.countWorkTimeByWorkerInfo.startDate = this.$dayjs().subtract(29, "day").format("YYYY-MM-DD");
					this.countWorkTimeByWorkerInfo.endDate = this.$dayjs().format("YYYY-MM-DD");
				}
				this.getBridgeCraneDataCountWorkTimeByWorker();
			},
			// 司机工效分析（司机运载排行榜）
			getBridgeCraneDataCountWorkTimeByWorker() {
				var that = this
				this.sendRequest({
					url: 'xmgl/bridgeCraneData/countWorkTimeByWorker',
					data: {
						projectSn: this.projectDetail.projectSn,
						startDate: this.countWorkTimeByWorkerInfo.startDate,
						endDate: this.countWorkTimeByWorkerInfo.endDate,
						devId: this.bridgeInfo.bridgeId,
					},
					method: "post",
					success(res) {
						if (res.code == 200) {
							that.countWorkTimeByWorkerList = res.result;
						}
					}
				})
			},
			// 近一段时间工作时长统计趋势图(每日)
			getBridgeCraneDataCountWorkTimeByDate() {
				var that = this
				this.sendRequest({
					url: 'xmgl/bridgeCraneData/countWorkTimeByDate',
					data: {
						projectSn: this.projectDetail.projectSn,
						startDate: this.$dayjs().subtract(6, "day").format("YYYY-MM-DD"),
						endDate: this.$dayjs().format("YYYY-MM-DD"),
						devId: this.bridgeInfo.bridgeId,
					},
					method: "post",
					success(res) {
						if (res.code == 200) {
							that.chartData1 = {
								categories: res.result.map(item => that.$dayjs(item.date).format("MM-DD")),
								series: [{
									data: res.result.map(item => item.workTime || 0),
								}]
							};
						}
					}
				})
			},
			// 今日累计违章报警次数
			getBridgeCraneAlarmCountAlarmToday() {
				var that = this
				this.sendRequest({
					url: 'xmgl/bridgeCraneData/countByToday',
					data: {
						projectSn: this.projectDetail.projectSn,
					},
					method: "post",
					success(res) {
						if (res.code == 200) {
							that.bridgeTodayList[0].countNum = res.result.liftNumToday || 0;
							that.bridgeTodayList[0].countPer = res.result.liftNumTodayThanYesterdayPct || 0;
							that.bridgeTodayList[1].countNum = res.result.alarmNumToday || 0;
							that.bridgeTodayList[1].countPer = res.result.alarmNumTodayThanYesterdayPct || 0;
						}
					}
				})
			},
			showToast(title, type) {
				this.$refs.uToast.show({
					title: title,
					type: type,
				})
			},
		},
		computed: {
			playUrlFilter() {
				// 
				// let url = "";
				// if(this.videoConfig && this.videoConfig.videoType == 1) {
				// 	url = this.url
				// } else if (this.url) {
				// 	url =  'rtsp://42.180.188.17' + this.url.substring(20);
				// }
				console.log(88888, this.url);
				return this.url
			},
			isYsy() {
				console.info(this.projectVideoConfig?.videoType, '======')
				return this.projectVideoConfig?.videoType == 1
			},
			ysyPlayUrl() {
				// 萤石云播放地址
				return `https://open.ys7.com/ezopen/h5/iframe?url=${this.playUrlFilter}&template=simple&autoplay=1&accessToken=${this.accessToken}`
			},
			alarmTypeCodeListUp() {
				return (val) => {
					const alarmTypeCodeList = [{
							id: 1,
							title: "制动打开",
						},
						{
							id: 2,
							title: "限位到",
						},
						{
							id: 3,
							title: "超载报警",
						},
						{
							id: 4,
							title: "超速报警",
						},
						{
							id: 5,
							title: "偏斜报警",
						},
						{
							id: 6,
							title: "上升",
						},
						{
							id: 7,
							title: "下降",
						},
						{
							id: 8,
							title: "前移",
						},
						{
							id: 9,
							title: "后移",
						},
						{
							id: 10,
							title: "左移",
						},
						{
							id: 11,
							title: "右移",
						},
						{
							id: 12,
							title: "断开",
						},
					];
					const find = alarmTypeCodeList.find((item) => item.id == val);
					return find ? find.title : "--";
				};
			}
		},
	}
</script>

<style scoped lang="scss">
	.new-nodata_height {
		min-height: 800rpx;
		position: relative;
	}

	.new-nodata_height2 {
		min-height: 500rpx;
		position: relative;
	}

	.content-popup {
		.content-popup_main {
			padding: 26rpx 0;

			>view {
				width: 100%;
				height: 80rpx;
				background-color: #ffffff;
				font-weight: 500;
				font-size: 30rpx;
				color: #1a1a1a;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			>view:not(:first-child) {
				margin-top: 20rpx;
			}

			.popup_main_active {
				background-color: rgba(81, 129, 246, 0.1);
				color: #5181f6;
			}
		}

		uni-scroll-view {
			margin: 26rpx 0;
		}

		.content-popup_header {
			height: 86rpx;
			box-shadow: 0rpx 8rpx 10rpx -8rpx rgba(81, 129, 246, 0.42);
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 800;
			font-size: 30rpx;
			color: #1a1a1a;
		}

		.confrim-btn {
			padding: 18rpx 26rpx;
			background-color: #ffffff;
			box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
			display: flex;

			>view {
				width: 50%;
				height: 76rpx;
				font-weight: 500;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			>view:first-child {
				background-color: rgba(81, 129, 246, 0.1);
				border-radius: 6rpx 0rpx 0rpx 6rpx;
				color: #5181f6;
			}

			>view:last-child {
				background-color: #5181f6;
				border-radius: 0rpx 6rpx 6rpx 0rpx;
				color: #ffffff;
			}
		}
	}

	.content {
		padding: 26rpx;
		// height: calc(100vh - 88rpx - 88rpx - 118rpx - 26rpx);
		// height: calc(82vh);
		overflow: auto;

		.box-main4 {

			.content-box2 {
				margin-top: 26rpx;

				.box-main4_item {
					margin-top: 26rpx;
					display: flex;
					justify-content: space-between;
					font-weight: 500;
					font-size: 28rpx;

					>view:first-child {
						// width: 40%;
						width: 51%;
						color: #808080;
					}

					>view:last-child {
						width: 60%;
						color: #4D4D4D;
						text-align: right;
					}
				}
			}

			.content-box1 {
				overflow: auto;
				position: relative;

				/* 确保视频能够随页面滚动 */
				.bridge-video {
					margin-top: 26rpx;

					/deep/ .m3u8-player,
					.player-m3u8 {
						width: 100%;
						height: 304rpx;

					}

					.videoBox {
						width: 100%;
						height: 304rpx;
					}

					.videoBox1 {
						width: 100%;
						height: 304rpx;
						background-color: #000000;
					}
				}

				.box-main1_header {
					display: flex;
					justify-content: space-between;

					>view {
						display: flex;
						align-items: center;
						font-weight: 500;
						font-size: 26rpx;
						color: #808080;

						>view:last-child {
							width: 32rpx;
							height: 32rpx;
							background-image: url('@/static/bridgeCraneMonitor/index-icon2.png');
							background-repeat: no-repeat;
							background-size: 100% 100%;
							margin-left: 10rpx;
						}
					}
				}
			}

			.content-box {
				width: 100%;
				padding: 26rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
			}
		}

		.box-main3 {
			.content-box2 {
				margin-top: 26rpx;

				.box-main2-box_charts {
					margin-top: 26rpx;
					height: 368rpx;
					background: linear-gradient(180deg, #E9F1FC 0%, #FFFFFF 100%);
					position: relative;

					.box_charts-title {
						font-weight: 500;
						font-size: 22rpx;
						color: #B3B3B3;
						position: absolute;
						top: 26rpx;
						left: 20rpx;
					}
				}
			}

			.content-box1 {
				.box-main3_item2 {
					background: linear-gradient(90deg, #F8D8DA 0%, #FFFFFF 100%);

					>view:nth-child(3) {
						width: 35%;
						background: linear-gradient(90deg, #F5D5B1 0%, #C0631C 100%);
					}

					>view:nth-child(2) {
						color: #D9BB99;

						>view:first-child {
							background-image: url('@/static/bridgeCraneMonitor/index-icon9.png');
						}
					}
				}

				.box-main3_item1 {
					background: linear-gradient(90deg, #D4E3F7 0%, #FFFFFF 100%);

					>view:nth-child(3) {
						width: 65%;
						background: linear-gradient(90deg, #F9F7F8 0%, #949A9E 100%);
					}

					>view:nth-child(2) {
						color: #C2C2C2;

						>view:first-child {
							background-image: url('@/static/bridgeCraneMonitor/index-icon8.png');
						}
					}
				}

				.box-main3_item0 {
					background: linear-gradient(90deg, #FAEDD8 0%, #FFFFFF 100%);

					>view:nth-child(3) {
						width: 100%;
						background: linear-gradient(90deg, #FFD700 0%, #F4AF4D 100%);
					}

					>view:nth-child(2) {
						color: #FFD700;

						>view:first-child {
							background-image: url('@/static/bridgeCraneMonitor/index-icon7.png');
						}
					}
				}

				.box-main3_item {
					width: 100%;
					padding: 20rpx 26rpx;

					border-radius: 16rpx;
					margin-top: 26rpx;

					>view:nth-child(3) {

						height: 10rpx;
						border-radius: 94rpx;
						margin-top: 6rpx;
					}

					>view:nth-child(2) {
						display: flex;
						align-items: center;
						margin-top: 14rpx;
						font-weight: 800;
						font-size: 26rpx;

						>view:first-child {
							width: 36rpx;
							height: 22rpx;
							background-repeat: no-repeat;
							background-size: 100% 100%;
							margin-right: 20rpx;
						}
					}

					>view:nth-child(1) {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-weight: 500;
						font-size: 30rpx;
						color: #1A1A1A;

						>view:last-child {
							font-weight: 800;
							font-size: 26rpx;
							color: #FFD700;
						}
					}
				}

				.box-main2-time {
					display: flex;
					margin-top: 26rpx;

					>view {
						width: 144rpx;
						height: 60rpx;
						background-color: #EFF3F7;
						border-radius: 50rpx;
						font-weight: 500;
						font-size: 26rpx;
						color: #1A1A1A;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 26rpx;
					}

					.time-active {
						background-image: url('@/static/bridgeCraneMonitor/index-bg2.png');
						background-repeat: no-repeat;
						background-size: 100% 100%;
					}
				}
			}

			.content-box {
				width: 100%;
				padding: 26rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
			}
		}

		.box-main2 {
			.content-box2 {
				margin-top: 26rpx;

				.content-box2_main {
					padding: 26rpx;
					background: #EFF3F7;
					border-radius: 8rpx;
					margin-top: 26rpx;

					.box2_main_bottom {
						margin-top: 26rpx;
						padding: 26rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						display: flex;
						align-items: center;
						font-size: 30rpx;
						color: #000000;

						>view:first-child {
							width: 40rpx;
							height: 40rpx;
							background-image: url('@/static/bridgeCraneMonitor/index-icon6.png');
							background-repeat: no-repeat;
							background-size: 100% 100%;
							margin-right: 30rpx;
						}
					}

					.box2_main_top {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-weight: 500;

						>view:last-child {
							font-size: 26rpx;
							color: #B3B3B3;
						}

						>view:first-child {
							display: flex;
							align-items: center;

							>view:first-child {
								width: 76rpx;
								height: 76rpx;
								background-image: url('@/static/bridgeCraneMonitor/index-icon5.png');
								background-repeat: no-repeat;
								background-size: 100% 100%;
							}

							>view:last-child {
								font-size: 30rpx;
								color: #498CEC;
								margin-left: 36rpx;
							}
						}
					}
				}
			}

			.content-box1 {
				.box-main2-time {
					display: flex;
					margin-top: 26rpx;

					>view {
						width: 144rpx;
						height: 60rpx;
						background-color: #EFF3F7;
						border-radius: 50rpx;
						font-weight: 500;
						font-size: 26rpx;
						color: #1A1A1A;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 26rpx;
					}

					.time-active {
						background-image: url('@/static/bridgeCraneMonitor/index-bg2.png');
						background-repeat: no-repeat;
						background-size: 100% 100%;
					}
				}

				.box-main2-box_charts {
					height: 348rpx;
				}

				.box-main2-box_roll {
					overflow-y: scroll;
					margin-top: 26rpx;
					max-height: 408rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.box-main2-box {
						width: 50%;
						font-size: 28rpx;
						color: #1A1A1A;
						display: flex;
						align-items: center;

						.bg_color {
							width: 32rpx;
							height: 20rpx;
							border-radius: 8rpx;
							margin-right: 20rpx;
						}
					}

					>view:nth-child(n + 3) {
						margin-top: 26rpx;
					}
				}

			}

			.content-box {
				width: 100%;
				padding: 26rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
			}
		}

		.box-main1 {
			width: 100%;
			height: 100%;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 26rpx;

			.main1-item {
				margin-top: 26rpx;
				width: 100%;
				// height: 244rpx;
				border-radius: 8rpx;
				background-image: url('@/static/bridgeCraneMonitor/index-bg1.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;


				.main1-item-bottom {
					padding: 24rpx 26rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					>view:last-child {
						display: flex;
						align-items: center;

						>view:first-child {
							font-weight: 500;
							font-size: 26rpx;
							color: #1A1A1A;
						}

						.bottom-image_up {
							background-image: url('@/static/bridgeCraneMonitor/index-up.png');
						}

						.bottom-image_down {
							background-image: url('@/static/bridgeCraneMonitor/index-down.png');
						}

						>view:last-child {
							width: 30rpx;
							height: 30rpx;

							background-repeat: no-repeat;
							background-size: 100% 100%;
							margin-left: 26rpx;
						}
					}

					>view:first-child {
						display: flex;
						align-items: center;

						>view:last-child {
							font-weight: 500;
							font-size: 30rpx;
							color: #4D4D4D;
							margin-left: 10rpx;
						}

						>view:first-child {
							width: 40rpx;
							height: 40rpx;
							background-image: url('@/static/bridgeCraneMonitor/index-icon3.png');
							background-repeat: no-repeat;
							background-size: 100% 100%;
						}
					}
				}

				.main1-item-top {
					padding: 34rpx 22rpx;
					display: flex;
					align-items: center;

					.item-image0 {
						background-image: url('@/static/bridgeCraneMonitor/index-icon10.png');
					}

					.item-image1 {
						background-image: url('@/static/bridgeCraneMonitor/index-icon4.png');
					}

					>view:first-child {
						width: 76rpx;
						height: 76rpx;

						background-repeat: no-repeat;
						background-size: 100% 100%;
					}

					.item-top_right {
						margin-left: 36rpx;
						flex: 1;

						.schedule {
							width: 100%;
							height: 20rpx;
							background: #EFF3F7;
							border-radius: 94rpx;
							margin-top: 34rpx;
							display: flex;
							align-items: center;

							>view {
								width: 50%;
								height: 8rpx;
								background: #498CEC;
								border-radius: 94rpx;
								position: relative;
							}

							>view::after {
								content: "";
								width: 20rpx;
								height: 20rpx;
								background: rgba(255, 136, 0, 0.3);
								border-radius: 50%;
								position: absolute;
								right: -10rpx;
								top: 50%;
								transform: translateY(-50%);
							}

							>view::before {
								content: "";
								width: 12rpx;
								height: 12rpx;
								background: #FF8800;
								border-radius: 50%;
								position: absolute;
								right: -6rpx;
								top: 50%;
								transform: translateY(-50%);
							}
						}

						>view:first-child {
							display: flex;
							align-items: center;
							justify-content: space-between;

							>view:first-child {
								font-weight: 500;
								font-size: 30rpx;
								color: #498CEC;
							}

							>view:last-child {
								font-weight: bold;
								font-size: 32rpx;
								color: #1A1A1A;
							}
						}
					}
				}
			}
		}

		.box-main1_header {
			font-weight: 500;
			font-size: 30rpx;
			color: #1A1A1A;
		}
	}

	/deep/ .u-collapse-item {
		position: relative;
	}

	/deep/ .u-collapse-body {
		width: calc(100% - 52rpx);
		height: initial !important;
		position: absolute;
		top: 134rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 11;
	}

	.collapse-content {
		width: 100%;
		padding: 16rpx 26rpx;
		max-height: 472rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 4rpx solid #DDEEFD;
		overflow-y: auto;

		>view:not(:last-child) {
			border-bottom: 2rpx solid #DDEEFD;
		}

		>view {
			margin-top: 16rpx;
			padding: 10rpx 40rpx 26rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #1A1A1A;
		}

		.view-active {
			background: #DDEEFD;
		}
	}

	/deep/ .u-collapse-head {
		padding: 0;
		background: #FFFFFF;
	}

	.collapse-header {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;
		border: 2rpx solid #DDEEFD;
		padding: 36rpx 26rpx;

		>view {
			display: flex;
			align-items: center;
			font-weight: 500;
			font-size: 30rpx;

			>view:last-child {
				margin-left: 26rpx;
			}
		}

		>view:first-child {
			color: #1A1A1A;

			>view:first-child {
				width: 40rpx;
				height: 40rpx;
				background-image: url('@/static/bridgeCraneMonitor/index-icon1.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
		}

		>view:last-child {
			color: #4D4D4D;

			.arrow-bottom {
				width: 40rpx;
				height: 40rpx;
				background-image: url('@/static/bridgeCraneMonitor/index-icon2.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
		}
	}

	.addIssue {
		min-height: 100vh;
		background-color: #F2F3F7;
		// max-height: 100vh;
		// overflow: hidden;
	}



	.fixedheader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;

		/deep/ .headerBox {
			border-bottom: none;
		}

		.headerName {
			z-index: 1;
		}
	}

	.new-nodata {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		>view {
			width: 300rpx;
			height: 300rpx;
			background-image: url('@/static/staffAttendance/nodata.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		>text {
			font-size: 22rpx;
			color: #808080;
			margin-top: 60rpx;
		}
	}
</style>