Project_yhfu/src/components/vBottomMenu.vue

<template>
	<div class="btm-box">
		<img class="light" src="../assets/images/integrated/btm-light.png" />

		<div class="btm-left" :class="btmTipIndent">
			<div class="btm-left-tip">
				<div class="btm-left-block btm-left-state-c1"></div>
				新上报
			</div>
			<div class="btm-left-tip">
				<div class="btm-left-block btm-left-state-c2"></div>
				催办
			</div>
			<div class="btm-left-tip">
				<div class="btm-left-block btm-left-state-c3"></div>
				已签收
			</div>
			<!-- div class="btm-left-tip">
        <div class="btm-left-block btm-left-state-c4"></div>
        联动
      </div> -->
			<div class="btm-left-tip">
				<div class="btm-left-block btm-left-state-c5"></div>
				办结
			</div>
			<div class="btm-left-tip">
				<div class="btm-left-block btm-left-state-c6"></div>
				归档
			</div>
			<div class="btm-legend" @click="btmIndent">
				<span>图例</span>
				<i class="el-icon-caret-right" v-if="this.btmTipIndent !== 'btm-tip-to-right'"></i>
				<i class="el-icon-caret-left" v-if="this.btmTipIndent == 'btm-tip-to-right'"></i>
			</div>
		</div>
		<div class="bottom-menu-normal">
			<div v-for="(fastMenu,index) in fastMenu" :key="index" class="btm-m-con">
				<a><i :class="fastMenu.icon" @click.stop="showDialog(fastMenu.click)"></i><a
						@click.stop="showDialog(fastMenu.click)">{{ fastMenu.name }}</a>
					<div v-if="showChild && fastMenu.click == 'layerSwitching'" class="nav-child">
						<el-button type="primary"
							@click.stop="choseLayerSwitching('http://218.27.1.154:8090/iserver/services/map-sipingshi/rest/maps/tiedong_lunkuo',true)"
							class="nav-child-btn" plain>铁东
						</el-button>
						<el-button type="primary"
							@click.stop="choseLayerSwitching('http://218.27.1.154:8090/iserver/services/map-sipingshi/rest/maps/tiexi_lunkuo',true)"
							class="nav-child-btn" plain>铁西
						</el-button>
						<!-- 	<el-button type="danger" icon="el-icon-close" style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"
                        @click.stop="closeChild"></el-button> -->
					</div>
					<!-- 林斑 -->
					<div v-show="showBanChild && fastMenu.click == 'forestban'" class="nav-child">
						<div class="forestban">
							<div class="forestban-con">
								<!--                <el-input-->
								<!--                  placeholder="输入关键字进行过滤"-->
								<!--                  v-model="filterbanText">-->
								<!--                </el-input>-->
								<el-tree :data="deptOptionsLiandong" ref="banDept" node-key="id" :check-strictly="true"
									:filter-node-method="filterbanNode" @click :accordion="true" empty-text="加载中，请稍候"
									:props="defaultProps"></el-tree>
							</div>
							<div class="forestban-right">
								<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="searchFB">
								</el-input>
								<el-checkbox-group v-model="banCheckList" @change="handleCheckedCitiesChangeBan">
									<el-checkbox v-for="(fastMenu,index) in filterbanList"
										label="http://218.27.1.154:8090/iserver/services/map-sipingshi/rest/maps/tiedong_lunkuo">
										铁东
									</el-checkbox>
								</el-checkbox-group>
							</div>
							<el-button type="danger" icon="el-icon-close"
								style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"
								@click.stop="closeBanChild"></el-button>
						</div>
					</div>
					<!-- 林场 -->
					<div v-show="showChangChild && fastMenu.click == 'forestchang'" class="nav-child">
						<div class="forestban">
							<div class="forestban-con">
								<!--                <el-input-->
								<!--                  placeholder="输入关键字进行过滤"-->
								<!--                  v-model="filterchangText">-->
								<!--                </el-input>-->
								<el-tree :data="deptOptionsLiandong" ref="changDept" node-key="id"
									:check-strictly="true" :filter-node-method="filterchangNode"
									@node-click="handlechangNodeClick" :accordion="true" empty-text="加载中，请稍候"
									:props="defaultProps"></el-tree>
							</div>
							<div class="forestban-right">
								<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="filterchang"
									@change="searchFilterchang(filterchang)">
								</el-input>
								<el-checkbox-group v-model="changCheckList" @change="handleCheckedCitiesChangeChang">
									<el-checkbox v-for="(item,index) in filterchangList" :label="item.farmAddress">
										{{ item.farmName }}
									</el-checkbox>
								</el-checkbox-group>
							</div>
							<el-button type="danger" icon="el-icon-close"
								style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"
								@click.stop="closeChangChild"></el-button>
						</div>
					</div>
				</a>

			</div>
		</div>
		<div class="btm-right">
			<el-popover placement="top" trigger="click">
				<div class="btm-r-pop-info">
					<div class="btm-r-pop-info-box" v-for="(item,index) in taskList">
						<div class="btm-r-pop-info-tit">
							<h3>{{ item.taskSourceValue }}</h3>
						</div>
						<div class="btm-r-pop-info-con">
							<div class="btm-r-pop-info-list">
								<div class="btm-r-pop-info-list-name">标题</div>
								<div class="btm-r-pop-info-list-text">{{ item.taskTitle }}</div>
							</div>
							<div class="btm-r-pop-info-list">
								<div class="btm-r-pop-info-list-name">发起人</div>
								<div class="btm-r-pop-info-list-text">{{ item.sendPersonName }}</div>
							</div>
							<div class="btm-r-pop-info-list">
								<div class="btm-r-pop-info-list-name">发起时间</div>
								<div class="btm-r-pop-info-list-text">{{ item.taskSendTime }}</div>
							</div>
							<div class="btm-r-pop-info-list">
								<div class="btm-r-pop-info-list-name">关联事件</div>
								<div class="btm-r-pop-info-list-text">{{ item.eventName }}</div>
							</div>
							<div class="btm-r-pop-info-list">
								<div class="btm-r-pop-info-list-name">催办状态</div>
								<div class="btm-r-pop-info-list-text" style="color: red" v-if="item.isUrged==1">
									任务催办中，请及时处理！！</div>
								<div class="btm-r-pop-info-list-text" v-else>正常</div>
							</div>
						</div>
						<div class="btm-r-pop-info-btm">
							<el-link type="success" @click="showEventDialog( item.eventCode )">查看详情</el-link>
							<div class="btm-r-pop-info-btm-btn">
								<el-button type="danger" @click="selectTaskDtpts(item.taskId,item.eventCode,'jj')">拒绝
								</el-button>
								<el-button type="primary" @click="selectTaskDtpts(item.taskId,item.eventCode,'lq')">领取
								</el-button>
							</div>
						</div>
					</div>
				</div>
				<el-badge :value="taskCount" slot="reference">
					<el-button size="small" icon="el-icon-bank-card">任务</el-button>
				</el-badge>
			</el-popover>
      <el-popover placement="top" trigger="click">
        <div class="btm-r-pop-info">
          <div class="btm-r-pop-info-box" v-for="(item,index) in messageList">
            <div class="btm-r-pop-info-con">
              <div class="btm-r-pop-info-list">
                <div class="btm-r-pop-info-list-name">{{item.title}}</div>
                <div class="btm-r-pop-info-list-text">{{item.content}}</div>
              </div>
            </div>
            <div class="btm-r-pop-info-btm">
              <el-link type="success" @click="selectMessageById(item.id)">标记已读</el-link>
            </div>
          </div>
        </div>
        <el-badge :value="messageCount" slot="reference">
          <el-button size="small" icon="el-icon-chat-line-round">消息</el-button>
        </el-badge>
      </el-popover>
			<!-- 警报铃 必须放在这,放在别处不好使 -->
			<div class="bell" v-if="eventWarn" @click="updateAlertFalse">
				<div class="dot"></div>
				<div class="pulse"></div>
				<div class="pulse-big"></div>
			</div>
			<!--<el-badge type="primary">-->
				<!--<el-button size="small" icon="el-icon-bell" @click="updateAlertFalse">警报</el-button>-->
			<!--</el-badge>-->
			<el-badge type="warning">
				<el-button size="small" icon="el-icon-refresh-right" @click="refresh">刷新</el-button>
			</el-badge>
		</div>
		<!-- 事件详情弹层 -->
		<el-dialog title="事件详情" :visible.sync="eventDialog" v-if="eventDialog" customClass="customWidth" append-to-body
			@close="cancelEventShow()">
			<div class="dia-event-info">
				<el-row>
					<!-- 左侧 -->
					<el-col :span="18" class="dia-left">
						<div ref="imageTofile" style="height: 75vh;">
							<!-- 应急预案 -->
							<div class="dia-left-top">
								<div class="dia-left-top-tit">应急预案</div>
								<div class="dia-left-top-carousel">
									<el-carousel height="30px" direction="vertical" :interval="2000">
										<el-carousel-item v-if="visuForestCloudYuAnBo!=null">
											<a
												:href="visuForestCloudYuAnBo.fileUrl">{{ visuForestCloudYuAnBo.reserveName }}</a>
										</el-carousel-item>
										<el-carousel-item v-else>
											<a href="#">未选预案</a>
										</el-carousel-item>
									</el-carousel>
								</div>
							</div>
							<!-- 应急预案end -->
							<!-- 地图 -->
							<supermapTaskDialog ref="supermapTaskDialog" style="position: absolute; top:0;left: 0;"
								:mapDiv="'taskDialogSuperMap'"
								:mapSite="{zoom:12,doubleClickZoom:false,dragging:false,scrollWheelZoom:false}"
								:codes="['9fa5']" :isSideBySide="false" :isdynamicPlotting="false" />
							<!-- 地图end -->
						</div>
					</el-col>
					<!-- 左侧end -->
					<!-- 右侧 -->
					<el-col :span="6" class="dia-right">
						<div class="e-right">
							<div class="forthis1-1">
								<dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']"
									style="padding-bottom:1rem ;">
									<div class="i-list-con">
										<div class="this-con">
											<div class="z-info-list" style="margin-top: 0;">
												<el-timeline>
													<el-timeline-item color="#2bacf7" :timestamp="item.createTime"
														placement="top" v-for="(item,index) in eventLogList">
														<el-card style="width: 40vh">
															<div class="z-info-list-con">
																<div class="user-and-time flex-d">
																	<span>{{ item.createName }}</span>
																	<span
																		v-if="eventLogList.length - 1 == index&&address!=null&&address!=''"><i
																			class="el-icon-location"></i>
																		{{ address }}</span>
																	<span v-else></span>
																</div>
																<div class="z-info">
																	<div class="this-con-list-info">
																		{{ item.logContent }}
																	</div>
																	<div>
																		<router-link to="#"
																			@click.native="clickFile(itemfile.fileUrl,itemfile.fileName,itemfile.fileType)"
																			v-for="(itemfile,indexfile) in item.fileVOs">
																			<el-image :src="itemfile.fileUrl"
																				v-if="itemfile.fileType=='image'"
																				:preview-src-list="assetTypeAnImage(item.fileVOs)"
																				style="width:3rem; height:3rem;margin: 2px;"
																				:title="itemfile.fileName">
																			</el-image>
																			<img v-else-if="itemfile.fileType=='video'"
																				style="width:3rem; height:3rem;margin: 2px;"
																				:src="require('@/assets/fileTypeImage/mp4.png')"
																				:title="itemfile.fileName">
																			</img>
																			<img v-else-if="itemfile.fileType=='word'"
																				style="width:3rem; height:3rem;margin: 2px;"
																				:src="require('@/assets/fileTypeImage/word.png')"
																				:title="itemfile.fileName">
																			</img>
																			<img v-else-if="itemfile.fileType=='excel'"
																				style="width:3rem; height:3rem;margin: 2px;"
																				:src="require('@/assets/fileTypeImage/excel.png')"
																				:title="itemfile.fileName">
																			</img>
																			<img v-else
																				style="width:3rem; height:3rem;margin: 2px;"
																				:src="require('@/assets/fileTypeImage/file.png')"
																				:title="itemfile.fileName">
																			</img>
																		</router-link>
																	</div>
																</div>
															</div>
														</el-card>
													</el-timeline-item>
												</el-timeline>
											</div>
										</div>
									</div>
								</dv-border-box-7>
							</div>
							<!--              <div class="forthis">-->
							<!--                <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">-->
							<!--                  <div class="i-list-con">-->
							<!--                    <div class="this-con h-25 no-padding">-->
							<!--                      <div class="z-info-list" style="margin-top: 0;">-->
							<!--                        <div class="z-info-btm-grp">-->
							<!--                          <div class="z-info-btm-grp-top">-->
							<!--                            <div class="z-info-btm-grp-left">-->
							<!--                              &lt;!&ndash;                                <el-button size="small" icon="el-icon-s-flag">责任制&ndash;&gt;-->
							<!--                              &lt;!&ndash;                                </el-button>&ndash;&gt;-->
							<!--                              <el-button size="small" icon="el-icon-upload" @click="showEventLogUpload()">上传-->
							<!--                              </el-button>-->
							<!--                              <el-button size="small" icon="el-icon-download" @click="toImage()">保存-->
							<!--                              </el-button>-->
							<!--                            </div>-->
							<!--                            <div class="z-info-btm-grp-right">-->
							<!--                              <el-button size="small" icon="el-icon-mic">会议-->
							<!--                              </el-button>-->
							<!--                            </div>-->
							<!--                          </div>-->
							<!--                        </div>-->
							<!--                      </div>-->
							<!--                    </div>-->
							<!--                  </div>-->
							<!--                </dv-border-box-7>-->
							<!--              </div>-->
						</div>

					</el-col>
					<!-- 左侧end -->
				</el-row>
			</div>
		</el-dialog>
		<!-- 任务选择领取部门弹层 -->
		<el-dialog title="选择部门" :visible.sync="showDeptConfirm" v-if="showDeptConfirm" width="30%" append-to-body
			@close="cancelEventConfirm()">
			<el-form label-width="80px">
				<el-form-item label="选择部门">
					<el-select v-model="deptName" multiple placeholder="请选择部门" class="m-r-1rem" @change="setValue">
						<el-option v-for="item in deptOptions" :key="item.taskDeptId" :label="item.taskDeptName"
							:value="{value:item.taskDeptId,label:item.taskDeptName}">
							<!--:disabled="item.eventStatus=='未处理' ? false:true"-->
						</el-option>
					</el-select>
				</el-form-item>
				<el-button size="mini" type="primary" v-if="taskStatusButton=='lq'"
					@click="receiveTask(taskId,eventCode)">领取
				</el-button>
				<el-button size="mini" type="primary" v-if="taskStatusButton=='jj'"
					@click="refusedTask(taskId,eventCode)">拒绝
				</el-button>
			</el-form>
		</el-dialog>
		<!-- 图片，视频预览 -->
		<el-dialog title="视频预览" :visible.sync="showTcPlayer" width="40%" append-to-body>
			<TcPlayer ref="TcPlayer" :playVideo="playVideo" :widthHeigt="[100,100]"></TcPlayer>
		</el-dialog>
	</div>
</template>

<script>
import {
  selectTaskBO,
  getEventDetail,
  selectTaskDtpts,
  receiveTask,
  refusedTask,
  selectMessageCount,
  selectMessageList,
  selectMessageById, getEventPush
} from '@/api/forest'
	import {
		selectFarmByDeptId
	} from '@/api/vBottomMenu'
	import {
		treeselectAll as deptTreeselect
	} from '@/api/system/dept'
	import supermapTaskDialog from '@/components/supermap' //超图
	import TcPlayer from '@/components/TcPlayer' //视频预览
  import Cookies from 'js-cookie';

	export default {
		components: {
			supermapTaskDialog,
			TcPlayer
		},
		watch: {
			filterbanText(val) {
				console.log(this.$refs)
				this.$refs.banDept.filter(val)
			},
			filterchangText(val) {
				console.log(this.$refs)
				this.$refs.changDept.filter(val)
			}
		},
		data() {
			return {
				playVideo: '', //视频预览地址
				showTcPlayer: false, //视频预览弹窗
				filterbanText: '',
				filterchangText: '',
				filterbanList: [],
				filterchangList: [],
				filterchangListAll: [],
				eventId: null,
				eventCode: null,
				longitude: null,
				latitude: null,
				eventLogList: [], //事件详情日志
				eventDialog: false, //事件详情弹层
				taskStatusButton: null, //任务按钮
				visuForestCloudYuAnBo: null,
				address: null, //事件上报地址

				taskId: null, //任务ID
				showDeptConfirm: false, //任务领取选择部门弹窗
				deptOptions: [], //任务领取部门列表
				centerTaskTaskDepts: [], //任务领取部门
				deptName: [], //任务领取部门

				taskCount: 0, //任务数量
				taskList: 0, //任务列表
        weosocket: false,
        websock: '',
        wsuri:'ws://192.168.3.60:10012/messagePush/',
        wsuri2:'ws://192.168.3.60:10005/taskPush/',
        setIntervalWesocketPush: null,
        websockSid: {
          userId: ''
        },
        messageCount: 0, //消息数量
        messageList: [], //消息列表

				btmTipIndent: '', //图例收起弹出
				eventLocationVisible: false,
				showChild: false,
				showBanChild: false, //林斑
				showChangChild: false, //林场
				fastMenu: [{
						name: '事件定位',
						icon: 'iconfont sj-icon-sjdw',
						click: 'eventLocation'
					},
					// {
					// 	name: '图层切换',
					// 	icon: 'iconfont sj-icon-tcqh',
					// 	click: 'layerSwitching'
					// },
					{
						name: '测量工具',
						icon: 'iconfont sj-icon-clgj',
						click: 'editableLayers'
					},
					// {
					// 	name: '林班',
					// 	icon: 'iconfont sj-icon-lbzy',
					// 	click: 'forestban'
					// },
          //
					// {
					// 	name: '林场',
					// 	icon: 'iconfont sj-icon-lczy',
					// 	click: 'forestchang'
					// },
					{
						name: '电视墙',
						icon: 'el-icon-s-grid',
						click: 'TVWall'
					}
				],
				deptOptionsLiandong: [],
				data: [{
					label: '一级 1',
					children: [{
						label: '二级 1-1',
						children: [{
							label: '三级 1-1-1'
						}]
					}]
				}, {
					label: '一级 2',
					children: [{
						label: '二级 2-1',
						children: [{
							label: '三级 2-1-1'
						}]
					}, {
						label: '二级 2-2',
						children: [{
							label: '三级 2-2-1'
						}]
					}]
				}, {
					label: '一级 3',
					children: [{
						label: '二级 3-1',
						children: [{
							label: '三级 3-1-1'
						}]
					}, {
						label: '二级 3-2',
						children: [{
							label: '三级 3-2-1'
						}]
					}]
				}],

				defaultProps: {
					children: 'children',
					label: 'label'
				},
				banCheckList: [], //林班
				changCheckList: [], //林场
				searchFB: '',
				filterchang: '', //林场搜索
				btmCurrent: '',

				eventWarn: false, //webSocket事件问题警报标记
			}
		},
    beforeDestroy() {
      // this.websock.close();
    },
		created() {
			/** 查询部门树结构 */
			deptTreeselect().then(response => {
				this.deptOptionsLiandong = response.data
			})
    },
    mounted() {
      this.websockSid.userId=Cookies.get("userId")
    },
    methods: {
			filterbanNode(value, data) {
				//树搜索
				if (!value) return true
				return data.label.indexOf(value) !== -1
			},
			filterchangNode(value, data) {
				//树搜索
				if (!value) return true
				return data.label.indexOf(value) !== -1
			},
			handlechangNodeClick(node, data, value) {
				//获取林场列表
				this.filterchang = ''
				selectFarmByDeptId({
					deptId: node.id
				}).then(res => {
					this.filterchangList = res.data
					this.filterchangListAll = res.data
				})
			},
			// 返回图片列表
			assetTypeAnImage(filePath) {
				let imageList = []
				if (filePath != null && filePath.length > 0) {
					for (let i = 0; i < filePath.length; i++) {
						if (filePath[i].fileType == 'image') {
							imageList.push(filePath[i].fileUrl)
						}
					}
				}
				return imageList
			},
			clickFile(fileUrl, fileName, fileType) {
				if (fileType == 'image') {
					return
				} else if (fileType == 'video') {
					this.showTcPlayer = true
					setTimeout(() => {
						this.playVideo = fileUrl
					}, 500)
				} else {
					let a = document.createElement('a')
					a.download = fileName
					a.href = fileUrl
					a.target = '_blank'
					a.click()
				}
			},
			setValue(event) {
				this.centerTaskTaskDepts = []
				//签收选择部门
				if (event != null && event.length > 0) {
					for (let i = 0; i < event.length; i++) {
						if (event[i].label != undefined && event[i].value != undefined) {
							this.centerTaskTaskDepts.push({
								taskDeptId: event[i].value,
								taskDeptName: event[i].label
							})
						}
					}
				}
			},
			receiveTask(taskId, eventCode) {
				let param = {
					taskId: taskId,
					eventCode: eventCode,
					centerTaskTaskDepts: this.centerTaskTaskDepts
				}
				receiveTask(param).then(res => {
					//任务领取
					if (res.code == 200) {
						this.$message.success(`任务领取成功!`)
						this.deptOptions = []
						this.deptName = []
						this.centerTaskTaskDepts = []
						//刷新任务列表
						this.selectTaskList()
						this.showDeptConfirm = false
					}
				})
			},
			refusedTask(taskId, eventCode) {
				let param = {
					taskId: taskId,
					eventCode: eventCode,
					centerTaskTaskDepts: this.centerTaskTaskDepts
				}
				refusedTask(param).then(res => {
					//任务拒绝
					if (res.code == 200) {
						this.$message.success(`任务拒绝成功!`)
						this.deptOptions = []
						this.deptName = []
						this.centerTaskTaskDepts = []
						//刷新任务列表
						this.selectTaskList()
						this.showDeptConfirm = false
					}
				})
			},
			selectTaskDtpts(taskId, eventCode, state) {
				this.taskId = taskId
				this.eventCode = eventCode
				selectTaskDtpts({
					taskId: taskId
				}).then(res => {
					//任务领取部门列表
					if (res.code == 200) {
						this.deptOptions = res.data
						this.taskStatusButton = state
						this.showDeptConfirm = true
					}
				})
			},
			cancelEventShow() {
				console.log('关闭事件弹窗')
				this.eventCode = null
				this.eventLogList = []
			},
			cancelEventConfirm() {
				console.log('关闭任务选择部门')
				this.eventCode = null
				this.deptOptions = []
				this.deptName = []
				this.centerTaskTaskDepts = []
			},
			showEventDialog(eventCode) {
				this.eventCode = eventCode
				let that = this
				//获取事件详情
				getEventDetail({
					eventCode: eventCode
				}).then(res => {
					this.eventDialog = true
					this.eventLogList = res.data.eventlog
					this.visuForestCloudYuAnBo = res.data.visuForestCloudYuAnBo //应急预案
					this.address = res.data.catalogue.address
					this.eventType = res.data.catalogue.eventType
					this.eventId = res.data.catalogue.id
					this.longitude = res.data.catalogue.longitude
					this.latitude = res.data.catalogue.latitude
					let markersMap = {
						lng: 124.59,
						lat: 43.02,
						icon: 'marker',
						bindPopupHtml: '',
						click: '',
						parameter: '',
						keepBindPopup: false,
						isAggregation: false,
						radius: 0
					}

					if (res.data.catalogue.eventStatusValue == 'forest_event_status_1' && res.data.catalogue
						.urgeCount == 0) {
						markersMap.icon = 'sj-icon-map-xinshangbao'
					}
					if (res.data.catalogue.eventStatusValue == 'forest_event_status_1' && res.data.catalogue
						.urgeCount > 0) {
						markersMap.icon = 'sj-icon-map-cuiban'
					} else if (res.data.catalogue.eventStatusValue == 'forest_event_status_2') {
						markersMap.icon = 'sj-icon-map-qianshou'
					} else if (res.data.catalogue.eventStatusValue == 'forest_event_status_5') {
						markersMap.icon = 'sj-icon-map-banjie'
					} else if (res.data.catalogue.eventStatusValue == 'forest_event_status_6') {
						markersMap.icon = 'sj-icon-map-guidang'
					}
					markersMap.lng = res.data.catalogue.longitude
					markersMap.lat = res.data.catalogue.latitude
					if (res.data.eventdetail != null && res.data.eventdetail.length > 0 && res.data.eventdetail[0]
						.fireRadius != null && res.data.eventdetail[0].fireRadius != '' && res.data.eventdetail[0]
						.fireRadius > 0) {
						markersMap.radius = res.data.eventdetail[0].fireRadius
					}
					setTimeout(() => {
						// that.$refs.supermapTaskDialog.dynamicPlotting()//弹出动态绘制窗口，防止截图位置改变
						that.$refs.supermapTaskDialog.clearM(false)
						that.$refs.supermapTaskDialog.setMarkersRadius([markersMap])
						that.$refs.supermapTaskDialog.dropLocation(res.data.catalogue.latitude, res.data
							.catalogue.longitude)
					}, 1000)
				})
			},
      initWebSocket(wsurl,userId) {        //初始化weosocket
        //const wsuri = 'ws://127.0.0.1:10003/eventPush/' + userId + '/' + eventTypeDl + '/' + eventType
        const wsuri = wsurl+userId
        // const wsuri = 'ws://172.28.20.82:10012/taskPush/'+userId
        this.websock = new WebSocket(wsuri)
        console.log('建立websocket连接'+wsuri)
        this.websock.onopen = this.websocketonopen
        this.websock.onmessage = this.websocketonmessage
        this.websock.onerror = this.websocketonerror
      },
    websocketonopen() { //连接建立之后执行send方法发送数据
      console.log('websocket连接成功')
      this.weosocket = true
      this.sendPing()
    },
    websocketonerror() { //连接建立失败重连
      this.initWebSocket(this.wsuri,this.websockSid.userId)
    },
    websocketonmessage(e) { //数据接收
      console.log('接收数据', e.data)
      // let data = "{\"fromId\":\"farming\"}";
        // 处理收到的消息
        this.handleWebSoceketEvent(e.data)
    },
      handleWebSoceketEvent(val) {
        let that = this
        let data = JSON.parse(val)
        console.log('数据数据数据数据',data)
        /**
         * that.markersList.filter( item => data.eventCode == item.parameter).length == 0 如果地图中不存在当前事件则添加
         * eventPush: 事件列表消息
         * */
        let  message=data.centermessageTPushrecord
        let message2=data.centertaskTTask
        if (null!=message)
        {
          console.log(message)
          this.messageList.push(message)
          this.messageCount++
        }else if (null!=message2)
        {
          this.taskList.push(message2)
          this.taskCount ++
          }



        // if (data.tag == "eventPush" && that.markersList.filter( item => data.eventCode == item.parameter).length == 0) {
        //   getEventPush({eventCode: data.eventCode}).then((res) => {
        //     if (res.data != undefined) {
        //       //插入到第一条
        //       this.eventList.unshift(res.data)
        //       // 插入后删除最后一条 保证列表中为10条数据
        //       if (this.eventList.length > 9)
        //         this.eventList.splice(10, 1)
        //       // 将收到的数据在地图上添加
        //       this.getWebSocketEvent(res.data)
        //     }
        //   })
        // }

        console.log(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 = 60000, ping = {
        'fromId': 'farming'
      }) {
        clearInterval(this.setIntervalWesocketPush)
        this.setIntervalWesocketPush = setInterval(() => {
          if (this.weosocket) {
            this.websock.send(JSON.stringify(ping))
          } else {
            // this.initWebSocket()
          }
        }, time)
      },

			selectTaskList: async function() {
				//获取任务列表
				selectTaskBO().then(res => {
					this.taskList = res.data
					this.taskCount = res.data.length
				})
        this.initWebSocket(this.wsuri2,this.websockSid.userId)
			},
      selectMessageById(id) {
        selectMessageById(id).then(response => {
          /** 获取消息列表 */
          this.selectMessageList();
        });
      },
      /** 获取消息个数 */
      selectMessageCount(){
        selectMessageCount(Cookies.get("userId")).then(response => {
          this.messageCount = response.data
        });
      },
      /** 获取消息列表 */
      selectMessageList(){
        selectMessageList(Cookies.get("userId")).then(response => {
          this.messageList = response.data
          this.messageCount = response.data.length
        });
        this.initWebSocket(this.wsuri,this.websockSid.userId)
      },
			handleCheckedCitiesChangeBan(value) {
				this.choseLayerSwitchingList(this.banCheckList)
			},
			handleCheckedCitiesChangeChang(value) {
				this.choseLayerSwitchingList(this.changCheckList)
			},
			refresh() {
				window.location.reload()
			},
			showDialog(click) {
				window.showDialog(click)
			},
			choseLayerSwitching(url, isClear) {
				window.choseLayerSwitching(url, isClear)
			},
			choseLayerSwitchingList(urlList) { //选择图层(传递数组)
				window.choseLayerSwitchingList(urlList)
			},
			forestban() {
				window.forestban()
				console.log('林班')
			},
			forestchang() {
				window.forestchang()
				console.log('林场')
			},
			closeBanChild() {
				this.banCheckList = []
				this.showBanChild = false
			},
			closeChangChild() {
				this.changCheckList = []
				this.showChangChild = false
			},
			//图例收起弹出
			btmIndent() {
				if (this.btmTipIndent == '') {
					this.btmTipIndent = 'btm-tip-to-right'
				} else if (this.btmTipIndent == 'btm-tip-to-right') {
					this.btmTipIndent = ''
				}
			},
			searchFilterchang(filterchang) {
				//林场列表搜索
				let searchFilterchangnew = []
				if (filterchang != null && filterchang != '') {
					for (var i = 0; i < this.filterchangListAll.length; i++) {
						if (this.filterchangListAll[i].farmName.indexOf(filterchang) > -1) {
							searchFilterchangnew.push(this.filterchangListAll[i])
						}
					}
					this.filterchangList = searchFilterchangnew
				} else {
					this.filterchangList = this.filterchangListAll
				}
			},

			//标记警报
			updateAlert() {
				this.eventWarn = true;
			},
      updateAlertFalse(){
        this.eventWarn = false;
        this.$emit('stopAudio');
      }
		}
	}
</script>

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

	.dotClass {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		display: block;
		margin: -5px;
	}

	.redClass {
		background-color: red;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		display: block;
	}

	.btm-box {
		width: 100%;
		height: auto;
		background: linear-gradient($btmMemu);
		position: absolute;
		z-index: 999;
		bottom: 0;
		height: 2.5rem;
		display: flex;
		align-items: center;


		z-index: 9999;

		.light {
			position: absolute;
			top: -.5rem;
		}

		.btm-left {
			position: absolute;
			font-size: .7rem;
			height: 2rem;
			line-height: 2rem;
			border: 1px $searchBorder;
			border-left: none;
			color: $inBlue;
			display: flex;
			-webkit-transform: translateX(-21rem) !important;
			transform: translateX(-21rem) !important;
			transition: all 0.5s ease-in-out !important;

			.btm-legend {
				height: 2rem;
				text-align: center;
				color: $inBlue;
				padding: 0 .5rem;
				cursor: pointer;

			}

			.btm-legend:hover {
				background-color: $tipHover;
				color: $white;
			}

			.btm-left-tip {
				display: flex;
				align-items: center;
				margin: 0 .5rem;

				.btm-left-block {
					width: 1rem;
					height: 1rem;
					margin-right: .3rem;
					border-radius: .2rem;


				}

				.btm-left-state-c1 {
					background-color: $eventStateColor-xsb;
				}

				.btm-left-state-c2 {
					background-color: $eventStateColor-cb;
				}

				.btm-left-state-c3 {
					background-color: $eventStateColor-yqs;
				}

				.btm-left-state-c4 {
					background-color: $eventStateColor-ld;
				}

				.btm-left-state-c5 {
					background-color: $eventStateColor-bj;
				}

				.btm-left-state-c6 {
					background-color: $eventStateColor-tb;
				}


			}

		}

		.btm-tip-to-right {
			-webkit-transform: translateX(0) !important;
			transform: translateX(0) !important;
			transition: all 0.5s ease-in-out !important;
		}

		.bottom-menu-normal {
			max-width: 70%;
			padding: 0 3rem;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 0;
			z-index: 999;
			border-radius: 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			// background: url(../assets/images/integrated/btm-menu.png) center no-repeat;
			// background-size: cover;

			.btm-m-con {
				position: relative;
				color: $inBlue;
				font-size: .5rem;
				padding: .6rem 1rem;
				display: flex;
				align-items: center;
				justify-content: center;
				-webkit-transform: translateY(0);
				transform: translateY(0);
				transition: all 0.2s ease-in-out;
				cursor: pointer;
				white-space: nowrap;

				i {
					font-size: 1rem;
					color: $inBlue;
					text-shadow: 0 0 10px rgba($color: $inBlue, $alpha: .6);
					margin-right: 0.2rem;
				}

				.nav-child {
					text-shadow: none !important;
					position: absolute;
					bottom: 3rem;
					border: 1px solid saddlebrown;
					padding: .5rem;
					-moz-border-radius-topleft: 0;
					-moz-border-radius-bottomright: 0;
					background-color: $barBgc;
					box-shadow: $barShadow;
					border: 1px $barBorder;
					left: 50%;
					transform: translateX(-50%);
					color: $inBlue;

					.nav-child-btn {
						padding: .2rem;
					}

					.forestban {
						display: flex;

						.forestban-con {
							width: 20rem;
							height: 20rem;
							overflow-y: scroll;
							border: 1px solid rgba(51, 70, 127, 0.7);
						}

						.forestban-right {
							width: 10rem;
							height: 20rem;
							overflow-y: scroll;
							padding: 0 1rem;

							.el-checkbox-group {
								display: flex;
								flex-direction: column;

								label {
									padding: .4rem 0;
								}

								.el-checkbox {
									color: $white;
								}
							}
						}
					}

				}
			}

			.btm-m-con:hover,
			.on {
				text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
				-webkit-transform: translateX(0.2rem);
				transform: translateX(0.2rem);
				transition: all 0.2s ease-in-out;

				.nav-child {
					text-shadow: none !important;
				}

				i {
					color: $inBlueHover;
					text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
				}
			}

		}

		.btm-right {
			position: absolute;
			font-size: .7rem;
			height: 2rem;
			display: flex;
			right: 1rem;
			align-items: center;

			.el-badge {
				display: flex !important;
				margin-left: 1.5rem;

				button {
					padding: 0 .3rem;
					height: 1.5rem;
					background-color: #112543;
					color: $inBlue;
					border: 1px $searchBorder;
				}

			}

			.el-badge:hover {
				-webkit-transform: translateX(0.1rem);
				transform: translateX(0.1rem);
				transition: all 0.2s ease-in-out;

				button {
					text-shadow: 0 0 15px rgba($color: $inBlueHover, $alpha: 1.0);
				}

			}
		}

	}

	.btm-r-pop-info {
		display: flex;
		width: 35rem;
		flex-direction: column;
		max-height: 85vh;
		min-height: fit-content;
		overflow-y: scroll;
		padding: 1rem;

		.btm-r-pop-info-box:hover {
			box-shadow: $shadowListHover;
			color: $inBlue;
			border: 1px $countBorder;
		}

		.btm-r-pop-info-box {
			width: 100%;
			display: flex;
			flex-direction: column;
			background-color: $deepBG;
			padding: .5rem;
			border-radius: .5rem;
			color: $inBlue;
			border: 1px $searchBorder;
			margin-bottom: 1rem;

			.btm-r-pop-info-tit {
				display: flex;
				padding: .5rem;

				h3 {
					font-weight: bolder;
				}

			}

			.btm-r-pop-info-con {
				padding: .5rem;
				display: flex;
				flex-direction: column;
				border-top: 1px $searchBorder;
				border-bottom: 1px $searchBorder;

				.btm-r-pop-info-list {
					display: flex;
					padding: .3rem 0;

					.btm-r-pop-info-list-name {
						width: 3.6rem;
						text-align: right;
						margin-right: 1rem;
					}

					.btm-r-pop-info-list-text {}
				}
			}

			.btm-r-pop-info-btm {
				padding: .5rem;
				display: flex;
				justify-content: space-between;

				.btm-r-pop-info-btm-btn {
					button {
						padding: .5rem;
					}
				}
			}
		}


	}

	//警铃
	.fire-tip {
		text-align: center;
		width: 100%;
		font-size: 44px;
		color: #ff0000;
		text-shadow: 0 0 1px #ffffff;
	}

	.fire-address {
		text-align: center;
		width: 100%;
		font-size: 14px;
		color: rgba(255, 255, 255, 0.8);
		margin-top: 44px;
	}

	.fire-handle {
		display: block;
		text-align: center;
		background: #00BFF0;
		color: #ffffff;
		border-radius: 20px;
		font-size: 14px;
		width: 80px;
		height: 40px;
		line-height: 40px;
		margin: 24px auto;
		text-decoration: none
	}

	.fire-handle:hover {
		background: #06a2ca;
	}

	.bell {
		position: absolute;
		right: 10px;
		bottom:-20px;
		width: 100%;
		height: 320px;
		z-index: 999;
	}

	.bell canvas {
		display: block;
		position: absolute;
		left: 0;
		top: -9px;
	}

	/* 保持大小不变的小圆圈  */
	.dot {
		position: absolute;
		width: 96px;
		height: 96px;
		left: 160px;
		top: 160px;
		background: url('../assets/images/bell.gif') no-repeat;
		// background: url(.) no-repeat;
		background-size: 100%;
		z-index: 200;
	}

	/* 产生动画（向外扩散变大）的圆圈  */
	.pulse,
	.pulse-big {
		position: absolute;
		width: 420px;
		height: 420px;
		border: 2px solid #EF2D02;
		background: rgba(239, 45, 2, 0.8);
		border-radius: 50%;
		z-index: 100;
		opacity: 0;
	}

	.pulse {
		background: rgba(239, 45, 2, 0.6) !important;
		-webkit-animation: warn 0.9s ease-out;
		-moz-animation: warn 0.9s ease-out;
		animation: warn 0.9s ease-out;
		-webkit-animation-iteration-count: infinite;
		-moz-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		box-shadow: 1px 1px 30px #EF2D02;
	}

	.pulse-big {
		background: rgba(239, 45, 2, 0.6) !important;
		-webkit-animation: warn1 0.9s ease-out;
		-moz-animation: warn1 0.9s ease-out;
		animation: warn1 0.9s ease-out;
		-webkit-animation-iteration-count: infinite;
		-moz-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		box-shadow: 1px 1px 30px #EF2D02;
	}

	@keyframes warn {
		0% {
			-moz-transform: scale(0);
			transform: scale(0);
			opacity: 1;
		}

		100% {
			-moz-transform: scale(1);
			transform: scale(1);
			opacity: 0;
		}
	}

	@keyframes warn1 {
		0% {
			-o-transform: scale(0);
			transform: scale(0);
			opacity: 1;
		}

		100% {
			-o-transform: scale(0.6);
			transform: scale(0.6);
			opacity: 0;
		}
	}
</style>