Project_yhfu/src/views/event.vue

<!--事件中心-->
<template>
	<div class="visual-con">
		<!--头部-->
		<vheader></vheader>
		<!--主体-->
		<div class="visual-body">
			<!-- 左侧 -->
			<div class="leftbar" :class="indentleft" ref="left">
				<div class="forthis">
					<dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" 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-73">
						<div class="d-l-con-icon">
							<div class="icon-con w-33 flex-d t-a-center"
								:class="{on:iconCurrentIndex1==item.eventStatus}"
								v-for="(item,index) in todayEventCountList"
								v-on:click="todayEventCountSetMarkers(item.eventStatus)">
								<div class="icon iconfont icon-mid" :class="item.icon"></div>
								<div class="icon-text">
									<h5 class="m-r-none icon-text-col">{{item.eventStatusName}}</h5>
									<h6 class="m-r-none">{{item.count}}</h6>
								</div>
							</div>
							<div class="icon-con w-33 flex-d t-a-center"
								:class="{on:iconCurrentIndex2==item.eventSource}"
								v-for="(item,index) in todayEventSourcetList"
								v-on:click="todayEventSourcetSetMarkers(item.eventSource)">
								<div class="icon iconfont icon-mid" :class="item.icon"></div>
								<div class="icon-text">
									<h5 class="m-r-none icon-text-col">{{item.eventSourceName}}</h5>
									<h6 class="m-r-none">{{item.count}}</h6>
								</div>
							</div>
						</div>
						<div class="d-tit">
							<h4>事件分布</h4>
						</div>
						<div class="h-16 overflow-y">
							<div class="d-l-con" v-for="(item,index) in todayEventCountDeptList"
								v-on:click="todayEventByDeptIdList(item.deptId)">
								<div class="d-l-l-text">
									<i class="i-small"></i>
									<h4>{{item.deptName}}</h4>
								</div>
								<div class="d-l-l-count">{{item.count}}</div>
							</div>
						</div>
						<div class="d-tit">
							<h4>事件分类</h4>
						</div>
						<div id="event-chart" style="width: 100%;height:24.2vh;"></div>
						<div class="d-l-con" v-for="(item,index) in todayEventCountTypeList"
							v-on:click="todayEventByTypeList(item.eventType)">
							<div class="d-l-l-text">
								<i class="i-small"></i>
								<h4>{{item.eventTypeName}}</h4>
							</div>
							<div class="d-l-l-count"> {{item.count}}</div>
						</div>
					</div>
					</dv-border-box-13>
				</div>
			</div>
			<!-- 地图 -->
			<supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'"
				:mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"
				@showEventInfo_notProcessed="showEventInfo_notProcessed"
				@showEventInfo_Processed="showEventInfo_Processed"></supermap>
			<!-- 右侧 -->
			<div class="rightbar" :class="indentright" ref="right">
				<div class="forthis">
					<dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" 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-73">
						<div class="d-l-con d-evnet-list-con"  :class="{on:listCurrentIndex == index}" :key="index" v-for="(item,index) in eventList"
							v-on:click="dropLocation(item.latitude,item.longitude , index)">
							<img :src="item.picturePath" v-if="item.picturePath!=null&&item.picturePath!=''"
								class="event-list-img" onerror="javascript:this.src='/img-sample.png'">
							<img src="@/assets/images/visual/img-sample.png" v-else class="event-list-img">
							<div class="event-list-text">
								<h3>{{item.eventTitle}}</h3>
								<!--                <h4><span-->
								<!--                  :class="[item.state==0?'state-wcl':'state-wyc']">{{['新上报','处理中'][item.state]}}</span><span>{{item.source}}</span><span>{{item.time}}</span>-->
								<!--                </h4>-->
								<!--                <h4>{{item.phoneNum}}</h4>-->
							</div>
						</div>
					</div>
					</dv-border-box-13>
				</div>
			</div>
			<vBottomMenu ref="bottomMenu"></vBottomMenu>
			<el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">
				<div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img
						src="@/assets/images/mascot.png" /></div>
			</el-tooltip>

		</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="handleClickNotProcessed" :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="updateEventStatusNotProcessed">确定</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('supermapNotProcessed')">测量工具</button>
						</div>
						<supermapNotProcessed ref="supermapNotProcessed" v-if="'point' === activeName"
							style="width:100% ;height: 75vh;" :mapDiv="'supermapNotProcessedSuperMap'"
							:mapSite="{doubleClickZoom:false}" :codes="['9fa5']" @preview="preview"
							:isSideBySide="false"></supermapNotProcessed>
					</el-tab-pane>
				</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 v-if="'point' === activeName" ref="supermapProcessed"
							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 {
		getTodayEvent,
		getEventStatusList,
		getEventSourceList,
		getEventListByDeptIdList,
		getEventListByTypeList,
		getForest,
		updateCentereventTForestfireStatus
	} from '@/api/event'
	import {
		selectByeventCode,
		getWarm,
		updateDeptEventStatus,
		listByEventCode,
      selectCentereventTLogListPC,
		selectCameraEventByCameraId,
		listCenterdataTAttachByBusId,
		selectchannelCodeByCameraId,
		selectFjsxt
	} from '@/api/forest'
	/** ----------------------------------摄像头预览开始------------------------------------- */
	import {
		getDahuaVideoServer
	} from "@/api/dahua/dahua";
	import DHWs from '@/dahua/lib/DHWs'

	/** ----------------------------------摄像头预览结束------------------------------------- */
	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 echarts from 'echarts'
	let echarts = require('echarts')
	export default {
		dicts: ['event_source'],
		components: {
			supermap,
			supermapNotProcessed,
			supermapProcessed,
			vheader,
			vBottomMenu,
			eventLocation,
      TVWall,
		},
		created() {
			/** ----------------------------------摄像头预览开始------------------------------------- */
			const DHWsInstance = DHWs.getInstance();
			this.ws = DHWsInstance;
			/** ----------------------------------摄像头预览结束------------------------------------- */
			/** ----------------------------------底部按钮公用组件开始------------------------------------- */
			window.showDialog = this.showDialog
			window.choseLayerSwitching = this.choseLayerSwitching
      window.choseLayerSwitchingList = this.choseLayerSwitchingList
			/** ----------------------------------底部按钮公用组件结束------------------------------------- */
		},
		mounted() {
			this.getTodayEvent()
		},
		data() {
			return {
				iconCurrentIndex1: '',
				iconCurrentIndex2: '',
				listCurrentIndex: '',
				/** ----------------------------------摄像头预览开始------------------------------------- */
				activePanel: 'key1',
				isLogin: false,
				cameraParams: [],
        ws:null,
				/** ----------------------------------摄像头预览结束------------------------------------- */
				markersList: [],
				todayEventCountList: [], //今日事件列表
				todayEventSourcetList: [], //今日事件列表
				todayEventCountDeptList: [], //事件分布
				todayEventCountTypeList: [], //事件分类
				eventChartData: [], //左侧eachar图表数据
				iframeBoo: true,
				open: false,
				iframeVue: null,
				eventInfoVisible_notProcessed: false,
				eventInfoVisible_Processed: false,
				eventInfoVisible2: false,
				activeName: 'info',
				radio: '1',
				eventList: [],//事件列表
				/** ----------------------------------事件弹窗开始-未处理------------------------------------- */
				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

			}
		},

		methods: {
			/** ----------------------------------底部按钮公用组件开始------------------------------------- */
			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,isClear) {
        this.$refs.supermap.layerSwitching(url, isClear)
      },
      //选择图层(传递数组)
      choseLayerSwitchingList(urlList) {
        this.$refs.supermap.layerSwitchingList(urlList)
      },
			/** ----------------------------------底部按钮公用组件结束------------------------------------- */
			//事件chart
			eventChart() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = echarts.init(document.getElementById('event-chart'))

				myChart.setOption({
					color: ['#2EACFF', '#FFA61C', '#2EC054', '#8C64D7'],
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					toolbox: {
						show: true
					},
					series: [{
						name: '事件分类',
						type: 'pie',
						roseType: true,
						radius: [30, 70],
						label: {
							show: true,
							formatter: '{b}\n{c} '
						},
						data: this.eventChartData
					}]
				})

			},
			//吉祥物收起左右框
			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
			},
			formLeaveTable() {
				let p = new Promise((resolve, reject) =>
					reject()
				);
				return p;
			},
			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.id = data.id;
					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 = ""
							}
						})
					}
				})
			},
			updateEventStatusNotProcessed() {
				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.getTodayEvent();
				})
			},
			updateEventStatusProcessed() {
				if (this.eventStatus == '') {
					this.$modal.msgError("请选择状态");
					return
				}
				updateCentereventTForestfireStatus(this.id, this.eventStatus).then(response => {
					this.$modal.msgSuccess(response.msg)
					this.eventStatus = ''
					this.eventInfoVisible_Processed = false
					this.cancelEventShow();
          this.getTodayEvent();
				})

			},
			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 = [];
			},
			handleClickNotProcessed: 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);
								}
							}
							//this.preview("ZgVzqsjwA1DT3G85KJ7HH0");
							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 += '<span>' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>' + that.information[i].name + '：' + that.information[i]
								.content + '</h4>' +
								'                </div>' +
								'                </div>' +
								'                </span>';
						}
						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 += '<span>' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>' + that.information[i].name + '：' + that.information[i]
								.content + '</h4>' +
								'                </div>' +
								'                </div>' +
								'                </span>';
						}
						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.id = id;
				that.eventInfoVisible_Processed = true;
				that.listEventPic = [];
				that.url = '';
				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
					}


					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 = ""
							}
						})
					}
				})
			},
			/** ----------------------------------事件弹窗结束------------------------------------- */
			getTodayEvent() {
				let that = this
				//获取左侧菜单列表
				getTodayEvent().then(res => {
					//今日事件
					that.todayEventCountList = res.data.eventcountStatus
					that.todayEventSourcetList = res.data.eventcountSource

					res.data.eventcountStatus.forEach(function(data, index) {
						that.$set(that.todayEventCountList[0], 'icon', 'sj-icon-wcl');
						that.$set(that.todayEventCountList[1], 'icon', 'sj-icon-clz');
						that.$set(that.todayEventCountList[2], 'icon', 'sj-icon-ywc');

					});
					res.data.eventcountSource.forEach(function(data, index) {
						that.$set(that.todayEventSourcetList[0], 'icon', 'sj-icon-rg');
						that.$set(that.todayEventSourcetList[1], 'icon', 'sj-icon-hx');
						that.$set(that.todayEventSourcetList[2], 'icon', 'sj-icon-kk');

					});
					//  事件分布
					that.todayEventCountDeptList = res.data.eventcountDept
					//  事件分类
					that.todayEventCountTypeList = res.data.eventcountType
          this.eventChartData=[]
					if (res.data.eventcountSource != null && res.data.eventcountSource.length > 0) {
						for (let i = 0; i < res.data.eventcountSource.length; i++) {
							let data = {}
							data.name = res.data.eventcountSource[i].eventSourceName
							data.value = res.data.eventcountSource[i].count
							this.eventChartData.push(data)
						}

					}
					this.eventChart()

					that.markersList = [];
					that.eventList = [];
					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)
          }
				})
			},
			todayEventCountSetMarkers(eventStatus) {
				this.iconCurrentIndex1 = eventStatus
				this.iconCurrentIndex2 = ''
				//点击今日事件前三个按钮列表
				let that = this
				getEventStatusList(eventStatus).then(res => {
					that.eventList = [];
					that.markersList = [];
					if (res.data.eventList != null && res.data.eventList.length > 0) {
						for (let i = 0; i < res.data.eventList.length; i++) {
							let markersMap = {
								lng: 124.59,
								lat: 43.02,
								icon: 'marker',
								bindPopupHtml: '',
								click: '',
								parameter: '',
								keepBindPopup: false,
								isAggregation: false
							}
							if (res.data.eventList.length > 50) {
								markersMap.isAggregation = true
							}
							if (eventStatus == "event_event_status_1_2_6") {
								markersMap.click = "showEventInfo_Processed"
								markersMap.icon = "sj-icon-map-clz"
							} else if (eventStatus == "event_event_status_4") {
								markersMap.click = "showEventInfo_notProcessed"
								markersMap.icon = "sj-icon-map-wcl"
							} else {
								markersMap.icon = "sj-icon-map-ywc"
                markersMap.click = "showEventInfo_Processed"
							}
							markersMap.parameter = res.data.eventList[i].id
							markersMap.lng = res.data.eventList[i].longitude
							markersMap.lat = res.data.eventList[i].latitude
							markersMap.bindPopupHtml = '<div class="map-tip">' +
								'<span>' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>经纬度：' + res.data.eventList[i].longitude + ',' + res.data
								.eventList[i]
								.latitude + '</h4>' +
								'                </div>' +
								'                </div>' +
								'                </span>' +
								'<span>' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>事件名称：' + res.data.eventList[i].eventTitle + '</h4>' +
								'                </div>' +
								'                </div>' +
								'                </span>' +
								'<span>' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>事件时间：' + res.data.eventList[i].reportTime + '</h4>' +
								'                </div>' +
								'                </div>' +
								'                </span>' +
								'</div>';
							that.markersList.push(markersMap)
						}
						that.eventList = res.data.eventList;
					}
					setTimeout(() => {
						that.$refs.supermap.clearM(true)
						that.$refs.supermap.clearM(false)
						that.$refs.supermap.setMarkers(that.markersList)
					}, 500)
				})
			},
			todayEventSourcetSetMarkers(eventSource) {
				this.iconCurrentIndex1 = ''
				this.iconCurrentIndex2 = eventSource
				//点击今日事件后三个按钮列表
				let that = this
				getEventSourceList(eventSource).then(res => {
					that.$refs.supermap.clearM(true)
					that.$refs.supermap.clearM(false)
					that.eventList = [];
					that.markersList = [];

					if (res.data.eventList != null && res.data.eventList.length > 0) {
						for (let i = 0; i < res.data.eventList.length; i++) {
							let markersMap = {
								lng: 124.59,
								lat: 43.02,
								icon: 'marker',
								bindPopupHtml: '',
								click: '',
								keepBindPopup: false,
								isAggregation: false
							}
							if (res.data.eventList.length > 50) {
								markersMap.isAggregation = true
							}
							if (eventSource = "event_source_1_3") {
								markersMap.icon = "sj-icon-map-rg"
							} else if (eventSource = "camera_type_1") {
								markersMap.icon = "sj-icon-map-hx"
							} else {
								markersMap.icon = "sj-icon-map-kk"
							}
							if (res.data.eventList[i].eventStatus == "event_event_status_1" || res.data.eventList[
									i].eventStatus == "event_event_status_2" || res.data.eventList[i]
								.eventStatus == "event_event_status_6") {
								markersMap.click = "showEventInfo_Processed"
							} else if (res.data.eventList[i].eventStatus == "event_event_status_4") {
								markersMap.click = "showEventInfo_notProcessed"
							}
							markersMap.lng = res.data.eventList[i].longitude
							markersMap.lat = res.data.eventList[i].latitude
							markersMap.bindPopupHtml = '<div class="map-tip">' +
								'<span>' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>经纬度：' + res.data.eventList[i].longitude + ',' + res.data
								.eventList[i]
								.latitude + '</h4>' +
								'                </div>' +
								'                </div>' +
								'                </span>' +
								'<span>' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>事件名称：' + res.data.eventList[i].eventTitle + '</h4>' +
								'                </div>' +
								'                </div>' +
								'                </span>' +
								'<span>' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>事件时间：' + res.data.eventList[i].reportTime + '</h4>' +
								'                </div>' +
								'                </div>' +
								'                </span>' +
								'</div>';
							that.markersList.push(markersMap)
						}
						that.eventList = res.data.eventList;
						that.$refs.supermap.setMarkers(that.markersList)
					}
				})
			},
			todayEventByDeptIdList(deptId) {
				//点击事件分类
				let that = this
				getEventListByDeptIdList(deptId).then(res => {
					that.$refs.supermap.clearM(true)
					that.$refs.supermap.clearM(false)
					that.markersList = [];
					that.eventList = [];
					if (res.data.eventList != null && res.data.eventList.length > 0) {
						for (let i = 0; i < res.data.eventList.length; i++) {
							let markersMap = {
								lng: 124.59,
								lat: 43.02,
								icon: 'marker',
								bindPopupHtml: '',
								click: '',
								keepBindPopup: false,
								isAggregation: false
							}
							if (res.data.eventList.length > 50) {
								markersMap.isAggregation = true
							}
							if (res.data.eventList[i].eventStatus == "event_event_status_1" || res.data.eventList[
									i].eventStatus == "event_event_status_2" || res.data.eventList[i]
								.eventStatus == "event_event_status_6") {
								markersMap.click = "showEventInfo_Processed"
								markersMap.icon = "sj-icon-map-clz"
							} else if (res.data.eventList[i].eventStatus == "event_event_status_4") {
								markersMap.click = "showEventInfo_notProcessed"
								markersMap.icon = "sj-icon-map-wcl"
							} else {
								markersMap.icon = "sj-icon-map-ywc"
							}
							markersMap.lng = res.data.eventList[i].longitude
							markersMap.lat = res.data.eventList[i].latitude
							markersMap.bindPopupHtml = '<div class="map-tip">' +
								'<span>' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>经纬度：' + res.data.eventList[i].longitude + ',' + res.data
								.eventList[i]
								.latitude + '</h4>' +
								'                </div>' +
								'                </div>' +
								'                </span>' +
								'<span>' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>事件名称：' + res.data.eventList[i].eventTitle + '</h4>' +
								'                </div>' +
								'                </div>' +
								'                </span>' +
								'<span>' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>事件时间：' + res.data.eventList[i].reportTime + '</h4>' +
								'                </div>' +
								'                </div>' +
								'                </span>' +
								'</div>';
							that.markersList.push(markersMap)
						}
						that.eventList = res.data.eventList;
						that.$refs.supermap.setMarkers(that.markersList)
					}
				})
			},
			todayEventByTypeList(eventType) {
				//点击事件分类
				let that = this
				getEventListByTypeList(eventType).then(res => {
					that.$refs.supermap.clearM(true)
					that.$refs.supermap.clearM(false)
					that.markersList = [];
					that.eventList = [];
					if (res.data.eventList != null && res.data.eventList.length > 0) {
						for (let i = 0; i < res.data.eventList.length; i++) {
							let markersMap = {
								lng: 124.59,
								lat: 43.02,
								icon: 'marker',
								bindPopupHtml: '',
								click: '',
								keepBindPopup: false,
								isAggregation: false
							}
							if (res.data.eventList.length > 50) {
								markersMap.isAggregation = true
							}
							if (res.data.eventList[i].eventStatus == "event_event_status_1" || res.data.eventList[
									i].eventStatus == "event_event_status_2" || res.data.eventList[i]
								.eventStatus == "event_event_status_6") {
								markersMap.click = "showEventInfo_Processed"
								markersMap.icon = "sj-icon-map-clz"
							} else if (res.data.eventList[i].eventStatus == "event_event_status_4") {
								markersMap.click = "showEventInfo_notProcessed"
								markersMap.icon = "sj-icon-map-wcl"
							} else {
								markersMap.icon = "sj-icon-map-ywc"
							}
							markersMap.lng = res.data.eventList[i].longitude
							markersMap.lat = res.data.eventList[i].latitude
							markersMap.bindPopupHtml = '<div class="map-tip">' +
								'<span>' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>经纬度：' + res.data.eventList[i].longitude + ',' + res.data
								.eventList[i]
								.latitude + '</h4>' +
								'                </div>' +
								'                </div>' +
								'                </span>' +
								'<span>' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>事件名称：' + res.data.eventList[i].eventTitle + '</h4>' +
								'                </div>' +
								'                </div>' +
								'                </span>' +
								'<span>' +
								'                  <div class="d-l-con">' +
								'                  <div class="d-l-l-text">' +
								'                  <h4>事件时间：' + res.data.eventList[i].reportTime + '</h4>' +
								'                </div>' +
								'                </div>' +
								'                </span>' +
								'</div>';
							that.markersList.push(markersMap)
						}
						that.$refs.supermap.setMarkers(that.markersList)
					}
					that.eventList = res.data.eventList;
				})
			},
			dropLocation(lat, lng , index) {
				this.listCurrentIndex = index
				this.$refs.supermap.dropLocation(lat, lng)
			},
			/** ----------------------------------摄像头预览开始------------------------------------- */
			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>