jianKongXiTong/pages/index/index.vue

<template>
	<!-- 全局大容器 -->
	<view class="body2">
		<view class="box">
			<!-- 左侧监控容器 -->
			<view class="left_box">
				<view class="topTab">
					<view class="" style="display: flex">
						<image style="width: 100rpx; height: 100rpx" src="../../static/img/wlt.png" mode="widthFix"></image>
						<h3 class="bh_title">湖里区不可移动文物数字化监管平台</h3>
					</view>
					<el-button
						icon="el-icon-view"
						class="btn"
						@click="
							maintabindex = 0;
							refreshBtn();
						"
						:class="{ activeBtn: maintabindex == 0 }"
					>
						预览
					</el-button>

					<el-button
						icon="el-icon-document"
						class="btn"
						@click="
							maintabindex = 2;
							postEventList();
						"
						:class="{ activeBtn: maintabindex == 2 }"
					>
						事件
					</el-button>
					<el-button
						class="btn"
						icon="el-icon-setting"
						@click="
							maintabindex = 3;
							getPollingConfig();
						"
						:class="{ activeBtn: maintabindex == 3 }"
					>
						轮巡配置
					</el-button>
					<el-button
						icon="el-icon-loading"
						style="width: 230rpx; font-size: 30rpx"
						v-if="maintabindex == 0"
						@click="
							maintabindex = 0;
							refreshBtn();
						"
						type="success"
					>
						刷新
					</el-button>
				</view>
				<!-- 监控视频容器 -->
				<view id="player" v-show="maintabindex == 0"></view>

				<!-- 事件 -->
				<view v-if="maintabindex == 2">
					<view class="box2">
						<view>
							<el-row justify="space-between" :gutter="20">
								<el-col :span="6">
									<el-input v-model.trim="queryVal" customStyle="width:360rpx;" placeholder="输入信息查询" border="surround"></el-input>
								</el-col>
								<el-col :span="6">
									<el-date-picker v-model="dateVal" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions"></el-date-picker>
								</el-col>
								<el-col :span="5">
									<el-select v-model="stateVal" clearable placeholder="按状态查询">
										<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.label"></el-option>
									</el-select>
								</el-col>

								<el-col :span="3">
									<u-button @click="searchBtn" type="primary" text="搜索" customStyle="width:130rpx;"></u-button>
								</el-col>
								<el-col :span="4">
									<u-button v-print="'#printDiv'" type="primary" text="打印" customStyle="width:130rpx;"></u-button>
								</el-col>
							</el-row>
						</view>

						<view class="shijian_box" id="printDiv">
							<view class="shijian_item" v-for="(item, index) in tableData">
								<img :src="item.image" style="width: 300rpx; height: 250rpx" />

								<view class="">{{ item.name }}</view>
								<view class="">报警原因:{{ item.reason }}</view>
								<view class="">报警类型:{{ item.event_type_text }}</view>
								<view class="">事件等级:{{ item.event_level_text }}</view>
								<!-- <el-button @click="falseAlarmBtn(item)" type="text">误报</el-button> -->
							</view>
							<el-empty style="margin: auto" v-if="tableData.length <= 0" description="暂无事件"></el-empty>
						</view>
						<el-pagination
							style="text-align: right; margin-top: 30rpx"
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="currentPage"
							background
							:page-sizes="[8, 12, 16]"
							:page-size="pageSize"
							layout="total, sizes,  prev, pager, next, jumper"
							:total="total"
						></el-pagination>
					</view>
				</view>
				<!-- 事件end -->
				<!-- 轮巡设置 -->
				<view v-if="maintabindex == 3">
					<view class="lunxun_box">
						<view>
							<el-row justify="space-between" :gutter="20">
								<el-col :span="8" style="display: flex">
									<view style="width: 280rpx; line-height: 80rpx">轮巡时间/分钟</view>
									<el-input v-model.trim="interval" customStyle="width:360rpx;" :placeholder="interval" border="surround"></el-input>
								</el-col>
								<el-col :span="8" style="display: flex">
									<view style="width: 160rpx; line-height: 80rpx">轮巡个数</view>

									<el-select v-model="number" placeholder="请选择">
										<el-option v-for="item in numberList" :key="item.value" :label="item.label" :value="item.label"></el-option>
									</el-select>
								</el-col>
								<el-col :span="3">
									<u-button @click="modifyBtn" type="primary" text="修改" customStyle="width:130rpx;"></u-button>
								</el-col>
							</el-row>
						</view>
						<!-- 图文列表 -->
						<view class="lunxun_tw" v-if="turningList.length > 0">
							<view class="" v-for="(item, index) in turningList">
								<view class="tw_item">
									<img style="width: 400rpx; height: 200rpx" :src="item.image" alt="" />
									<view>{{ item.name }}</view>
									<view>{{ item.position }}</view>
									<el-button @click="lunxunBtn(item, index)" type="text">删除轮巡</el-button>
								</view>
							</view>
						</view>

						<el-empty v-else description="暂无配置"></el-empty>
					</view>
				</view>
				<!-- 轮巡设置end -->
			</view>
			<!-- 左侧监控容器end -->
			<!-- 右侧文物列表容器 -->
			<view v-if="maintabindex == 0 || maintabindex == 1">
				<view class="right_box">
					<view class="right_box_top">
						<h3 class="right_box_title">文物列表</h3>
						<u-button @click="qhGetZhoujieDevice" type="primary" size="mini" customStyle="width:160rpx; height: 53rpx;">
							<i style="line-height: 10rpx; margin-right: 5rpx" :class="qhBtn ? 'el-icon-guide ' : 'el-icon-office-building'"></i>
							{{ qhBtn ? '显示文物 ' : '显示城区' }}
						</u-button>
						<view style="display: flex">
							<el-input
								v-model="culturalValue"
								clearable
								style="width: 360rpx"
								size="mini"
								placeholder="输入文物关键字进行筛选"
								suffix-icon="el-icon-search"
							></el-input>

							<!-- <u-button @click="SearchCultural" icon="search" type=	"primary" text="搜索" size="mini" customStyle="width:80rpx; height: 55rpx;"></u-button> -->
						</view>
					</view>

					<view class="right_box_item">
						<el-tree ref="tree" :filter-node-method="filterNode" :data="treeData" :props="defaultProps" @node-click="handleNodeClick">
							<span class="custom-tree-node" slot-scope="{ node, data }">
								<span v-if="data.zhoujie_device_type != '1'">{{ node.label }}</span>
								<span
									v-if="data.zhoujie_device_type == '1'"
									:style="monitors.length > 0 && monitors[selectIndex].device_code == data.device_code ? 'color:#3c9cff' : 'color:black'"
								>
									{{ node.label }}
								</span>

								<span v-if="data.area != undefined">
									<el-button @click.stop="timeBtn(data)" type="text" size="mini">文物开放时间</el-button>
								</span>

								<span v-if="data.zhoujie_device_type == '1'">
									<el-button type="text" size="mini" @click.stop="() => append(data)">{{ data.isPolling ? ' 删除轮巡' : '加入轮巡' }}</el-button>
								</span>
							</span>
						</el-tree>
					</view>
				</view>
			</view>

			<!-- 监控弹层 -->
			<view class="jk_show" v-show="showMonitor">
				<u-icon @click="showMonitor = false" name="close" size="40rpx" style="position: absolute; top: 5px; right: 5px"></u-icon>
				<view class="jk_title">
					<text>【{{ treeNode.name }}】</text>
					<text>【{{ jkName }}】</text>
					<el-badge :value="deviceList.power_supply">
						<el-button
							@click="
								showHandle = true;
								eventDclBtn();
							"
							size="small"
						>
							待处理事件
						</el-button>
					</el-badge>
				</view>
				<!-- 监控视频展示容器 -->
				<view style="width: 50%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center">
					<view style="width: 90%; height: 90%; border-radius: 40rpx; margin-top: 200rpx; margin-bottom: 200rpx">
						<iframe
							border="0"
							:src="webViedoUrl"
							width="100%"
							height="100%"
							frameborder="no"
							marginwidth="0"
							marginheight="0"
							scrolling="no"
							allowtransparency="yes"
						></iframe>
					</view>
				</view>
				<!-- 关联监控 -->
				<view class="show_box_bottom">
					<view class="">
						<h3 style="margin-bottom: 20rpx">关联监控</h3>
						<view @click="openVideo(item)" v-for="(item, index) in associatedDevices" class="gljk_item" :style="associationTab == item.name ? 'color:#3c9cff' : ''">
							{{ item.name }}
						</view>
						<el-empty style="height: 100rpx; margin-top: 80rpx" v-if="associatedDevices <= 0" description="暂无关联监控"></el-empty>
					</view>
				</view>

				<!-- 监控信息 -->

				<view class="" style="width: 50%; height: 100%">
					<view class="" style="width: 94%; height: 100rpx; margin: 40rpx auto">
						<h4>五防信息:</h4>
						<text>联系人:{{ deviceList.five_prevention_name }}</text>
						<text style="margin-left: 20rpx">电话:{{ deviceList.five_prevention_mobile }}</text>
					</view>
					<view class="box_left_top2">
						<view class="jianju">
							文物负责人:
							<view class="jianju_item">{{ deviceList.director }}</view>
						</view>
						<view class="jianju">
							文物地址:
							<view class="jianju_item">{{ deviceList.address }}</view>
						</view>
						<view class="jianju">
							设备状态:
							<view class="jianju_item">{{ deviceList.status }}</view>
						</view>
						<view class="jianju">
							在线状态:
							<view class="jianju_item">{{ deviceList.on_line }}</view>
						</view>

						<view class="jianju">
							设备编号:
							<view class="jianju_item">{{ deviceList.device_code }}</view>
						</view>
					</view>
					<!-- 地图 -->
					<!-- 监控地图-->
					<view style="width: 850rpx; height: 480rpx; margin: 20rpx">
						<view id="allmap" class="map" style="width: 100%; height: 100%"></view>
					</view>
				</view>
			</view>

			<!-- 监控弹层end -->
			<!-- 监控待处理事件弹层 -->
			<view v-if="showHandle" class="jk_dcl_tc">
				<u-icon @click="showHandle = false" name="close" size="40rpx" style="position: absolute; top: 5px; right: 5px"></u-icon>
				<view class="jk_tc_box">
					<view class="jk_tc_box2">
						<view v-for="item in eventDclList" class="jk_tc_item">
							<img style="width: 400rpx; height: 200rpx" :src="item.image" />
							<view class="">文物名称:{{ item.name }}</view>
							<view class="">事件类型:{{ item.event_type_text }}</view>
							<view class="">报警原因:{{ item.reason }}</view>
							<view class="">事件类型:{{ item.event_level_text }}</view>
							<el-button type="text" @click="viewEventBtn(item)">查看事件</el-button>
						</view>
					</view>
					<el-empty v-if="eventDclList.length <= 0" description="暂无事件"></el-empty>
				</view>
			</view>

			<!-- 监控待处理事件弹层end -->
			<!-- 查看事件弹层 -->
			<view class="tanceng" v-show="showViewEvent">
				<view style="width: 1600rpx; height: 1280rpx">
					<view class="show_box">
						<!-- 右侧容器 -->
						<view class="show_box_left">
							<view class="" style="margin-left: 120rpx; margin-top: 50rpx">
								<view class="" style="width: 560rpx; height: 1000rpx; padding: 20rpx; border: 1px solid #dbdbdb">
									<view class="sjlx">
										事件等级:
										<view class="jianju_item3">{{ itemList.event_level_text }}</view>
									</view>
									<view class="sjlx">
										事件类型:
										<view class="jianju_item3">{{ itemList.event_type_text }}</view>
									</view>
									<view class="sjlx">
										事件状态:
										<view class="jianju_item3">{{ itemList.status_text }}</view>
									</view>
									<view style="margin: 0 auto; margin-top: 130rpx; width: 600rpx; height: 420rpx">
										<h3 style="margin-bottom: 20rpx">事件处理报告</h3>

										<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model.trim="valueTxt" resize="none"></el-input>
										<view class="" style="display: flex; margin-top: 50rpx">
											<u-button @click="submitReport" type="primary" text="提交" customStyle="width:130rpx;"></u-button>
											<u-button text="误报" customStyle="width:130rpx;"></u-button>
										</view>
									</view>
								</view>
							</view>
						</view>

						<!-- 左侧容器 -->
						<view class="show_box_right">
							<u-icon @click="showViewEvent = false" name="close" size="40rpx" style="position: absolute; top: 5px; right: 5px"></u-icon>
							<!-- 处置体系 -->
							<view class="show_box_top">
								<h3 style="margin-bottom: 20rpx">处置体系</h3>
								<view class="">
									<view class="jianju">
										联系人:
										<view class="jianju_item3">{{ deviceList.five_prevention_name }}</view>
									</view>
									<view class="jianju">
										联系电话:
										<view class="jianju_item3">{{ deviceList.five_prevention_mobile }}</view>
									</view>
								</view>
							</view>
							<!-- 事件弹层地图 -->
							<view class="global" style="width: 650rpx; height: 460rpx; margin-top: 40rpx">
								<view id="allmap2" class="map" style="width: 100%; height: 100%"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 查看事件弹层end -->

			<!-- 倾角弹层 -->
			<u-popup :show="showDipAngle" mode="center" @close="close">
				<view class="qj_box" style="">
					<u-icon @click="showDipAngle = false" name="close" size="40rpx" style="position: absolute; top: 5px; right: 5px"></u-icon>
					<view style="display: flex; align-items: baseline">
						<h3 style="margin-bottom: 20rpx">【{{ treeNode.name }}】</h3>
						<el-badge :value="dipangleList.power_supply">
							<el-button size="mini">待处理事件</el-button>
						</el-badge>
					</view>
					<view class="" style="width: 1100rpx; height: 700rpx; border: 1px solid #dbdbdb">
						<view class="qj_jianju">
							<view class="jianju2">
								文物负责人:
								<view class="jianju_item2">{{ dipangleList.director }}</view>
							</view>
							<view class="jianju2">
								文物地址:
								<view class="jianju_item2">{{ dipangleList.address }}</view>
							</view>
							<view class="jianju2">
								在线状态:
								<view class="jianju_item2">{{ dipangleList.on_line }}</view>
							</view>
							<view class="jianju2">
								设备编号:
								<view class="jianju_item2">{{ dipangleList.device_code }}</view>
							</view>
							<view class="jianju2">
								设备状态:
								<view class="jianju_item2">{{ dipangleList.status }}</view>
							</view>
							<view class="jianju2">
								五防处理人员:
								<view class="jianju_item2">{{ dipangleList.five_prevention_name }}</view>
							</view>
							<view class="jianju2">
								五防处理电话:
								<view class="jianju_item2">{{ dipangleList.five_prevention_mobile }}</view>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
			<!-- 倾角弹层end -->

			<!-- 右侧文物列表容器 -->
		</view>
		<!-- 配置时间弹层 -->
		<view v-if="showTime" class="pzsj_tc">
			<u-icon @click="showTime = false" name="close" size="40rpx" style="position: absolute; top: 5px; right: 5px"></u-icon>
			<el-row justify="space-between" :gutter="20" style="position: sticky; bottom: 0; left: 100rpx">
				<el-col :span="10" style="display: flex">
					<view style="width: 280rpx; line-height: 80rpx">开放时间</view>
					<el-input v-model="startTime" customStyle="width:360rpx;" :placeholder="interval" border="surround"></el-input>
				</el-col>
				<el-col :span="10" style="display: flex">
					<view style="width: 280rpx; line-height: 80rpx">结束时间</view>
					<el-input v-model="endTime" customStyle="width:360rpx;" :placeholder="interval" border="surround"></el-input>
				</el-col>
				<el-col :span="3">
					<u-button @click="modifyTime" type="primary" text="修改" customStyle="width:130rpx;"></u-button>
				</el-col>
			</el-row>
			<view style="width: 80%">
				<view v-for="item in opennessTimeList" :key="item.index" class="" style="display: flex; width: 100%; margin-top: 10rpx">
					<view class="" style="width: 500rpx">用户昵称:{{ item.nickname }}</view>
					<view class="" style="width: 550rpx">手机号:{{ item.mobile }}</view>
					<view class="" style="width: 500rpx">开始时间:{{ item.start_time }}</view>
					<view class="" style="width: 500rpx">结束时间:{{ item.end_time }}</view>
				</view>
			</view>
		</view>
		<!-- 配置时间弹层end -->
		<!-- 事件警告弹层 -->
		<view class="sjjg_tc" v-if="showWarn">
			<u-icon
				@click="
					showWarn = false;
					isAutio = false;
				"
				name="close"
				size="40rpx"
				style="position: absolute; top: 5px; right: 5px"
			></u-icon>
			<h3 class="">【{{ latestEvents.cr_name }}】</h3>
			<view class="sj_top_box">
				<view class="sj_box">
					<view class="" style="width: 180rpx">文物负责人:</view>
					<view class="sj_item">{{ latestEvents.director }}</view>
				</view>
				<view class="sj_box">
					<view class="" style="width: 180rpx">文物地址:</view>
					<view class="sj_item">{{ latestEvents.address }}</view>
				</view>
				<view class="sj_box">
					<view class="" style="width: 180rpx">设备状态:</view>
					<view class="sj_item">{{ latestEvents.device_status }}</view>
				</view>
				<view class="sj_box">
					<view class="" style="width: 180rpx">在线状态:</view>
					<view class="sj_item">{{ latestEvents.on_line }}</view>
				</view>
				<view class="sj_box">
					<view class="" style="width: 180rpx">事件发生时间:</view>
					<view class="sj_item">{{ latestEvents.created_at }}</view>
				</view>
				<view class="sj_box">
					<view class="" style="width: 180rpx">事件说明时间:</view>
					<view class="sj_item">{{ latestEvents.sillustrate_time }}</view>
				</view>
				<view class="sj_box">
					<view class="" style="width: 180rpx">事件报告时间:</view>
					<view class="sj_item">{{ latestEvents.illustrate_time }}</view>
				</view>
				<view class="sj_box">
					<view class="" style="width: 180rpx">五防处置人员:</view>
					<view class="sj_item">{{ latestEvents.five_prevention_name }}</view>
				</view>
				<view class="sj_box">
					<view class="" style="width: 180rpx">五防处置电话:</view>
					<view class="sj_item">{{ latestEvents.five_prevention_mobile }}</view>
				</view>
			</view>
			<el-row justify="space-between" :gutter="20" style="margin-left: 235rpx">
				<el-col :span="6">
					<el-select v-model="event_level_val" clearable placeholder="事件等级">
						<el-option v-for="item in event_level_list" :key="item.value" :label="item.label" :value="item.label"></el-option>
					</el-select>
				</el-col>
				<el-col :span="6">
					<el-select v-model="event_type_val" clearable placeholder="事件类型">
						<el-option v-for="item in event_type_list" :key="item.value" :label="item.label" :value="item.label"></el-option>
					</el-select>
				</el-col>
				<el-col :span="6">
					<el-select v-model="status_val" clearable placeholder="事件状态">
						<el-option v-for="item in status_list" :key="item.value" :label="item.label" :value="item.label"></el-option>
					</el-select>
				</el-col>
				<el-col :span="5">
					<!-- <el-input placeholder="请输入事件说明" v-model="descriptionVal"></el-input> -->
					<el-autocomplete
						class="inline-input"
						v-model="descriptionVal"
						:fetch-suggestions="querySearch"
						placeholder="请输入事件说明"
						@select="handleSelect"
					></el-autocomplete>
				</el-col>
			</el-row>
			<view class="" style="margin-top: 50rpx; margin-left: 860rpx">
				<h3>事件处理报告</h3>
				<view class="" style="width: 700rpx">
					<el-input type="textarea" resize="none" :rows="5" placeholder="请输入报告内容" v-model.trim="valueTxt2"></el-input>
				</view>
				<view class="" style="margin-top: 50rpx; margin-left: 160rpx">
					<el-button @click="submitReportBtn" size="medium" type="primary">提交</el-button>
					<el-button @click="wubaoBtn" size="medium" type="success">误报</el-button>
				</view>
			</view>
		</view>
		<!-- 事件警告弹层end -->
		<iframe v-if="isAutio" src="../../static/img/tip.mp3" frameborder="0" wmode="transparent | window" style="display: none"></iframe>
	</view>
</template>

<script>
import { data } from '../../uni_modules/uview-ui/libs/mixin/mixin';

import { mymap } from '@/common/AMap.js';
// let id = 1000;

var md5 = require('@/GraceUI5/js/md5.js');
function launchFullscreen(element) {
	if (element.requestFullscreen) {
		element.requestFullscreen();
	} else if (element.mozRequestFullScreen) {
		element.mozRequestFullScreen();
	} else if (element.msRequestFullscreen) {
		element.msRequestFullscreen();
	} else if (element.webkitRequestFullscreen) {
		element.webkitRequestFullScreen();
	}
}
function exitFullscreen() {
	if (document.exitFullscreen) {
		document.exitFullscreen();
	} else if (document.msExitFullscreen) {
		document.msExitFullscreen();
	} else if (document.mozCancelFullScreen) {
		document.mozCancelFullScreen();
	} else if (document.webkitExitFullscreen) {
		document.webkitExitFullscreen();
	}
}

const IS_MOVE_DEVICE = document.body.clientWidth < 992; // 是否移动设备
const MSE_IS_SUPPORT = !!window.MediaSource; // 是否支持mse
let that;
export default {
	data() {
		return {
			isAutio: false /* 音频 */,
			timeId: '',
			eventId: '',
			ak: '83lYk9WITWwCmTrzmeX2qSxFMSs7znL4',
			maintabindex: 0,
			polloffset: 0,
			activeTitle: 0,
			activeTitle2: 1,
			activeVideo: 0,
			cr_id: 0 /* 文物id */,
			// culturalRelicName: '' /* 搜索到的文物名 */,
			showViewEvent: false /* 事件列表弹层*/,
			showMonitor: false /* 监控弹层*/,
			showDipAngle: false /* 倾角弹层 */,
			showHandle: false /* 待处理事件弹层 */,
			showViewEvent: false /* 查看事件弹层 */,
			showTime: false /* 文物配置时间弹层 */,
			showWarn: false /* 事件警告弹层 */,
			webViedoUrl: '' /* 每项监控链接 */,
			culturalValue: '' /* 文物名称 */,
			valueTxt: '' /* 文本域内容 */,
			valueTxt2: '' /* 文本域内容 */,
			startTime: '' /* 开始时间 */,
			endTime: '' /* 结束时间 */,
			opennessTimeList: [] /* 文物历史开放时间 */,
			occurTime: '' /* 事件发生时间 */,
			timer: null,
			treeData: [],
			treeNode: [] /* 取监控父节点信息 */,
			deviceCcode: '' /* 设备编号 */,
			dipangleList: [] /* 倾角 */,
			treeJk: [],
			jkName: '' /* 监控名字 */,
			deviceList: [] /* 设备详情 */,
			associatedDevices: [] /* 关联设备 */,
			associationTab: '' /* 关联监控Tab */,
			tableData: [] /* 获取事件列表*  */,
			eventDclList: [] /* 文物待处理事件 */,
			itemList: [] /* 查看事件数据 */,
			qhBtn: false,
			turning: true,
			treeClickCnt: 0,
			treeClickTimeout: null,
			treeClickId: '',
			defaultProps: {
				children: 'children',
				label: 'name'
			},
			selectIndex: 0,
			monitors: [],
			turningList: [] /* 轮巡配置图文 */,
			interval: '' /* 轮巡时间 */,
			number: 4 /* 轮巡个数 */,
			numberList: [
				{
					value: 'id1',
					label: '4'
				},

				{
					value: 'id2',
					label: '9'
				},
				{
					value: 'id3',
					label: '16'
				}
			] /*轮巡个数  */,
			isOpenPolling: true /* 轮巡按钮状态 */,
			total: 30, //总条数
			currentPage: 1, //当前页码
			pageSize: 12, //每页条数
			queryVal: '',
			/* 日期 */
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() > Date.now();
				},
				shortcuts: [
					{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					},
					{
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					},
					{
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					},
					{
						text: '一个月前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 31);
							picker.$emit('pick', date);
						}
					}
				]
			},
			dateVal: '' /* 选中的日期 */,
			/* 下拉框状态 */
			options: [
				{
					id: '1',
					label: '误报'
				},
				{
					id: '2',
					label: '待处理'
				},
				{
					id: '3',
					label: '处理中'
				},
				{
					id: '4',
					label: '已处理'
				},
				{
					id: '5',
					label: '超时未处理'
				},
				{
					id: '6',
					label: '超时完成处理'
				}
			],
			stateVal: '' /* 选择的状态 */,
			event_level_list: [
				{
					id: '1',
					label: '蓝色事件'
				},
				{
					id: '2',
					label: '黄色事件'
				},
				{
					id: '3',
					label: '橙色事件'
				},
				{
					id: '4',
					label: '红色事件'
				}
			] /* 事件等级 */,
			event_level_val: '' /* 事件等级选中值 */,
			event_type_list: [
				{
					id: '1',
					label: '火灾'
				},
				{
					id: '2',
					label: '地震'
				},
				{
					id: '3',
					label: '越界报警'
				},
				{
					id: '4',
					label: '白蚂蚁'
				},
				{
					id: '5',
					label: '电量'
				},
				{
					id: '6',
					label: '掉线'
				}
			] /*事件类型  */,
			event_type_val: '' /* 事件类型选中值 */,
			status_list: [
				{
					id: '1',
					label: '误报'
				},
				{
					id: '2',
					label: '待处理'
				},
				{
					id: '3',
					label: '处理中'
				},
				{
					id: '4',
					label: '已处理'
				},
				{
					id: '5',
					label: '超时未处理'
				},
				{
					id: '6',
					label: '超时完成处理'
				}
			] /* 事件状态 */,
			status_val: '' /* 事件状态选中值 */,
			restaurants: [{ value: '意外事件' }, { value: '意料中事件' }] /* 事件说明推荐语 */,
			descriptionVal: '' /* 事件说明 */,
			latestEvents: null /* 最新事件 */,
			mindex: 0,
			mindex2: 0,
			eventlist: [],
			eventDetails: [],
			showedit: false,
			// zh_CN: locales.zh_CN,
			isMoveDevice: IS_MOVE_DEVICE,
			player: null,
			splitNum: 1,
			mseSupport: MSE_IS_SUPPORT,
			tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
			labelCol: { span: 7 },
			isfull: false,
			wrapperCol: { span: 10 },
			urls: {
				realplay: 'ws://10.19.147.22:559/EUrl/q2jQie4',
				talk: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S',
				playback: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S'
			},
			playback: {
				startTime: '2021-07-26T00:00:00',
				endTime: '2021-07-26T23:59:59',
				valueFormat: 'YYYY-MM-DDTHH:mm',
				seekStart: '2021-07-26T12:00:00',
				rate: ''
			},
			muted: true,
			volume: 50,
			volumeOnSvg: {
				template:
					'<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>'
			},
			volumeOffSvg: {
				template:
					'<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>'
			}
		};
	},
	created() {},
	mounted() {
		that = this;
		this.getZhoujieDevice();
		window.that = this;
		this.$el.style.setProperty('display', 'block');
		this.init();
		this.createPlayer();
		this.getPollingConfig();

		/* 定时获取最新事件 */
		this.startTimer();
		/* 事件列表 */
		this.postEventList();
		// if (this.showvideo == 0) {
		// 	document.getElementById('videowindow').style.display = 'none';
		// }
	},
	computed: {
		mode: function () {
			return this.tabActive === 'mse' ? 0 : 1;
		}
	},
	watch: {
		culturalValue(val) {
			this.$refs.tree.filter(val);
		},
		latestEvents: {
			handler(newData) {
				if (newData && newData.address === undefined && this.showWarn) {
					this.showWarn = false;
					this.startTimer();
				}
			},
			deep: true
		}
	},
	beforeDestroy() {
		this.stopTimer();
		console.log('index.beforeDestroy.stopTimer');
	},

	onLoad(e) {
		console.log('index');
	},
	methods: {
		/* 搜索筛选树形结构数据 */
		filterNode(value, data) {
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		},
		/* 刷新了 */
		refreshBtn() {
			console.log('index.methods.refreshBtn');
			window.location.reload();
		},
		/*获取 树形数据 */
		getZhoujieDevice() {
			this.$api.getZhoujieDevice(
				{
					type: 'cr'
				},
				(res) => {
					this.treeData = res.data;
				}
			);
		},
		/* 切换数据 */
		qhGetZhoujieDevice() {
			this.qhBtn = !this.qhBtn;
			if (this.qhBtn) {
				this.$api.getZhoujieDevice(
					{
						type: 'area'
					},
					(res) => {
						this.treeData = res.data;
					}
				);
			} else {
				this.getZhoujieDevice();
			}
		},
		/* 获取文物历史开放时间 */
		timeBtn(data) {
			this.timeId = data.id;
			// console.log(data, 'data');
			this.showTime = true;
			this.$api.getCrOpenHoursHistoricalConfig({ cr_id: data.id }, function (res) {
				console.log(res, '时间配置');
				that.opennessTimeList = res.data;
			});
		},

		/* 修改时间 */
		modifyTime() {
			this.$api.setCrOpenHoursConfig(
				{
					cr_id: that.timeId,
					start_time: that.startTime,
					end_time: that.endTime
				},
				function (res) {
					console.log(res, '修改时间');

					if (res.code == 1) {
						that.$common.successToShow(res.msg);
					} else {
						that.$common.errorToShow(res.msg);
					}
				}
			);
		},
		/* 开启定时获取最新事件 */
		startTimer() {
			if (!this.timer) {
				console.log('getLatestEvent');
				this.timer = setInterval(() => {
					this.getLatestEvent();
				}, 5000);
			}
		},
		/* 关闭定时最新事件 */
		stopTimer() {
			clearInterval(this.timer);
			this.timer = null;
		},
		/* 定时获取最新事件 */
		getLatestEvent() {
			this.$api.getLatestEvent({}, (res) => {
				const newData = res.data;

				if (newData !== null) {
					this.latestEvents = newData;
					if (newData.address !== undefined) {
						if (!this.showWarn) {
							this.showWarn = true;
							this.isAutio = true;
							this.startTimer();
						}
					} else {
						if (this.showWarn) {
							this.showWarn = false;
							this.isAutio = false;
							this.startTimer();
						}
					}
				}

				// console.log(this.latestEvents, '最新事件');
			});
		},
		/* 定时获取最新事件 */
		// closePopup() {
		// 	this.showWarn = false;
		// 	this.startTimer();
		// },

		/* 加入轮巡 */
		append(data) {
			for (let i = 0; i < this.monitors.length; i++) {
				if (this.monitors[i].device_code == data.device_code) {
					window.editDeviceIndex = i;
					/* isPolling为true已经在轮巡 */
					if (data.isPolling) {
						//del删除轮巡
						this.$api.delPollingConfig({ device_id: data.device_id }, function (res) {
							that.monitors[window.editDeviceIndex].isPolling = 0;
							that.isOpenPolling = true;
							console.log('删除成功');

							that.$common.successToShow(res.msg);
						});
					} else {
						//add否则加入轮巡
						this.$api.addPollingConfig({ device_id: data.device_id }, function (res) {
							that.monitors[window.editDeviceIndex].isPolling = 1;
							console.log('加入成功');
							that.isOpenPolling = true;
							that.$common.successToShow(res.msg);
						});
					}

					break;
				}
			}
		},

		/* 关联监控点击事件 */
		openVideo(item, index) {
			this.associationTab = item.name;
			var t = Date.parse(new Date()) / 1000;
			var key = md5.md5(t + '@feichenghuli');
			/* 需要拼接该项文物监控链接 */
			this.webViedoUrl = 'https://feicheng.16fw.cn:1443/hik_monitor/center_monitor.html?t=' + t.toString() + '&key=' + key + '&index_code=' + item.device_code;
		},
		/* 树形组件点击事件 */
		handleNodeClick(data, node, obj) {
			that.cr_id = data.id;

			console.log(data, 111);
			console.log(node, 222);
			if (data.area !== undefined) {
				console.log('点击了文物', data);
				that.stopAllPlay();
				that.mindex = 0;
				/* 获取文物下的所有数据 */
				that.monitors = data.children;
				/* 调用获取监控编码 */
				that.toshow();
			}
			if (data.zhoujie_device_type == '1') {
				that.deviceCcode = data.device_code;
				console.log('点击了监控', this.deviceCcode);
				/* 获取监控父节点信息 */
				this.treeNode = node.parent.data;
				this.treeJk = node.parent.data.children;
				// console.log(this.treeNode, 11122288888);
				/* 点击的监控名字 */
				this.jkName = data.name;
				this.showMonitor = true;
				var t = Date.parse(new Date()) / 1000;
				var key = md5.md5(t + '@feichenghuli');
				this.webViedoUrl = 'https://feicheng.16fw.cn:1443/hik_monitor/center_monitor.html?t=' + t.toString() + '&key=' + key + '&index_code=' + data.device_code;
				/* 获取点击的监控文物及五防信息 */
				this.$api.getDeviceDetails({ device_id: data.device_id }, function (res) {
					// console.log(res, 1717171717);
					/* 设备信息 */
					that.deviceList = res.data;
					/* 关联监控 */
					that.associatedDevices = res.data.device_context_list;
					// console.log(that.associatedDevices, 888888888888);
					/* 地图 */
					mymap(that.ak)
						.then((mymap) => {
							var bmap = null;
							// 创建百度地图实例
							bmap = new BMapGL.Map('allmap');
							let point = new BMapGL.Point(res.data.longitude, res.data.latitude); /* 坐标点 */
							bmap.centerAndZoom(point, 15); //设置缩放级别
							bmap.enableScrollWheelZoom();
							// 添加标注点并设置自定义图标;
							const icon = new BMapGL.Icon('/static/img/company-green.png', new BMapGL.Size(26, 26));
							const marker = new BMapGL.Marker(point, { icon: icon });
							// // 将标注添加到地图
							bmap.addOverlay(marker);
							// 添加标注点上的文字
							const label = new BMapGL.Label(that.treeNode.name, {
								position: point, // 设置文本标注位置
								offset: new BMapGL.Size(20, -10) // 设置文本偏移量
							});
							label.setStyle({
								color: '#576171', // 文本颜色
								fontSize: '12px', // 文本字号
								fontWeight: 'bold' // 文本加粗
							});
							marker.setLabel(label); // 将标注点与文本标注关联
						})
						.catch((e) => {
							console.log(e);
						});
					/* 地图 */
				});
			}
			if (data.zhoujie_device_type == 2) {
				this.$api.getDeviceDetails({ device_id: data.device_id }, function (res) {
					console.log('白蚂蚁', res);
					that.showDipAngle = true;
					that.dipangleList = res.data;
					that.treeNode = node.parent.data;
					/* 白蚂蚁数据 */
				});
			}
			if (data.zhoujie_device_type == 3) {
				this.$api.getDeviceDetails({ device_id: data.device_id }, function (res) {
					console.log(res, '点击了倾角');
					/* 倾角数据 */
					that.showDipAngle = true;
					that.dipangleList = res.data;
					that.treeNode = node.parent.data;
				});
			}
		},
		/* 获取轮巡配置 */
		getPollingConfig() {
			this.$api.getPollingConfig({}, function (res) {
				// console.log(res, 888888888888);
				that.turningList = res.data.device;
				// console.log(that.turningList, 2323232323232323);
				that.interval = res.data.interval / 60;
				that.number = res.data.number;
				/* 控制监控画面展示个数 */
				that.splitNum = Math.sqrt(that.number);
				/* 控制监控画面展示个数 */
				that.arrangeWindow();
				that.getMonitorList();
			});
		},
		/* 修改轮巡配置 */
		modifyBtn() {
			this.$api.editPollingConfig({ interval: this.interval, number: this.number }, function (res) {
				// console.log(res, 99999999999);
				if (res.code == 1) {
					that.isOpenPolling = true;
					that.$common.successToShow(res.msg);
				} else {
					that.$common.errorToShow(res.msg);
				}
			});
		},
		/* 图文中删除轮巡按钮 */
		lunxunBtn(item, index) {
			this.$api.delPollingConfig({ device_id: item.device_id }, function (res) {
				console.log(res, '删除成功');
				that.getPollingConfig();
				that.$common.successToShow(res.msg);
			});
		},
		/* 待处理事件按钮 */
		eventDclBtn() {
			this.$api.postEventList(
				{
					device_code: this.deviceCcode,
					status: this.status_val
				},
				function (res) {
					console.log(res, '待处理事件');
					that.eventDclList = res.data.rows;
					console.log(that.tableData, '待处理事件2');
				}
			);
		},
		// 获取事件列表
		postEventList() {
			// console.log(that.deviceCode, '待核查');
			this.$api.postEventList(
				{
					page: this.currentPage,
					pageSize: this.pageSize
					// device_code: this.deviceCcode,
					// status: this.status_val
				},
				function (res) {
					// console.log(res, '页码');
					that.tableData = res.data.rows;
					// console.log(that.tableData, '页码2');
					that.total = res.data.total;
				}
			);
		},
		/* 事件列表误报按钮 */
		// falseAlarmBtn(item) {
		// 	// console.log(item, 'item');
		// 	this.$api.editEvent(
		// 		{
		// 			event_id: item.id,
		// 			event_level: item.event_level,
		// 			event_type: item.event_type,
		// 			status: item.status
		// 		},
		// 		function (res) {
		// 			if (res.code == 1) {
		// 				console.log(res, '误报');
		// 				that.postEventList();
		// 				that.$common.successToShow(res.msg);
		// 			} else {
		// 				that.$common.errorToShow(res.msg);
		// 			}
		// 		}
		// 	);
		// },
		/* 事件说明推荐语 */
		querySearch(queryString, cb) {
			var restaurants = this.restaurants;
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
			// 调用 callback 返回建议列表的数据
			cb(results);
		},
		createFilter(queryString) {
			return (restaurant) => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
			};
		},
		handleSelect(item) {
			console.log((this.descriptionVal = item.value));
		},
		/* 事件说明推荐语end */
		/* 事件警告弹层提交按钮 */
		submitReportBtn() {
			// console.log(this.latestEvents, '警告数据');
			this.$api.editEvent(
				{
					event_id: this.latestEvents.event_id,
					event_level: this.event_level_val,
					event_type: this.event_type_val,
					status: this.status_val,
					illustrate: this.descriptionVal,
					reports: this.valueTxt2
				},
				function (res) {
					console.log(res, '提交报告');
					if (res.code == 1) {
						that.$common.successToShow('提交成功');
					} else {
						that.$common.errorToShow('请选择事件详情');
					}
					// console.log(res, '提交报告');
				}
			);
		},
		// 事件警告弹层误报按钮
		wubaoBtn() {
			// console.log(this.latestEvents.event_id, 111111212335688);
			this.$api.editEvent(
				{
					vent_id: this.latestEvents.event_id,
					event_level: this.event_level_val,
					event_type: this.event_type_val,
					status: this.status_val,
					illustrate: this.descriptionVal,
					reports: this.valueTxt2
				},
				function (res) {
					that.$common.successToShow('提交成功');
					// console.log(res, '误报数据');
					// if (res.code == 1) {
					// 	that.$common.successToShow('提交成功');
					// } else {
					// 	that.$common.errorToShow(res.msg);
					// }
				}
			);
		},
		/* 每页条数改变 */
		handleSizeChange(size) {
			this.pageSize = size;
			this.postEventList();
			/* 页面改变在此调用接口方法 */
			// console.log(this.pageSize);
		},
		/* 页码改变 */
		handleCurrentChange(currentPage) {
			this.currentPage = currentPage;
			this.postEventList();
			/* 页面改变在此调用接口方法 */
			// console.log(this.currentPage); //点击第几页
		},
		/* 事件搜索按钮 */
		searchBtn() {
			if (this.dateVal != '' || this.stateVal != '' || this.queryVal != '') {
				this.$api.postEventList(
					{
						keywords: this.queryVal,
						status: this.stateVal,
						created_at: this.dateVal
					},
					function (res) {
						if (res.code == 1 && res.data.rows.length > 0) {
							that.tableData = res.data.rows;
							// console.log(that.tableData, '搜索事件2');
						} else {
							that.$common.errorToShow('暂无事件');
						}
					}
				);
			}
		},

		/* 查看事件 */
		viewEventBtn(item) {
			this.itemList = item;
			console.log(item, 'item');
			this.eventId = item.id;
			this.showViewEvent = true;
			// mymap(that.ak)
			// 	.then((mymap) => {
			// 		var bmap2 = null;
			// 		// 创建百度地图实例
			// 		bmap2 = new BMapGL.Map('allmap2');
			// 		let point = new BMapGL.Point(108.953364, 34.276184); /* 坐标点 */

			// 		bmap2.centerAndZoom(point, 10); //设置缩放级别
			// 		bmap2.enableScrollWheelZoom();

			// 		// 添加标注点并设置自定义图标;
			// 		const icon = new BMapGL.Icon('/static/img/company-green.png', new BMapGL.Size(26, 26));
			// 		const marker = new BMapGL.Marker(point, { icon: icon });
			// 		// // 将标注添加到地图
			// 		bmap2.addOverlay(marker);

			// 		// 添加标注点上的文字
			// 		const label = new BMapGL.Label('自定义', {
			// 			position: point, // 设置文本标注位置
			// 			offset: new BMapGL.Size(20, -10) // 设置文本偏移量
			// 		});
			// 		label.setStyle({
			// 			color: '#576171', // 文本颜色
			// 			fontSize: '12px', // 文本字号
			// 			fontWeight: 'bold' // 文本加粗
			// 		});
			// 		marker.setLabel(label); // 将标注点与文本标注关联
			// 	})
			// 	.catch((e) => {
			// 		console.log(e);
			// 	});
			/* 地图 */
		},

		/* 监控待处理弹层提交按钮事件 */
		submitReport() {
			// console.log(this.eventId, 'idididid');

			this.$api.editEvent(
				{
					event_id: this.eventId,
					reports: this.valueTxt
				},
				function (res) {
					console.log(res);
				}
			);
		},

		close() {
			// this.showViewEvent = false;
			this.monitorShow = false;
		},

		getMonitorList() {
			if (this.maintabindex == 0) {
				/* 获取轮询设备监控点 */
				// that.isOpenPolling = true;
				this.$api.getPollingDevicePreviewUrl({ offset: this.polloffset }, function (response) {
					// console.log(response, 1111);

					that.polloffset = response.data.offset;
					that.monitors = response.data.device;
					that.isOpenPolling = response.data.isOpenPolling;
					/* 轮巡 */
					if (response.data.isOpenPolling) {
						setTimeout('that.getMonitorList()', response.data.interval * 1000);
					}

					if (that.monitors.length > 0) {
						that.selectIndex = 0;
						that.mindex = 0;
					}

					that.toshow();
				});
			}
		},
		/* 请求监控链接 */
		getUrltoPlay(index) {
			if (parseInt(index) >= that.monitors.length) return;

			this.$api.getCameraPreviewUrl({ device_code: that.monitors[parseInt(index)].device_code }, function (response) {
				// console.log(response, 2222);
				var playURL = response.data;
				var mode = 0;

				that.player.JS_Play(playURL, { playURL, mode }, index).then(
					() => {
						console.log('realplay success');
					},
					(e) => {
						console.error(e);
					}
				);
			});
		},

		toshow() {
			for (var i = 0; i < this.monitors.length; i++) {
				setTimeout(function () {
					var index;
					index = that.mindex;

					that.getUrltoPlay(index);

					that.mindex++;
				}, (i + 1) * 2000);
			}
		},
		init() {
			// 设置播放容器的宽高并监听窗口大小变化
			window.addEventListener('resize', () => {
				this.player.JS_Resize();
			});
		},
		createPlayer() {
			this.player = new window.JSPlugin({
				szId: 'player',
				szBasePath: './',
				iMaxSplit: 4,
				iCurrentSplit: IS_MOVE_DEVICE ? 1 : 4,
				openDebug: true,
				oStyle: {
					borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00'
				}
			});

			// 事件回调绑定
			this.player.JS_SetWindowControlCallback({
				windowEventSelect: function (iWndIndex) {
					//插件选中窗口回调
					console.log('windowSelect callback: ', iWndIndex);
					if (iWndIndex < that.monitors.length) that.selectIndex = iWndIndex;
				},
				pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
					//插件错误回调
					console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
					//if (iErrorCode == 26214462 || oError.code == 1006 || oError.code == 1005) {
					let i = parseInt(iWndIndex);
					if (i < that.monitors.length) setTimeout('window.that.getUrltoPlay(' + i.toString() + ');', 3000);
					//}
				},
				windowEventOver: function (iWndIndex) {
					//鼠标移过回调
					//console.log(iWndIndex);
				},
				windowEventOut: function (iWndIndex) {
					//鼠标移出回调
					//console.log(iWndIndex);
				},
				windowEventUp: function (iWndIndex) {
					//鼠标mouseup事件回调
					//console.log(iWndIndex);
				},
				windowFullCcreenChange: function (bFull) {
					//全屏切换回调
					console.log('fullScreen callback: ', bFull);
				},
				firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
					//首帧显示回调
					console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
				},
				performanceLack: function () {
					//性能不足回调
					console.log('performanceLack callback: ');
				}
			});
		},
		/* 控制页面展示个数 */
		arrangeWindow() {
			let splitNum = this.splitNum;
			this.player.JS_ArrangeWindow(splitNum).then(
				() => {
					console.log(`arrangeWindow to ${splitNum}x${splitNum} success`);
				},
				(e) => {
					console.error(e);
				}
			);
		},
		wholeFullScreen() {
			this.player.JS_FullScreenDisplay(true).then(
				() => {
					console.log(`wholeFullScreen success`);
				},
				(e) => {
					console.error(e);
				}
			);
		},
		/* 预览&对讲 */
		realplay(index, playURL) {
			let mode = 0;

			this.player.JS_Play(playURL, { playURL, mode }, index).then(
				() => {
					console.log('realplay success');
				},
				(e) => {
					console.error(e);
				}
			);
		},
		stopPlay() {
			this.player.JS_Stop().then(
				() => {
					this.playback.rate = 0;
					console.log('stop realplay success');
				},
				(e) => {
					console.error(e);
				}
			);
		},
		talkStart() {
			let url = this.urls.talk;

			this.player.JS_SetConnectTimeOut(0, 1000);
			this.player.JS_StartTalk(url).then(
				() => {
					console.log('talkStart success');
				},
				(e) => {
					console.error(e);
				}
			);
		},
		talkStop() {
			this.player.JS_StopTalk().then(
				() => {
					console.log('talkStop success');
				},
				(e) => {
					console.error(e);
				}
			);
		},
		stopAllPlay() {
			this.player.JS_StopRealPlayAll().then(
				() => {
					this.playback.rate = 0;
					console.log('stopAllPlay success');
				},
				(e) => {
					console.error(e);
				}
			);
		},
		/* 回放 */
		playbackStart() {
			let { player, mode, urls, playback } = this,
				index = player.currentWindowIndex,
				playURL = urls.playback,
				{ startTime, endTime } = playback;

			startTime += 'Z';
			endTime += 'Z';

			player.JS_Play(playURL, { playURL, mode }, index, startTime, endTime).then(
				() => {
					console.log('playbackStart success');
					this.playback.rate = 1;
				},
				(e) => {
					console.error(e);
				}
			);
		},
		playbackPause() {
			this.player.JS_Pause().then(
				() => {
					console.log('playbackPause success');
				},
				(e) => {
					console.error(e);
				}
			);
		},
		playbackResume() {
			this.player.JS_Resume().then(
				() => {
					console.log('playbackResume success');
				},
				(e) => {
					console.error(e);
				}
			);
		},
		seekTo() {
			let { seekStart, endTime } = this.playback;
			seekStart += 'Z';
			endTime += 'Z';
			this.player.JS_Seek(this.player.currentWindowIndex, seekStart, endTime).then(
				() => {
					console.log('seekTo success');
				},
				(e) => {
					console.error(e);
				}
			);
		},
		playbackSlow() {
			this.player.JS_Slow().then(
				(rate) => {
					this.playback.rate = rate;
				},
				(e) => {
					console.error(e);
				}
			);
		},
		playbackFast() {
			this.player.JS_Fast().then(
				(rate) => {
					this.playback.rate = rate;
				},
				(e) => {
					console.error(e);
				}
			);
		},
		frameForward() {
			this.player.JS_FrameForward(this.player.currentWindowIndex).then(
				() => {
					this.playback.rate = 1;
					console.log('frameForward success');
				},
				(e) => {
					console.error(e);
				}
			);
		},
		/* 声音、抓图、录像 */
		openSound() {
			this.player.JS_OpenSound().then(
				() => {
					console.log('openSound success');
					this.muted = false;
				},
				(e) => {
					console.error(e);
				}
			);
		},
		closeSound() {
			this.player.JS_CloseSound().then(
				() => {
					console.log('closeSound success');
					this.muted = true;
				},
				(e) => {
					console.error(e);
				}
			);
		},
		setVolume(value) {
			let player = this.player,
				index = player.currentWindowIndex;
			this.player.JS_SetVolume(index, value).then(
				() => {
					console.log('setVolume success', value);
				},
				(e) => {
					console.error(e);
				}
			);
		},
		/* 事件信息 */
		// getEventList() {
		// 	this.$api.getEventList({}, function (response) {
		// 		console.error(response, 6666);
		// 		that.eventlist = response.data;
		// 	});
		// 	axios.get('/api/culturalrelicplate/work_log/getEvent').then(function (response) {
		// 		that.eventlist = response.data.data;
		// 	});
		// },

		capture(imageType) {
			let player = this.player,
				index = player.currentWindowIndex;

			player.JS_CapturePicture(index, 'img', imageType).then(
				() => {
					console.log('capture success', imageType);
				},
				(e) => {
					console.error(e);
				}
			);
		},
		recordStart(type) {
			const codeMap = { MP4: 5, PS: 2 };
			let player = this.player,
				index = player.currentWindowIndex,
				fileName = `${moment().format('YYYYMMDDHHmm')}.mp4`;
			typeCode = codeMap[type];

			player.JS_StartSaveEx(index, fileName, typeCode).then(
				() => {
					console.log('record start ...');
				},
				(e) => {
					console.error(e);
				}
			);
		},
		recordStop() {
			let player = this.player;
			index = player.currentWindowIndex;

			player.JS_StopSave(index).then(
				() => {
					console.log('record stoped, saving ...');
				},
				(e) => {
					console.error(e);
				}
			);
		},
		/* 电子放大、智能信息 */
		enlarge() {
			let player = this.player,
				index = player.currentWindowIndex;

			player.JS_EnableZoom(index).then(
				() => {
					console.log('enlarge start..., select range...');
				},
				(e) => {
					console.error(e);
				}
			);
		},
		enlargeClose() {
			let player = this.player,
				index = player.currentWindowIndex;

			player.JS_DisableZoom(index).then(
				() => {
					console.log('enlargeClose success');
				},
				(e) => {
					console.error(e);
				}
			);
		},
		intellectTrigger(openFlag) {
			let player = this.player,
				index = player.currentWindowIndex;

			let result = player.JS_RenderALLPrivateData(index, openFlag);
			console.log(`${openFlag ? 'open' : 'close'} intellect ${result === 1 ? 'success' : 'failed'}`);
		},
		getvideoInfo() {
			let player = this.player,
				index = player.currentWindowIndex;

			player.JS_GetVideoInfo(index).then(function (videoInfo) {
				console.log('videoInfo:', videoInfo);
			});
		},
		getOSDTime() {
			let player = this.player,
				index = player.currentWindowIndex;

			player.JS_GetOSDTime(index).then(function (time) {
				console.log('osdTime:', new Date(time));
			});
		},
		getUrlKey: function (name) {
			return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null;
		}
	}
};
</script>

<style>
@media screen and (max-width: 991px) {
	#player {
		width: calc(100vw - 16px);
		height: calc((100vw - 16px) * 5 / 8);
	}
}
@media screen and (min-width: 992px) {
	#player {
		width: calc(80vw - 16px);
		height: calc((80vw - 16px) * 5 / 8);
	}
}
/deep/.anchorBL {
	display: none !important;
}
/deep/.BMapLabel {
	border: none !important;
}
/deep/.uni-forms-item__label {
	color: black !important;
}
/deep/.el-input__inner {
	border-color: #3c9cff !important;
}
/deep/.el-textarea__inner {
	width: 90%;
	border-color: #dcdfe6 !important;
}
/deep/.el-tree-node__content {
	&:hover {
		background-color: #d9ecff !important;
	}
}
/deep/.el-tree-node.is-current > .el-tree-node__content {
	background-color: #d9ecff !important;
	color: #333 !important;
}
/deep/.el-tree-node__expand-icon {
	font-size: 36rpx !important;
}

.custom-tree-node {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 8px;
}
.body2 {
	padding: 20rpx;
	width: 100%;
	height: 1890rpx;
	background: url('@/static/img/wenhuazhan-bj.png') no-repeat center;
	background-size: 100% 100%;

	background-color: #f5f5f5;
}

.box {
	width: 100%;
	height: 95%;
	display: flex;
}
/* .hcqStyle7 {
	position: fixed;
	top: 16rpx;
	left: 30rpx;
	width: 200rpx;
	height: 100rpx;
	animation: rotate3D 10s linear infinite;
	font-family: cursive;
	text-shadow: 6px 2px 2px #626262;
	color: #3c9cff;
}
@keyframes rotate3D {
	0% {
		transform: perspective(1000px) rotateY(0deg);
	}
	100% {
		transform: perspective(1000px) rotateY(360deg);
	}
} */
.left_box {
	display: flex;
	flex-direction: column;
	width: 82%;
	margin-left: -20rpx;
}
.topTab {
	width: 100%;
	display: flex;
	margin-bottom: 50rpx;
	justify-content: space-around;
}
.btn {
	width: 230rpx;
	color: #3c9cff;
	border: 2px solid #3c9cff;
	font-size: 30rpx;
	cursor: pointer;
}
.activeBtn {
	color: aliceblue;
	border: none;
	background-color: #3c9cff;
}
.bh_title {
	height: 80rpx;
	line-height: 100rpx;
	margin-left: 10rpx;
}

.left_box_item {
	width: 740rpx;
	height: 460rpx;
	margin-left: -1px;
	margin-top: -1px;
	border: 1px solid #343434;
}
.right_box {
	width: 680rpx;
	height: 1800rpx;
	margin-right: 160rpx;
	overflow: scroll;
	background-color: #fff;
}
.right_box_item {
	margin-top: 20rpx;
}
.right_box_title {
	width: 140rpx;
	color: black;
	height: 60rpx;
	line-height: 60rpx;
}
.right_box_item_list {
	width: 100%;

	padding: 20rpx;
	font-size: 30rpx;
	box-sizing: border-box;
	background-color: #efefef;
	margin-left: 310rpx;
}
.item_list_item {
	height: 50rpx;
	line-height: 50rpx;
	margin-bottom: 10rpx;
}
.item_list_item:hover {
	background-color: #d9ecff;
}
.right_box_top {
	position: sticky;
	top: 0;
	z-index: 99;
	background-color: #efefef;
	margin-bottom: 10rpx;
	width: 100%;
	height: 60rpx;
	display: flex;
	justify-content: space-between;
}
.right_btm {
	width: 680rpx;
	height: 980rpx;
	overflow: scroll;
	background-color: #fff;
}

.jianju {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: -1px;
}
.gljk_item:hover {
	background-color: #d9ecff;
}
.jianju2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: -1px;
}
.jianju3 {
	display: flex;
	width: 600rpx;
	justify-content: space-between;
	align-items: center;
	margin-bottom: -1px;
}
.jianju_item {
	width: 600rpx;
	height: 70rpx;
	border: 1px solid #dbdbdb;
	border-radius: 5rpx;
	overflow: scroll;
}
.jianju_item2 {
	width: 920rpx;
	height: 90rpx;
	border: 1px solid #dbdbdb;
	border-radius: 5rpx;
}
.jianju_item3 {
	width: 360rpx;
	height: 70rpx;
	border: 1px solid #dbdbdb;
	border-radius: 5rpx;
}
.jianju_item4 {
	width: 360rpx;
	height: 70rpx;
	border: 1px solid #dbdbdb;
	border-radius: 5rpx;
}
.qj_box {
	display: flex;
	flex-direction: column;
	padding: 30rpx;
	box-sizing: border-box;
	width: 1800rpx;
	height: 1200rpx;
	border: 1px solid #dbdbdb;
}
.qj_jianju {
	margin-top: 20rpx;
	align-items: center;
	margin-bottom: -1px;
}
.gljk_item {
	margin-bottom: 10rpx;
	cursor: pointer;
}
.gljk_item:hover {
	background-color: #d9ecff;
}
.qj_jianju_item {
	display: flex;
	width: 300rpx;
	height: 70rpx;
	line-height: 70rpx;
	border: 1px solid #dbdbdb;
	border-radius: 5rpx;
}
.tanceng {
	position: absolute;
	z-index: 6;
	top: 10%;
	left: 20%;
	/* background: linear-gradient(#a38cdd, #ff8979, #868060, #826d67); */

	background-color: #f5f5f5;
}
.bottom_box_title {
	width: 100%;
	height: 60rpx;
	align-items: center;
	display: flex;
	position: sticky;
	top: 0;
	z-index: 99;
	background-color: #efefef;
}
.bottom_box_item {
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}
.bottom_box_content {
	width: 200rpx;
	height: 320rpx;
	margin-top: 10rpx;
	cursor: pointer;
	border: 1px solid #dbdbdb;
}
.show_box {
	width: 100%;
	height: 100%;
	background-color: #f2f2ec;
	display: flex;
}
.show_box_left {
	width: 60%;
	height: 100%;
}
.sjlx {
	display: flex;
	justify-content: space-around;
	line-height: 36px;
}
.box_left_top {
	width: 860rpx;
	height: 538rpx;
	color: black;
	padding: 30rpx;
	box-sizing: border-box;
	margin: 0 auto;
	margin-top: 50rpx;
	border: 1px solid #dbdbdb;
}
.box_left_top2 {
	width: 800rpx;
	height: 440rpx;
	color: black;
	padding: 30rpx;
	border: 1px solid #dbdbdb;
	margin: 0 auto;
	margin-top: 30rpx;
}
.show_box_right {
	width: 40%;
	height: 100%;
	margin-right: 120rpx;
}
.show_box_top {
	width: 100%;
	height: 43%;
	color: black;
	margin-top: 42rpx;
	box-sizing: border-box;
	padding: 30rpx;
	border: 1px solid #dbdbdb;
}
.show_box_bottom {
	width: 800rpx;
	position: absolute;
	left: 50rpx;
	bottom: 20rpx;
	height: 40%;
	padding: 30rpx;
	margin: auto;
	color: black;
	border: 1px solid #dbdbdb;

	box-sizing: border-box;
	overflow: scroll;
}
.box2 {
	width: 64%;
	margin: auto;
	margin-top: 60rpx;
	margin-left: 680rpx;
	background-color: #efefef;
}

.shijian_box {
	width: 2010rpx;
	display: flex;
	flex-flow: row wrap;
	align-item: flex-start;
	margin-top: 20rpx;
	background-color: #f2f2ec;
}
.shijian_item {
	width: 500rpx;
	height: 480rpx;
	border: 1px solid #dbdbdb;
	margin-left: -1px;
	margin-top: -1px;
}
.jk_title {
	width: 51%;
	height: 100rpx;

	position: absolute;
	padding: 20rpx;
	box-sizing: border-box;
	top: 30rpx;
	left: 0;
}

.lunxun_box {
	width: 67%;
	height: 1600rpx;
	background-color: #f2f2ec;
	margin-left: 680rpx;
	margin-top: 60rpx;
}
.lunxun_tw {
	width: 2400rpx;
	display: flex;
	flex-flow: row wrap;
	align-item: flex-start;
	margin-top: 20rpx;
}
.tw_item {
	width: 500rpx;
	height: 320rpx;
	padding: 10rpx;
	border: 1px solid #dbdbdb;
	margin-left: -1px;
	margin-top: -1px;
}
.jk_show {
	position: absolute;
	display: flex;
	justify-content: flex-start;
	width: 1800rpx;
	height: 1200rpx;
	background-color: aliceblue;
	top: 200rpx;
	left: 800rpx;
	border: 1px solid #dbdbdb;
	background-color: #f2f2ec;
}
.jk_dcl_tc {
	z-index: 5;
	position: absolute;
	top: 200rpx;
	left: 700rpx;
	width: 2060rpx;
	height: 1200rpx;
	padding: 20rpx;
	background-color: aliceblue;
}
.jk_tc_box {
	width: 100%;
	height: 100%;
	overflow: scroll;
}
.jk_tc_box2 {
	display: flex;
	flex-flow: row wrap;
	align-item: flex-start;
	width: 100%;
}
.jk_tc_item {
	padding: 10rpx;
	width: 480rpx;
	height: 420rpx;
	border: 1px solid #dbdbdb;
}
.pzsj_tc {
	width: 1300rpx;
	height: 600rpx;
	padding: 40rpx;
	position: absolute;
	overflow: scroll;
	top: 200rpx;
	left: 1000rpx;
	background-color: aliceblue;
}
.sjjg_tc {
	width: 2600rpx;
	height: 1400rpx;

	padding: 20rpx;
	position: absolute;
	top: 200rpx;
	left: 300rpx;
	background-color: aliceblue;
}
.sj_top_box {
	width: 2500rpx;
	height: 160rpx;
	display: flex;
	flex-flow: wrap;
	justify-content: space-around;
	margin-bottom: 180rpx;
	/* background-color: yellowgreen; */
}
.sj_box {
	display: flex;
	margin-top: 10rpx;
}
.sj_item {
	width: 500rpx;
	height: 70rpx;
	margin-bottom: 10rpx;
	border: 1px solid #dbdbdb;
	border-radius: 5rpx;
	overflow: scroll;
}
/deep/.u-navbar__content {
	width: 200rpx !important;
}
/deep/.btn-prev {
	border: none;
}
/deep/.btn-next {
	border: none;
}
/deep/.el-icon-arrow-left {
	line-height: 50rpx;
}
/deep/ .el-input .el-input__inner {
	border-color: #dcdfe6 !important;
}
</style>