Project_yhfu/src/views/forest.vue

<!--可视化公共模板 林业-->
<template>
	<div class="visual-con">
		<!--头部-->
		<vheader></vheader>
		<!--主体-->
		<div class="visual-body">
			<!-- 左侧 -->
			<div class="leftbar" :class="indentleft" ref="left">
				<!-- 1 基本情况 -->
				<div class="forthis">
					<dv-border-box-13 backgroundColor="#040b1f" style="padding-bottom: 1rem;">
						<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
						<div class="this-title">
							<span>基本情况</span>
							<dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
						</div>
						<div class="i-list-con h-14">
							<div class="d-l-con">
								<div class="d-l-l-text w-100p">
									<h4 class="line-h-1 w-100p">{{ forestInfo }}</h4>
								</div>
							</div>
						</div>
					</dv-border-box-13>
				</div>
				<!-- 2 事件统计-->
				<div class="forthis">
					<dv-border-box-13 backgroundColor="#040b1f" style="padding-bottom: 1rem;">
						<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
						<div class="i-list-con h-29-5">
							<div class="d-l-con">
								<div class="event-count">
									<div class="count-number">{{ totalStr.charAt(0) }}</div>
									<div class="count-number">{{ totalStr.charAt(1) }}</div>
									<div class="count-number">{{ totalStr.charAt(2) }}</div>
									<div class="count-number">{{ totalStr.charAt(3) }}</div>
									<div class="count-number">{{ totalStr.charAt(4) }}</div>
									<div class="count-number">{{ totalStr.charAt(5) }}</div>
									<dv-decoration-5
										style="width:81%;height:15px;position: absolute; top:4.2rem;z-index: 0; " />
								</div>
							</div>
							<div class="d-l-con-icon">
								<div class="icon-con w-33 flex-d t-a-center">
									<dv-decoration-9
										style="width: 5.5rem;height: 5.5rem; color:#16e29e;font-size: 1rem;font-weight: bolder;">
                    {{ newReport_pre }}%</dv-decoration-9>
									<div class="e-state"
										:style="{'background-image':`url(${require('@/assets/images/integrated/state-bg.png')})`}">
										<span>新上报</span> <span>{{newReport}}</span>
									</div>
								</div>
								<div class="icon-con w-33 flex-d t-a-center">
									<dv-decoration-9
										style="width: 5.5rem;height: 5.5rem; color:#f18425;font-size: 1rem;font-weight: bolder;">
                    {{ readySure_pre }}%</dv-decoration-9>
									<div class="e-state"
										:style="{'background-image':`url(${require('@/assets/images/integrated/state-bg.png')})`}">
										<span>已确认</span> <span>{{ readySure }}</span>
									</div>
								</div>
								<div class="icon-con w-33 flex-d t-a-center">
									<dv-decoration-9
										style="width: 5.5rem;height: 5.5rem; color:#9179f1;font-size: 1rem;font-weight: bolder;">
                    {{ readyFinish_pre }}%</dv-decoration-9>
									<div class="e-state"
										:style="{'background-image':`url(${require('@/assets/images/integrated/state-bg.png')})`}">
										<span>已完成</span> <span>{{ readyFinish }}</span>
									</div>
								</div>
							</div>
							<div class="d-l-con">
								<div id="chart-event-ai" style="width: 100%;height:6vh;"></div>
							</div>
						</div>
					</dv-border-box-13>
				</div>
				<!-- 3 组织机构 -->
				<div class="forthis">
					<dv-border-box-13 backgroundColor="#040b1f" style="padding-bottom: 1rem;">
						<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
						<div class="i-list-con h-27" style="padding-left: 1rem;">
							<el-collapse accordion>
								<el-collapse-item v-for="(item,index) in forestFarm" :key="index">
									<!-- deptId -->
									<template slot="title">
										<div class="d-l-con sj-collapse" :class="{on:listCurrentIndex1==item.deptId}"
											v-on:click="selectCameraByDeptId(item.deptId)">
											<div class="d-l-l-text">
												<h4 class="collapse-title">{{item.deptName}}</h4>
											</div>
											<div class="d-l-l-count">{{item.eventCount}}</div>
										</div>
									</template>
								</el-collapse-item>
							</el-collapse>
						</div>
					</dv-border-box-13>
				</div>
			</div>
			<!-- 地图 -->
      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" :dynamicPlotting="false"
                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false" @preview="preview"
                @showEventInfo_notProcessed="showEventInfo_notProcessed"
                @showEventInfo_Processed="showEventInfo_Processed"></supermap>
			<!-- 右侧 -->
			<div class="rightbar rightbar-index" :class="indentright" ref="right">
				<div class="right-item1">
					<!-- 天气 -->
					<div class="forthis">
						<dv-border-box-13 backgroundColor="#040b1f">
							<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
							<div class="i-list-con small-bottom-margin h-13">
								<el-row :gutter="20">
									<el-col :span="9">
										<div class="weather-img">
											<img src="../assets/images/integrated/weather/yin.png">
											<span>阿斯顿发生的发生</span>
										</div>
									</el-col>
									<el-col :span="15">
										<div class="weather-info">
											<ul>
												<li>风力：三级</li>
												<li>低温：15</li>
												<li>风向：东北</li>
												<li>高温：26</li>
												<li>火险：三级</li>
												<li>湿度：30</li>
											</ul>
										</div>
									</el-col>
								</el-row>
								<div class="firestate">
									<div class="state-block1"></div>
									<div class="state-block2"></div>
									<div class="state-block3 state-on"></div>
									<div class="state-block4"></div>
									<div class="state-block5"></div>
								</div>
							</div>
						</dv-border-box-13>
					</div>
					<!-- 曝光台 -->
					<div class="forthis">
						<dv-border-box-13 backgroundColor="#040b1f" style="padding-bottom: 1rem;">
							<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
							<div class="this-title">
								<span>曝光台</span>
								<dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
							</div>
							<div class="i-list-con small-bottom-margin h-18">
								<div class="d-l-con padding-box nowrap" v-for="(item,index) in 5">
									<div class="bgt-state">
										<div class="bgt-state-frequency">3</div>
										<div class="bgt-state-minute">3分钟</div>
									</div>
									<div class="bgt-info">
										<div class="bgt-info-name">四平-梨树-三塔分场</div>
										<div class="bgt-info-place">
											<ul>
												<li>四海乡</li>
												<li>郭家店</li>
												<li>梨树</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</dv-border-box-13>
					</div>
					<!-- 事件列表 -->
					<div class="forthis">
						<dv-border-box-13 backgroundColor="#040b1f" style="padding-bottom: 1rem;">
							<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
							<div class="this-title">
								<span>事件列表</span>
								<dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
							</div>
							<div class="i-list-con small-bottom-margin h-39">
								<div class="event-list-search">
									<el-input
									    placeholder="请输入内容"
									    prefix-icon="el-icon-search"
									    v-model="eventSearch">
									</el-input>
								</div>
								<div class="d-l-con padding-box nowrap" v-for="(item,index) in 5">
									<div class="bgt-img">
										<img src="../assets/images/integrated/event-img-sub.png" />
									</div>
									<div class="bgt-info">
									    <div class="event-state-xsb">
										  <i class="el-icon-caret-left"></i>
										  <div class="event-list-state-xsb">
											新上报
										  </div>
										</div>
										<!-- <div class="event-state-yqr">
										  <i class="el-icon-caret-left"></i>
										  <div class="event-list-state-yqr">
											已确认
										  </div>
										</div> -->
										<!-- <div class="event-state-ywc">
										  <i class="el-icon-caret-left"></i>
										  <div class="event-list-state-ywc">
											已完成
										  </div>
										</div> -->
										<div class="bgt-info-name">王某某</div>
										<div class="bgt-info-place">
											<ul>
												<li>2022-08-21 08:55</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</dv-border-box-13>
					</div>
				</div>
				<div class="right-item2">
					<!-- 日历 -->
					<div class="forthis">
						<dv-border-box-13  backgroundColor="#040b1f" style="padding-bottom: 1rem;">
							<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
							<div class="i-list-con small-bottom-margin h-30">
								<dateChoose></dateChoose>
							</div>
						</dv-border-box-13>
					</div>
					<!-- 事件分类 -->
					<div class="forthis">
						<dv-border-box-13 backgroundColor="#040b1f" style="padding-bottom: 1rem;">
							<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
							<div class="this-title">
								<span>事件分类</span>
								<dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
							</div>
							<div class="i-list-con small-bottom-margin h-19">
								<dv-capsule-chart :config="eventKind" style="width: 90%;height: 18vh; padding:.5rem 1rem" />
							</div>
						</dv-border-box-13>
					</div>
					<!-- 上报排行 -->
					<div class="forthis">
						<dv-border-box-13  backgroundColor="#040b1f" style="padding-bottom: 1rem;">
							<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
							<div class="this-title">
								<span>上报排行</span>
								<dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
							</div>
							<div class="i-list-con small-bottom-margin h-19">
								<dv-scroll-ranking-board :config="reportList" style="width: 100%;height: 20vh; padding:.5rem 1rem" />
							</div>
						</dv-border-box-13>
					</div>

				</div>

			</div>
			<vBottomMenu ref="bottomMenu"></vBottomMenu>
		</div>
		<!--事件弹层-->
		<div class="event-info">
			<el-dialog title="事件信息-未处理" :visible.sync="eventInfoVisible_notProcessed"
				v-if="eventInfoVisible_notProcessed" width="80%" @close="cancelEventShow()">
				<div style="position:absolute; right: 0;top:60px; width:40%;">
					<el-steps :space="200" :active="1" finish-status="success" align-center>
						<el-step title="待处理"></el-step>
						<el-step title="处理中"></el-step>
						<el-step title="已办结"></el-step>
						<el-step title="已归档"></el-step>
					</el-steps>

				</div>
				<el-tabs v-model="activeName" @tab-click="handleClick" :before-leave="beforeLeave">
					<el-tab-pane label="基础信息" name="info">
						<div class="event-info-con">
							<div class="e-left">
								<div class="forthis">
									<div class="i-list-con h-35">
										<span v-for="(information,index) in information" :key="index">
											<div class="d-l-con">
												<div class="d-l-l-text">
													<i class="i-small"></i>
													<h4>{{ information.name }}：</h4>
													<h4>{{ information.content }}</h4>
												</div>
											</div>
										</span>
									</div>
								</div>
								<div class="forthis d-map h-30">
									<div class="this-title">
										<span>涉事单位</span>
									</div>
									<div class="i-list-con h-26">
										<span v-for="(company,index) in listEventDept" :key="index">
											<div class="d-l-con">
												<div class="d-l-l-text">
													<i class="i-small"></i>
													<h4>{{ company.deptName }}</h4>
												</div>
												<div class="d-l-l-count"
													:class="[company.eventStatus=='未处理'?'state-wcl':'state-wyc']">
													<!--													{{['未处理', '无异常'][company.state]}}-->{{ company.eventStatus }}
												</div>
											</div>
										</span>
									</div>
								</div>
							</div>
							<div class="e-center">
								<div class="forthis">
									<div class="i-list-con h-35">
										<el-image :src="url" :preview-src-list="listEventPic" class="img-company"
											style="height: 100%;" v-if="url!=''">
										</el-image>
									</div>
								</div>
								<div class="forthis h-30">
									<div class="i-list-con h-26">
										<el-image :src="item" style="width:3.9rem; height:3rem;margin: 2px;"
											v-for="(item,index) in listEventPic" @click="switchImage(item)">
										</el-image>
									</div>
								</div>
							</div>
							<div class="e-right">
								<div class="forthis h-67">
									<div class="this-title">
										<span>处理过程</span>
									</div>
									<div class="i-list-con">
										<div class="this-con">
											<span v-for="(company,index) in listLog" :key="index">

												<div class="z-begin" v-if="company.messageType=='sys_messageType_1'">
													{{ company.logContent }}
												</div>
												<div class="z-info-list"
													v-if="company.messageType=='sys_messageType_2'">

													<el-image :src="require('@/assets/images/visual/user-img.png')"
														style="width: 3rem; height: 3rem;margin:2px;">
													</el-image>

													<div class="z-info-list-con">

														<div class="user-and-time">
															<span>{{ company.createBy }}</span><span>
																{{ company.createTime }}</span>
														</div>
														<div class="z-info">
															<div class="this-con-list-info">
																{{ company.logContent }}
															</div>
															<div>
																<el-image :src="url" :preview-src-list="srcList"
																	style="width:6.5rem; height:5rem;margin: 2px;"
																	v-for="(item,index) in 4">
																</el-image>
															</div>

														</div>
													</div>

												</div>
											</span>

										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="e-btm-btn">
							<el-form>
								<el-form-item>
									<el-select v-model="deptName" clearable placeholder="请选择部门" class="m-r-1rem"
										@change="setValue">
										<el-option v-for="item in listoperateDept" :key="item.deptId"
											:label="item.deptName" :value="{value:item.deptId,label:item.deptName}"
											:disabled="item.eventStatus=='未处理' ? false:true">
										</el-option>
									</el-select>
									<el-select v-model="eventStatus" clearable placeholder="请选择状态" class="m-r-1rem"
										@change="setXsYc">
										<el-option v-for="item in optionsNotProcessed" :key="item.value"
											:label="item.label" :value="item.value">
										</el-option>
									</el-select>
									<el-select v-model="eventType" clearable placeholder="请选择事件" class="m-r-1rem"
										v-if="eventTypeShow">
										<el-option v-for="item in listeventType" :key="item.id"
											:label="item.eventTypeName" :value="item.eventType">
										</el-option>
									</el-select>
									<!-- 	<el-radio v-model="radio" label="1">无异常</el-radio>
                    <el-radio v-model="radio" label="2">确认火情</el-radio> -->
									<el-button type="success" @click="updateEventStatus">确定</el-button>
								</el-form-item>

							</el-form>
						</div>
					</el-tab-pane>
					<el-tab-pane label="实时画面" name="frame">
					</el-tab-pane>
					<el-tab-pane label="地理位置" name="point" style="height:75vh;">
						<div class="info-button-group">
							<button>视频联动</button>
							<button @click="editableLayers('supermapNotProcessed')">测量工具</button>
						</div>
						<supermapNotProcessed ref="supermapNotProcessed" v-if="'point' === activeName"
							style="width:100% ;height: 75vh;" :mapDiv="'forestWarmSuperMap'"
							:mapSite="{doubleClickZoom:false}" :codes="['9fa5']" @preview="preview"
							:isSideBySide="false"></supermapNotProcessed>
					</el-tab-pane>
					<!-- <supermapNotProcessed ref="supermapNotProcessed"  style="width: 1000px;height: 1000px;" :mapDiv="'forestWarmSuperMap'" :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" @preview="preview" :isSideBySide="false"></supermapNotProcessed> -->
				</el-tabs>
			</el-dialog>
			<el-dialog title="事件信息" :visible.sync="eventInfoVisible_Processed" v-if="eventInfoVisible_Processed"
				width="80%" @close="cancelEventShow()">
				<div style="position:absolute; right: 0;top:60px; width:40%;">
					<el-steps :space="200" :active=zt finish-status="success" align-center>
						<el-step title="待处理"></el-step>
						<el-step title="处理中"></el-step>
						<el-step title="支援"></el-step>
						<el-step title="已办结"></el-step>
						<el-step title="已归档"></el-step>
					</el-steps>
				</div>
				<el-tabs v-model="activeName" @tab-click="handleClickProcessed" :before-leave="beforeLeave">
					<el-tab-pane label="基础信息" name="info">
						<div class="event-info-con">
							<div class="e-left">
								<div class="forthis">
									<div class="i-list-con h-35">
										<span v-for="(information,index) in information" :key="index">
											<div class="d-l-con">
												<div class="d-l-l-text">
													<i class="i-small"></i>
													<h4>{{ information.name }}：</h4>
													<h4>{{ information.content }}</h4>
												</div>
											</div>
										</span>
									</div>
								</div>
								<div class="forthis d-map h-30">
									<div class="this-title">
										<span>涉事单位</span>
									</div>
									<div class="i-list-con h-26">
										<span v-for="(company,index) in listEventDept.allDept" :key="index">
											<div class="d-l-con">
												<div class="d-l-l-text">
													<i class="i-small"></i>
													<h4>{{ company.deptName }}</h4>
												</div>
												<div class="d-l-l-count"
													:class="[company.eventStatus=='未处理'?'state-wcl':'state-wyc']">
													<!--													{{['未处理', '无异常'][company.state]}}-->{{ company.eventStatus }}
												</div>
											</div>
										</span>
									</div>
								</div>
							</div>
							<div class="e-center">
								<div class="forthis">
									<div class="i-list-con h-35">
										<el-image :src="url" :preview-src-list=listEventPic class="img-company"
											style="height: 100%;" v-if="url!=''">
										</el-image>
									</div>
								</div>
								<div class="forthis h-30">
									<div class="i-list-con h-26">
										<el-image :src="item" style="width:3.9rem; height:3rem;margin: 2px;"
											v-for="(item,index) in listEventPic" @click="switchImage(item)">
										</el-image>
									</div>
								</div>
							</div>
							<div class="e-right">
								<div class="forthis h-67">
									<div class="this-title">
										<span>处理过程</span>
									</div>
									<div class="i-list-con">
										<div class="this-con">
											<span v-for="(company,index) in listLog" :key="index">

												<div class="z-begin" v-if="company.messageType=='sys_messageType_1'">
													{{ company.logContent }}
												</div>
												<div class="z-info-list"
													v-if="company.messageType=='sys_messageType_2'">

													<el-image :src="require('@/assets/images/visual/user-img.png')"
														style="width: 3rem; height: 3rem;margin:2px;">
													</el-image>

													<div class="z-info-list-con">

														<div class="user-and-time">
															<span>{{ company.createBy }}</span><span>
																{{ company.createTime }}</span>
														</div>
														<div class="z-info">
															<div class="this-con-list-info">
																{{ company.logContent }}
															</div>
															<div>
																<el-image :src="item"
																	:preview-src-list="company.fileUrls"
																	style="width:6.5rem; height:5rem;margin: 2px;"
																	v-for="(item,index) in company.fileUrls">
																</el-image>
															</div>

														</div>
													</div>

												</div>
											</span>

										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="e-btm-btn">
							<el-form>
								<el-form-item v-if=showZt>
									<el-select v-model="eventStatus" clearable placeholder="请选择状态" class="m-r-1rem">
										<el-option v-for="item in optionsProcessed" :key="item.value"
											:label="item.label" :value="item.value">
										</el-option>
									</el-select>
									<!-- 	<el-radio v-model="radio" label="1">无异常</el-radio>
                    <el-radio v-model="radio" label="2">确认火情</el-radio> -->
									<el-button type="success" @click="updateEventStatusProcessed">确定</el-button>
								</el-form-item>

							</el-form>
						</div>
					</el-tab-pane>
					<el-tab-pane label="实时画面" name="frame">
					</el-tab-pane>
					<el-tab-pane label="地理位置" name="point">
						<div class="info-button-group">
							<button>视频联动</button>
							<button @click="editableLayers('supermapProcessed')">测量工具</button>
						</div>
						<supermapProcessed ref="supermapProcessed" v-if="'point' === activeName"
							style="width:100% ;height: 75vh" :mapDiv="'supermapProcessedSuperMap'"
							:mapSite="{doubleClickZoom:false}" :codes="['9fa5']" @preview="preview"
							:isSideBySide="false"></supermapProcessed>
					</el-tab-pane>

				</el-tabs>
			</el-dialog>
		</div>
		<eventLocation ref="eventLocation"></eventLocation>
		<TVWall ref="TVWall"></TVWall>
	</div>
</template>

<script>
	import dateChoose from '@/views/date.vue'//日历
	/** ----------------------------------weosocket开始------------------------------------- */
	import Cookies from 'js-cookie'
	/** ----------------------------------weosocket结束------------------------------------- */

	import {
		getBaseInfo,
    getTodayEvents,
    getDeptEventCount,
	} from '@/api/forest'
	import supermap from '@/components/supermap' //超图
	import supermapNotProcessed from '@/components/supermap' //超图
	import supermapProcessed from '@/components/supermap' //超图
	import vheader from '@/components/v-header.vue' //一体化共用头部
	import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
	import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
	import TVWall from '@/components/TVWall.vue' //电视墙弹窗



	/** ----------------------------------摄像头预览开始------------------------------------- */
	import {
		getDahuaVideoServer
	} from '@/api/dahua/dahua'
	import DHWs from '@/dahua/lib/DHWs'

	/** ----------------------------------摄像头预览结束------------------------------------- */

	let echarts = require('echarts')
	export default {
		dicts: ['event_source'],
		components: {
			supermap,
			supermapNotProcessed,
			supermapProcessed,
			vheader,
			vBottomMenu,
			eventLocation,
			TVWall,
			dateChoose
		},
		created() {
			/** ----------------------------------摄像头预览开始------------------------------------- */
			const DHWsInstance = DHWs.getInstance()
			this.ws = DHWsInstance
			console.log(this.ws)
			/** ----------------------------------摄像头预览结束------------------------------------- */

			/** ----------------------------------底部按钮公用组件开始------------------------------------- */
			window.showDialog = this.showDialog
			window.choseLayerSwitching = this.choseLayerSwitching
			/** ----------------------------------底部按钮公用组件结束------------------------------------- */
		},
		mounted() {
			this.getBaseInfo()
			this.getTodayEvents("2022-08-29")
			this.getDeptEventCount("2022-08-29")
			/** ----------------------------------weosocket开始------------------------------------- */
			this.initWebSocket()
			/** ----------------------------------weosocket结束------------------------------------- */
		},
		data() {
			return {
        forestInfo: '', //基本情况
        totalStr:'',//左侧获取事件信息统计
        aiTotal:'',//左侧获取事件信息统计
        newReport:'',//左侧获取事件信息统计
        otherTotal:'',//左侧获取事件信息统计
        readyFinish:'',//左侧获取事件信息统计
        readySure:'',//左侧获取事件信息统计
        total:'',//左侧获取事件信息统计
        aiTotal_pre:'',//左侧获取事件信息统计
        newReport_pre:'',//左侧获取事件信息统计
        otherTotal_pre:'',//左侧获取事件信息统计
        readyFinish_pre:'',//左侧获取事件信息统计
        readySure_pre:'',//左侧获取事件信息统计
        forestFarm: [],//左侧部门事件数量

				listCurrentIndex1: '',
				 // ----------------------------------事件分类柱状----------------------------------------
				 eventKind:{
					data: [
					   {
					     name: '森林防火',
					     value: 167
					   },
					   {
					     name: '病虫灾害',
					     value: 123
					   },
					   {
					     name: '乱砍乱伐',
					     value: 98
					   },
					   {
					     name: '动物保护',
					     value: 75
					   },
					   {
					     name: '偷盗偷猎',
					     value: 66
					   },
					 ],
					 colors: ['#1ce0a9', '#d6333b', '#e68d3f', '#32c5e9', '#2abc65'],
					 unit: '',
					 showValue: true,
				 },
				// ----------------------------------上报排行----------------------------------------
				reportList:{
					 data: [
					    {
					      name: '周口',
					      value: 55
					    },
					    {
					      name: '南阳',
					      value: 120
					    },
					    {
					      name: '西峡',
					      value: 78
					    },
					    {
					      name: '驻马店',
					      value: 66
					    },
					    {
					      name: '新乡',
					      value: 80
					    },
					    {
					      name: '信阳',
					      value: 45
					    },
					    {
					      name: '漯河',
					      value: 29
					    }
					  ]
				},

				/** ----------------------------------weosocket开始------------------------------------- */
				weosocket: false,
				websock: '',
				setIntervalWesocketPush: null,
				/** ----------------------------------weosocket结束------------------------------------- */
        eventSearch:'',//事件列表搜索
				/** ----------------------------------摄像头预览开始------------------------------------- */
				activePanel: 'key1',
				isLogin: false,
				cameraParams: [],
				ws: null,
				/** ----------------------------------摄像头预览结束------------------------------------- */
				markersList: [], //点位列表
				cameraList: [], //摄像头列表
				eventInfoVisible_notProcessed: false,
				eventInfoVisible_Processed: false,
				activeName: 'info',
				radio: '1',
        /** ----------------------------------事件弹窗开始------------------------------------- */
				listEventPic: [], //事件图片
				url: '',
				id: '',
				eventType: '',
				deptName: '',
				eventStatus: '',
				cameraId: '',
				reportTime: '',
				reportAddress: '',
				eventCode: null,
				eventSource: '',
				//事件详情弹出显隐
				eventTypeShow: false,
				listEventDept: [], //涉事单位List,
				listLog: [], //处理过程List,
				listoperateDept: [],
				optionsNotProcessed: [{
					value: 'wyc',
					label: '无异常'
				}, {
					value: 'qr',
					label: '确认'
				}],
				listeventType: [],
				updateEventStatusForm: {
					id: '',
					eventStatus: '',
					eventCode: '',
					deptId: '',
					deptName: '',
					eventType: '',
					zt: ''
				},
				/** ----------------------------------事件弹窗结束------------------------------------- */
				aniu: true,
				showZt: true,
				zt: null,
				fireReport: false,
				optionsProcessed: [],
				// 弹出层 基本信息
				information: [{
						name: '标题',
						id: '',
						content: '某某某某某发现疑似火情'

					},
					{
						name: '时间',
						id: '',
						content: '2022-02-14 14:30'
					},
					{
						name: '来源',
						id: '',
						content: '摄像头'
					},
					{
						name: '坐标',
						id: '',
						content: '125.78945646'
					},
					{
						name: '纬度',
						id: '',
						content: '43.987424'
					},
					{
						name: '上报人',
						id: '',
						content: '党校监控点位'
					},
					{
						name: '详细信息',
						id: '',
						content: '这里发生火灾，需要立刻支援'
					}
				],
				// 弹出层 基本信息 涉事单位
				srcList: [
					require('@/assets/images/visual/img-sample-3.jpg'),
					require('@/assets/images/visual/img-sample-2.jpg'),
					require('@/assets/images/visual/img-sample-1.jpg')
				],
				srcList1: [
					require('@/assets/images/visual/林业病虫害抓拍2.png'),
					require('@/assets/images/visual/林业病虫害松墨天牛抓拍.png'),
					require('@/assets/images/visual/img-sample-3.jpg')
				],

				//左右缩进
				indentStyle: '',
				indentleft: '',
				indentright: '',
				indentText: '收起左右栏',
				indentdisabled: false
			}
		},
		/** ----------------------------------weosocket开始------------------------------------- */
		destroyed() { //离开页面关闭Socket连接
			if (this.websock) {
				clearInterval(this.setIntervalWesocketPush)
				this.websock.close()
				this.websock = null
			}
		},
		/** ----------------------------------weosocket结束------------------------------------- */
		methods: {
			/** ----------------------------------weosocket开始------------------------------------- */
			initWebSocket() { //初始化weosocket
				const wsuri = 'wss://www.hmzzxc.com:10012/websocket/forest-' + Cookies.get('username')
				this.websock = new WebSocket(wsuri)
				console.log('建立websocket连接')
				this.websock.onopen = this.websocketonopen
				this.websock.onmessage = this.websocketonmessage
				this.websock.onerror = this.websocketonerror
				this.websock.onclose = this.websocketclose
				this.websock.onclose = this.websocketclose
			},
			websocketonopen() { //连接建立之后执行send方法发送数据
				console.log('websocket连接成功')
				this.weosocket = true
				this.sendPing()
			},
			websocketonerror() { //连接建立失败重连
				this.initWebSocket()
			},
			websocketonmessage(e) { //数据接收
				console.log('接收数据', e.data)
			},
			websocketsend(Data) { //数据发送
				this.websock.send(Data)
			},
			websocketclose(e) { //关闭
				console.log('断开连接', e)
				// clearInterval(this.setIntervalWesocketPush)
				this.weosocket = false
			},
			/**发送心跳
			 * @param {number} time 心跳间隔毫秒 默认5000
			 * @param {string} ping 心跳名称 默认字符串ping
			 */
			sendPing(time = 5000, ping = {
				'fromId': 'forest',
				'fromUserId': Cookies.get('username'),
				"toUserId": Cookies.get('username')
			}) {
				clearInterval(this.setIntervalWesocketPush)
				this.websock.send(JSON.stringify(ping))
				this.setIntervalWesocketPush = setInterval(() => {
					if (this.weosocket) {
						this.websock.send(JSON.stringify(ping))
					} else {
						this.initWebSocket()
					}
				}, time)
			},
			/** ----------------------------------weosocket结束------------------------------------- */

			/** ----------------------------------底部按钮公用组件开始------------------------------------- */
			showDialog(click) {
				if (click == 'eventLocation') {
					this.$refs.eventLocation.showEventLocation()
					this.$refs.supermap.isEditableLayers = false
					this.$refs.bottomMenu.showChild = false
				} else if (click == 'editableLayers') {
					this.$refs.bottomMenu.showChild = false
					if (!this.$refs.supermap.isEditableLayers) {
						this.$refs.supermap.isEditableLayers = true
					} else {
						this.$refs.supermap.isEditableLayers = false
					}
				} else if (click == 'layerSwitching') {
					this.$refs.supermap.isEditableLayers = false
					if (!this.$refs.bottomMenu.showChild) {
						this.$refs.bottomMenu.showChild = true
					} else {
						this.$refs.bottomMenu.showChild = false
					}
				} else if (click == 'TVWall') {
					this.$refs.TVWall.showTVWall()
					this.$refs.supermap.isEditableLayers = false
					this.$refs.bottomMenu.showChild = false
				}
			},
			//选择图层
			choseLayerSwitching(url) {
				this.$refs.supermap.layerSwitching(url, true)
			},
			/** ----------------------------------底部按钮公用组件结束------------------------------------- */


			//事件数量统计chart 样例地址http://192.144.199.210:8080/editor/index.html?chart_id=jTXf0Rv4A3oiBONB
			eventChartAi(data) {
				// 基于准备好的dom，初始化echarts实例
				let myChart = echarts.init(document.getElementById('chart-event-ai'))
				myChart.setOption({
					tooltip: {
						trigger: 'none'
					},
					grid: {
						top: "65%",
						left: "5%",
						right: "5%"
					},
					yAxis: {
						data: ["百分比"],
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						axisLabel: {
							show: false,
						}
					},
					xAxis: {
						splitLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						axisLabel: {
							show: false
						}
					},
					legend: {
						data: ["AI", "其他"],
						bottom: "5%",
						textStyle: {
							color: "#1FC3CE",
							fontSize: 14
						},
					},
					series: [{
						// name: '最上层立体圆',
						type: 'pictorialBar',
						symbolSize: [10, 20],
						symbolOffset: [2, 0],
						z: 12,
						itemStyle: {
							normal: {
								color: '#293CA0'
							}
						},
						data: [{
							value: 100,
							symbolPosition: 'end'
						}]
					}, {
						// name: '中间立体圆',
						type: 'pictorialBar',
						symbolSize: [10, 20],
						symbolOffset: [2, 0],
						z: 12,
						itemStyle: {
							normal: {
								color: '#45ac8d'
							}
						},
						data: [{
							value: data,
							symbolPosition: 'end'
						}]
					}, {
						// name: '最底部立体圆',
						type: 'pictorialBar',
						symbolSize: [10, 20],
						symbolOffset: [-4, 0],
						z: 12,
						itemStyle: {
							normal: {
								color: '#196d59'
							}
						},
						data: [100 - data]
					}, {
						name: 'AI',
						//底部立体柱
						stack: '1',
						type: 'bar',
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
									offset: 0,
									color: '#29ac8f'
								}, {
									offset: 1,
									color: '#0a3f3f'
								}])
							},
						},
						label: {
							normal: {
								show: true,
								position: 'inside',
								offset: [0, 1],
								formatter: function(obj) {
									return (obj.value).toLocaleString() + '%';
								},
								textStyle: {
									align: 'center',
									baseline: 'middle',
									fontSize: 14,
									fontWeight: '400',
									color: '#fff',
									textShadowColor: '#000',
									textShadowBlur: '0',
									textShadowOffsetX: 1,
									textShadowOffsetY: 1,
								}
							},
						},

						silent: true,
						barWidth: 20,
						barGap: '-100%', // Make series be overlap
						data: [data]
					}, {
						name: '其他',
						//上部立体柱
						stack: '1',
						type: 'bar',
						itemStyle: {
							normal: {
								color: '#14257B',
								opacity: .7
							}
						},
						silent: true,
						barWidth: 20,
						barGap: '-100%', // Make series be overlap
						data: [100 - data],
						// itemStyle: {
						//     normal: {
						//         color: 'rgba(29,67,243,1)',
						//     }
						// },
						label: {
							normal: {
								show: true,
								position: 'inside',
								offset: [0, 1],
								formatter: function(obj) {
									return (obj.value).toLocaleString() + '%';
								},
								textStyle: {
									align: 'center',
									baseline: 'middle',
									fontSize: 14,
									fontWeight: '400',
									color: '#fff',
									textShadowColor: '#000',
									textShadowBlur: '0',
									textShadowOffsetX: 1,
									textShadowOffsetY: 1,
								}
							},
						},
					}]
				})

			},

			//吉祥物收起左右框
			indent() {
				let list = document.getElementsByClassName('el-tooltip__popper')
				list[list.length - 1].style.display = 'none'
				if (this.indentStyle == '') {
					this.indentStyle = 'indent-style'
					this.indentleft = 'indent-left'
					this.indentright = 'indent-right'
					this.indentText = '展开左右栏'
				} else if (this.indentText == '展开左右栏') {
					this.indentStyle = ''
					this.indentleft = ''
					this.indentright = ''
					this.indentText = '收起左右栏'
				}
			},
			/** ----------------------------------事件弹窗开始------------------------------------- */
			editableLayers(processedState) {
				if (processedState == 'supermapNotProcessed') {
					let aa = this.$refs.supermapNotProcessed.isEditableLayers
					if (!this.$refs.supermapNotProcessed.isEditableLayers) {
						this.$refs.supermapNotProcessed.isEditableLayers = true
					} else {
						this.$refs.supermapNotProcessed.isEditableLayers = false
					}
				} else {
					let bb = this.$refs.supermapProcessed.isEditableLayers
					if (!this.$refs.supermapProcessed.isEditableLayers) {
						this.$refs.supermapProcessed.isEditableLayers = true
					} else {
						this.$refs.supermapProcessed.isEditableLayers = false
					}
				}
			},
			switchImage(url) {
				this.url = url
			},
			async beforeLeave(newactiveName, oldActiveName) {
				let that = this
				if (newactiveName == 'frame') {
					return await that.formLeaveTable()
				}
			},
			// 弹层方法
			showEventInfo_notProcessed(id) {
				let that = this
				that.id = id
				that.eventInfoVisible_notProcessed = true
				that.listEventPic = [],
					that.url = '',
					that.resetQuery()
				getWarm(id).then(res => {
					let data = res.data
					that.cameraId = data.reportById
					that.reportTime = data.reportTime
					that.reportAddress = data.reportAddress
					that.eventCode = data.eventCode
					that.eventSource = data.eventSource
					that.information[0].content = data.eventTitle
					that.information[1].content = data.reportTime
					that.information[2].content = that.selectDictLabel(that.dict.type.event_source, data
						.eventSource)
					that.information[3].content = data.longitude
					that.information[4].content = data.latitude
					that.information[5].content = data.reportBy
					that.information[6].content = data.eventContent
					selectByeventCode(data.eventCode).then(res1 => {
						let that = this
						that.listEventDept = res1.data.allDept
						that.listoperateDept = res1.data.operateDept
					})

					selectCentereventTLogListPC(data.eventCode).then(res2 => {
						let that = this
						that.listLog = res2.data
					})

					selectCameraEventByCameraId(data.reportById).then(res3 => {
						let that = this
						that.listeventType = res3.data
					})

					if (data.attachId != null) {
						listCenterdataTAttachByBusId(data.attachId).then(res4 => {
							let that = this
							that.listEventPic = res4.data
							if (that.listEventPic.length > 0) {
								that.url = that.listEventPic[0]
							} else {
								that.url = ''
							}
						})
					}
				})
			},
			updateEventStatus() {
				if (this.deptName == '') {
					this.$modal.msgError('请选择部门')
					return
				}
				if (this.eventStatus == '') {
					this.$modal.msgError('请选择状态')
					return
				}
				if (this.eventTypeShow) {
					if (this.eventType == '') {
						this.$modal.msgError('请选择事件类型')
						return
					}
				}
				this.updateEventStatusForm.id = this.id
				this.updateEventStatusForm.zt = this.eventStatus
				this.updateEventStatusForm.eventCode = this.eventCode
				this.updateEventStatusForm.deptId = this.deptId
				this.updateEventStatusForm.deptName = this.deptName
				this.updateEventStatusForm.eventType = this.eventType

				updateDeptEventStatus(this.updateEventStatusForm).then(response => {
					this.$modal.msgSuccess(response.msg)
					this.eventStatus = ''
					this.deptId = ''
					this.eventType = ''
					this.deptName = ''
					this.eventInfoVisible_notProcessed = false
					this.cancelEventShow()
					this.getTodayEvents()
				})
			},
			setXsYc() {
				let that = this
				if (this.eventStatus == 'qr') {
					this.eventTypeShow = true
				} else {
					this.eventTypeShow = false
				}
			},
			setValue(event) {
				this.deptId = event.value
				this.deptName = event.label
			},
			cancelEventShow() {
				this.activeName = 'info'
				this.listEventPic = [] //事件图片
				this.listEventDept = [] //涉事单位List,
				this.listLog = [] //处理过程List,
				this.listoperateDept = []
			},
			handleClick: function(tab, oldActiveName) {
				let that = this
				if (tab.name == 'frame') {
					if (that.eventSource == 'event_source_2') {
						selectchannelCodeByCameraId(that.cameraId).then(res => {
							let channelCode = []
							if (res.data != null && res.data.length > 0) {
								for (let i = 0; i < res.data.length; i++) {
									channelCode.push(res.data[i].channelCode)
								}
							}
							if (channelCode != null && channelCode.length > 0) {
								this.preview(channelCode)
							} else {
								this.$modal.msg('没有匹配到相对应摄像头！！！')
							}
						})
					} else {
						this.$modal.msg('没有匹配到相对应摄像头！！！')
					}
				} else if (tab.name == 'point') {
					setTimeout(() => {
						that.markersMapList = []
						let information = {}
						information.lng = that.information[3].content
						information.lat = that.information[4].content
						let bindPopupHtml = ''
						for (let i = 0; i < that.information.length; i++) {
							bindPopupHtml += '<div class="map-tip">' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>' + that.information[i].name + '：' + that.information[i]
								.content + '</h4>' +
								'                </div>' +
								'                </div>' +
								'                </div>'
						}
						information.bindPopupHtml = bindPopupHtml
						information.click = ''
						information.keepBindPopup = false
						information.isAggregation = false
						information.icon = 'marker'
						that.markersMapList.push(information)
						// 查询火点附近摄像头
						selectFjsxt(that.information[3].content, that.information[4].content).then(
							response => {
								console.log('vv', response.data)
								if (response.data != null && response.data.length > 0) {
									for (let i = 0; i < response.data.length; i++) {
										let marke = {}
										marke.lng = response.data[i].longitude
										marke.lat = response.data[i].latitude
										let code = response.data[i].channelCode.split(',')
										marke.bindPopupHtml = response.data[i].cameraName
										marke.click = 'preview'
										marke.parameter = code
										marke.keepBindPopup = false
										marke.isAggregation = false
										marke.icon = 'camera'
										that.markersMapList.push(marke)
									}
								}
								that.$refs.supermapNotProcessed.dropLocation(information.lat, information
									.lng)
								that.$refs.supermapNotProcessed.clearM(false)
								that.$refs.supermapNotProcessed.setMarkers(that.markersMapList)
							})
					}, 1000)

				}
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.eventTypeShow = false
				this.eventType = ''
				this.deptName = ''
				this.eventStatus = ''
			},
			handleClickProcessed(tab, event) {
				let that = this
				if (tab.name == 'frame') {
					if (that.eventSource == 'event_source_2') {
						selectchannelCodeByCameraId(that.cameraId).then(res => {
							let channelCode = []
							if (res.data != null && res.data.length > 0) {
								for (let i = 0; i < res.data.length; i++) {
									channelCode.push(res.data[i].channelCode)
								}
							}
							if (channelCode != null && channelCode.length > 0) {
								this.preview(channelCode)
							} else {
								this.$modal.msg('没有匹配到相对应摄像头！！！')
							}
						})
					} else {
						this.$modal.msg('没有匹配到相对应摄像头！！！')
					}
				} else if (tab.name == 'point') {
					setTimeout(() => {
						that.markersMapList = []
						let information = {}
						information.lng = that.information[3].content
						information.lat = that.information[4].content
						let bindPopupHtml = ''
						for (let i = 0; i < that.information.length; i++) {
							bindPopupHtml += '<div  class="map-tip">' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>' + that.information[i].name + '：' + that.information[i]
								.content + '</h4>' +
								'                </div>' +
								'                </div>' +
								'                </div>'
						}
						information.bindPopupHtml = bindPopupHtml
						information.click = ''
						information.keepBindPopup = false
						information.isAggregation = false
						information.icon = 'marker'
						that.markersMapList.push(information)
						// 查询火点附近摄像头
						selectFjsxt(that.information[3].content, that.information[4].content).then(response => {
							console.log('vv', response.data)
							if (response.data != null && response.data.length > 0) {
								for (let i = 0; i < response.data.length; i++) {

									let marke = {}
									marke.lng = response.data[i].longitude
									marke.lat = response.data[i].latitude
									let code = response.data[i].channelCode.split(',')
									marke.bindPopupHtml = response.data[i].cameraName
									marke.click = 'preview'
									marke.parameter = code
									marke.keepBindPopup = false
									marke.isAggregation = false
									marke.icon = 'camera'
									that.markersMapList.push(marke)
								}
							}
							that.$refs.supermapProcessed.dropLocation(information.lat, information.lng)
							that.$refs.supermapProcessed.clearM(false)
							that.$refs.supermapProcessed.setMarkers(that.markersMapList)
						})
					}, 1000)
				}
			},
			showEventInfo_Processed(id) {
				let that = this
				that.eventInfoVisible_Processed = true
				that.listEventPic = []
				that.url = ''
				that.id = id
				getForest(id).then(response => {
					this.showZt = true
					this.zt = null
					this.fireReport = false
					this.optionsProcessed = [{
						value: 'bj',
						label: '办结'
					}, {
						value: 'zy',
						label: '支援'
					}, {
						value: 'gd',
						label: '归档'
					}]
					let data = response.data
					if (data.eventStatus != 'event_event_status_1') {
						this.aniu = false
					}
					if (data.eventStatus == 'event_event_status_6') {
						this.optionsProcessed.splice(1, 2)
						this.zt = 3
					}
					if (data.eventStatus == 'event_event_status_1') {
						this.optionsProcessed.splice(2, 1)
						this.zt = 2
					}
					if (data.eventStatus == 'event_event_status_2') {
						this.optionsProcessed.splice(0, 2)
						this.zt = 4
					}
					if (data.eventStatus == 'event_event_status_3') {
						this.showZt = false
						this.fireReport = true
						this.zt = 5
					}
					console.log(this.optionsProcessed)

					let that = this
					this.eventSource = data.eventSource
					this.id = data.id
					this.reportTime = data.reportTime
					this.cameraId = data.reportById
					this.reportAddress = data.reportAddress
					this.eventCode = data.eventCode
					this.information[0].content = data.eventTitle
					this.information[1].content = data.reportTime
					this.information[2].content = that.selectDictLabel(that.dict.type.event_source, data
						.eventSource)
					this.information[3].content = data.longitude
					this.information[4].content = data.latitude
					this.information[5].content = data.reportBy
					this.information[6].content = data.eventContent

					selectByeventCode(data.eventCode).then(response => {
						that.listEventDept = response.data
					})

					selectCentereventTLogListPC(data.eventCode).then(response => {
						that.listLog = response.data
					})
					if (data.attachId != null) {
						listCenterdataTAttachByBusId(data.attachId).then(response => {
							that.listEventPic = response.data
							if (that.listEventPic.length > 0) {
								that.url = that.listEventPic[0]
							} else {
								that.url = ''
							}
						})
					}
				})
			},
			/** ----------------------------------事件弹窗结束------------------------------------- */
			getBaseInfo() {
				//左侧获取部门信息
				getBaseInfo().then(res => {
          this.forestInfo = res.data.baseinfo //基本情况
          // this.cameraList = res.data.cameraList
				})
			},
			getTodayEvents(date) {
				let that = this
				//左侧获取事件信息统计
				getTodayEvents({ day:date }).then(res => {
          this.aiTotal=res.data.aiTotal;
          this.aiTotal_pre=res.data.aiTotal_pre;
          this.newReport=res.data.newReport;
          this.newReport_pre=res.data.newReport_pre;
          this.otherTotal=res.data.otherTotal;
          this.otherTotal_pre=res.data.otherTotal_pre;
          this.readyFinish=res.data.readyFinish;
          this.readyFinish_pre=res.data.readyFinish_pre;
          this.readySure=res.data.readySure;
          this.readySure_pre=res.data.readySure_pre;
          this.totalStr=res.data.totalStr;
          this.total=res.data.total;
          this.eventChartAi(this.aiTotal_pre);
					that.markersList = []
					if (res.data.eventListAll != null && res.data.eventListAll.length > 0) {
						for (let i = 0; i < res.data.eventListAll.length; i++) {
							let markersMap = {
								lng: 124.59,
								lat: 43.02,
								icon: 'marker',
								bindPopupHtml: '',
								click: '',
								parameter: '',
								keepBindPopup: false,
								isAggregation: false
							}
							if (res.data.eventListAll.length > 50) {
								markersMap.isAggregation = true
							}
							if (res.data.eventListAll[i].eventStatus == 'event_event_status_1' || res.data
								.eventListAll[i].eventStatus == 'event_event_status_2' || res.data.eventListAll[i]
								.eventStatus == 'event_event_status_6') {
								markersMap.click = 'showEventInfo_Processed'
								markersMap.icon = 'sj-icon-map-clz'
								markersMap.isAggregation = false
							} else if (res.data.eventListAll[i].eventStatus == 'event_event_status_4') {
								markersMap.click = 'showEventInfo_notProcessed'
								markersMap.icon = 'sj-icon-map-wcl'
							} else {
								markersMap.icon = 'sj-icon-map-ywc'
							}
							markersMap.parameter = res.data.eventListAll[i].id
							markersMap.lng = res.data.eventListAll[i].longitude
							markersMap.lat = res.data.eventListAll[i].latitude
							markersMap.bindPopupHtml = '<div class="map-tip">' +
								'<span>' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>经纬度：' + res.data.eventListAll[i].longitude + ',' + res.data
								.eventListAll[i]
								.latitude + '</h4>' +
								'                </div>' +
								'                </div>' +
								'                </span>' +
								'<span>' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>事件名称：' + res.data.eventListAll[i].eventTitle + '</h4>' +
								'                </div>' +
								'                </div>' +
								'                </span>' +
								'<span>' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>事件时间：' + res.data.eventListAll[i].reportTime + '</h4>' +
								'                </div>' +
								'                </div>' +
								'                </span>' +
								'</div>'
							that.markersList.push(markersMap)
						}
						that.eventList = res.data.eventListAll
						setTimeout(() => {
							that.$refs.supermap.clearM(false)
							that.$refs.supermap.clearM(true)
							that.$refs.supermap.setMarkers(that.markersList)
						}, 1000)
					} else {
						setTimeout(() => {
							that.$refs.supermap.clearM(false)
							that.$refs.supermap.clearM(true)
						}, 1000)
					}
				})
			},
      getDeptEventCount(date) {
				let that = this
				//左侧获取事件部门数量
        getDeptEventCount({ day:date }).then(res => {
          this.forestFarm=res.data;
				})
			},
			/** ----------------------------------摄像头预览开始------------------------------------- */
			alertLogin: function() {
				this.$modal.msg('登录中....')
			},
			alertLoginSuccess: function() {
				this.$modal.msgSuccess('登录成功！')
			},
			alertLoginFailed: function() {
				this.$modal.msgError('登陆失败！')
			},
			alertReinstall: function() {
				this.$modal.msgWarning('请重新安装客户端')
			},
			/** 预览按钮操作 */
			preview(channelCode) {
				getDahuaVideoServer().then(newResponse => {
					this.ws.detectConnectQt().then(res => {
						if (res) { // 连接客户端成功
							this.alertLogin()
							this.ws.login({
								loginIp: newResponse.loginIp,
								loginPort: newResponse.loginPort,
								userName: newResponse.userName,
								userPwd: newResponse.userPwd,
								token: '',
								https: 1
							})
							this.ws.on('loginState', (res) => {
								this.isLogin = res
								console.log('---res-----', res)
								if (res) {
									this.alertLoginSuccess()
									this.activePanel = 'key2'
									this.realTimeVideoDialog(channelCode)
								} else {
									this.alertLoginFailed()
								}
							})
						} else { // 连接客户端失败
							this.alertReinstall()
						}
					})
				})
			},
			realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
				if (!this.isLogin) {
					this.$Message.info('正在登陆客户端，请稍等......')
					return false
				}
				this.ws.openVideo(cameraParams)
			}
			/** ----------------------------------摄像头预览结束------------------------------------- */
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	@import '@/assets/styles/base.scss';
</style>