Project_yhfu/src/views/forest.vue

<!--可视化公共模板 林业-->
<template>
	<div class="visual-con">
		<!--头部-->
		<vheader></vheader>
		<!--主体-->
		<div class="visual-body">
			<!-- 左侧 -->
			<div class="leftbar" :class="indentleft" ref="left">
				<div class="forthis">
					<div class="this-title">
						<span>基本情况</span>
					</div>
					<div class="i-list-con h-9">
						<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>
				</div>
				<div class="forthis">
					<div class="this-title">
						<span>态势感知</span>
						<!-- <span>45</span> -->
					</div>
					<div class="i-list-con h-25">
						<div class="d-l-con-icon">
							<div class="icon-con w-33 m-btm-no" v-for="(item,index) in visuForestCloudMapDeviceBOList"
								v-on:click="showDevice(item.deviceType)">
								<div class="icon icon-dot"></div>
								<div class="icon-text">
									<h6>{{item.deviceCount}}</h6>
									<h5>{{item.deviceName}}</h5>
								</div>
							</div>
						</div>
						<!-- 横向柱状 echart -->
						<div id="camera-chart" style="width: 100%;height:18.3vh;"></div>
					</div>
				</div>
				<div class="forthis">
					<div class="this-title">
						<span>人员分布</span>
						<!-- <span>45</span> -->
					</div>
					<div class="i-list-con h-25">
						<div id="personnel-chart" style="width: 100%;height:12vh;"></div>
						<div class="d-l-con-icon">
							<div class="icon-con w-50"  v-for="(item,index) in visuForestCloudRYBO" v-if="index%2==0">
								<div class="icon icon-mid el-icon-user"></div>
								<div class="icon-text">
									<h5>{{item.job}}</h5>
									<h6>{{item.number}}</h6>
								</div>
							</div>
							<div class="icon-con w-50  m-btm-no"  v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0">
								<div class="icon icon-mid el-icon-user"></div>
								<div class="icon-text">
                  <h5>{{item.job}}</h5>
                  <h6>{{item.number}}</h6>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 地图 -->
			<supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" :mapSite="{doubleClickZoom:false}"
				:codes="['9fa5']" :isSideBySide="false" @preview="preview" @showEventInfo_notProcessed="showEventInfo_notProcessed" @showEventInfo_Processed="showEventInfo_Processed"></supermap>
			<!-- 右侧 -->
			<div class="rightbar" :class="indentright" ref="right">
				<div class="forthis">
					<div class="this-title">
						<span>今日事件</span>
						<!-- <span>23</span> -->
					</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" 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" 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 id="event-chart" style="width: 100%;height:26.2vh;"></div>
						<div class="h-19 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>

				</div>

				<!-- 	<div class="forthis">
					<div class="this-title">
						<span>资源库</span>
						<span>45</span>
					</div>
					<div class="i-list-con h-25">
						<div class="d-l-con">
							<div class="icon-con flex-d w-33">
								<div class="icon icon-mid el-icon-user"></div>
								<h3>取水口</h3>
							</div>
							<div class="icon-con flex-d w-33">
								<div class="icon icon-mid el-icon-user"></div>
								<h3>取水口</h3>
							</div>
							<div class="icon-con flex-d w-33">
								<div class="icon icon-mid el-icon-user"></div>
								<h3>取水口</h3>
							</div>
							<div class="icon-con flex-d w-33">
								<div class="icon icon-mid el-icon-user"></div>
								<h3>取水口</h3>
							</div>
						</div>
					</div>
				</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="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="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 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>
	</div>
</template>

<script>
  /** ----------------------------------weosocket开始------------------------------------- */
  import Cookies from 'js-cookie'
  /** ----------------------------------weosocket结束------------------------------------- */

  import {
    getTodayEvent,getEventStatusList,getEventSourceList,getEventListByDeptIdList,updateCentereventTForestfireStatus,getForest
  } from '@/api/event'
  import {
    getBaseInfo,selectByeventCode,getWarm,updateDeptEventStatus,listByEventCode,selectCameraEventByCameraId,listCenterdataTAttachByBusId,selectchannelCodeByCameraId,selectFjsxt
  } 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 {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,
		},
		created() {
      /** ----------------------------------摄像头预览开始------------------------------------- */
      const DHWsInstance = DHWs.getInstance();
      this.ws = DHWsInstance;
      console.log(this.ws);
      /** ----------------------------------摄像头预览结束------------------------------------- */

      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
      window.showDialog=this.showDialog
	    window.choseLayerSwitching=this.choseLayerSwitching
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
    },
		mounted() {

      this.getBaseInfo()
      this.getTodayEvent()
			this.personnelChart()

      /** ----------------------------------weosocket开始------------------------------------- */
      this.initWebSocket();
      /** ----------------------------------weosocket结束------------------------------------- */

		},
		/** ----------------------------------weosocket结束------------------------------------- */
		data() {
			return {
		showChild:false,
        /** ----------------------------------weosocket开始------------------------------------- */
        websock : null,
        /** ----------------------------------weosocket结束------------------------------------- */

        /** ----------------------------------摄像头预览开始------------------------------------- */
        activePanel: 'key1',
        isLogin: false,
        cameraParams: [],
        /** ----------------------------------摄像头预览结束------------------------------------- */
        markersList:[],//点位列表
        cameraList:[],//摄像头列表
        visuForestCloudMapDeviceBOList:[],//设备列表
        visuForestCloudRYBO:[],//人员类型列表
        sourceData:[],
        todayEventCountList: [],//今日事件列表
        todayEventSourcetList: [],//今日事件列表
        todayEventCountDeptList: [],//事件分布
        todayEventCountTypeList: [],//事件分类
        eventChartData: [],//右侧eachar图表数据
				iframeBoo: true,
				open: false,
				iframeVue: null,
				eventInfoVisible_notProcessed: false,
        eventInfoVisible_Processed: false,
				eventInfoVisible2: false,
				activeName: 'info',
				radio: '1',
				forestInfo: '',//基本情况
        /** ----------------------------------事件弹窗开始------------------------------------- */
        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: [{
          value: 'bj',
          label: '办结'
        }, {
          value: 'zy',
          label: '支援'
        },
          {
            value: 'gd',
            label: '归档'
          }
        ],
				forestFarm: [{
						name: '双辽市',
						id: '',
						child: [{
								name: '叶赫林场',
								id: ''
							},
							{
								name: '石岭子林场',
								id: ''
							}
						]

					},
					{
						name: '梨树县',
						id: ''
					},
					{
						name: '伊通县',
						id: ''
					},
					{
						name: '铁东区',
						id: ''
					},
					{
						name: '铁西区',
						id: ''
					}
				],
				// 弹出层 基本信息
        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) {
        this.websock.close()
        this.websock = null
      }
    },
    /** ----------------------------------weosocket结束------------------------------------- */
		methods: {
      /** ----------------------------------weosocket开始------------------------------------- */
      initWebSocket() { //初始化weosocket
        var wsuri = 'ws://192.168.31.138:10012/websocket/' + Cookies.get('username')
        if ("WebSocket" in window) {
          this.websock = new WebSocket(wsuri);
          //数据接收
          this.websock.onmessage = function(e) {
            console.log(e.data);
          }
          //关闭
          this.websock.onclose = function(e) {
            console.log("connection closed (" + e.code + ")");
          }
          this.websock.onopen = function() {
            console.log("WebSocket连接成功");
          }
        }
        //连接发生错误的回调方法
        this.websock.onerror = function() {
          console.log("WebSocket连接发生错误");
        }
      },
      /** ----------------------------------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
          }
        }
      },
      //选择图层
      choseLayerSwitching(url) {
        this.$refs.supermap.layerSwitching(url, true);
      },
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */



			//态势感知chart
			cameraChat() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = echarts.init(document.getElementById('camera-chart'))
				// 绘制图表
				const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848'];
				myChart.setOption({
					dataset: {
						source: this.sourceData,
					},
					tooltip: {
						trigger: 'item',

					},
					grid: {
						top: "5%",
						left: "2%",
						// right: "4%",
						bottom: '-15%',
						width: '75%',
						containLabel: true,
					},
					xAxis: {
						show: false,
						type: "value",
					},
					yAxis: {
						type: "category", // 不设置类目轴，抽离的dataset数据展示不出来
						inverse: true,
						axisLabel: {
							show: true,
							textStyle: {
								color: '#5deaff',
								fontSize: '12'
							}
						},
						splitLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
					},

					series: [{

						type: "bar",
						animationCurve: "easeOutBack",
						barWidth: 5,
						label: {
							show: true,
							position: "right",
							offset: [0, 0],
							color: "#88dfd5",
							// fontSize: "12",
							style: {
								fill: "#fff"
							},
						},
						backgroundBar: {
							show: true,
							style: {
								fill: "rgba(97,152,255,0.20)",
							},
						},
						barStyle: {
							stroke: "rgba(41,244,236,1)",
						},
						gradient: {
							color: ["rgba(41,244,236,1)", "rgba(41,244,236,0)"],
						},
						itemStyle: {
							label: {
								show: true
							},
							labelLine: {
								show: false,
							},
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
									offset: 0,
									color: "rgba(41,244,236,0)"
								},
								{
									offset: 1,
									color: "rgba(41,244,236,.5)"
								},
							]),
							borderColor: "#a2f9f7",
							shadowBlur: 16,
							shadowColor: "#a2f9f7",
						},
					}, ],
				});

			},
			//人员chart
			personnelChart() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = echarts.init(document.getElementById('personnel-chart'))
				// 绘制图表
				const handred = 100
				let point = 66
				myChart.setOption({
					title: [{
						text: '总人数：' + handred + '人' + '\n' + '\n' + '在线人数：' + point + '人',
						x: '48%',
						y: '25%',
						textStyle: {
							fontWeight: 'normal',
							color: '#02d6fc',
							fontSize: '14'
						}
					}],
					series: [{
						name: 'circle',
						type: 'pie',
						center: ['22%', '50%'],
						radius: ['60%', '70%'],
						clockWise: true,
						label: {
							normal: {
								position: "center",

							}
						},
						itemStyle: {
							normal: {
								label: {
									show: false
								},
								labelLine: {
									show: false
								}
							},
						},
						data: [{
							value: point,
							name: '当前在线',
							label: {
								show: true, //单独显示该数据项
								formatter: "{c}人",
								labelLayout: {
									top: '50%'
								},
								textStyle: {
									color: '#02d6fc',
									fontSize: 14
								}
							},
							itemStyle: {
								normal: {
									color: { // 完成的圆环的颜色
										colorStops: [{
											offset: 0,
											color: '#02d6fc' // 0% 处的颜色
										}, {
											offset: 1,
											color: '#367bec' // 100% 处的颜色
										}]
									},
									label: {
										show: false
									},
									labelLine: {
										show: false
									}
								}
							}
						}, {
							value: handred - point,
							itemStyle: {
								color: '#666',
							},
						}]
					}, ]
				})
			},
			//事件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
      },
      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
          })

          listByEventCode(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();
        })
      },
      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 += '<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 = ''
      },
      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
          cancelEventShow();
        })

      },
      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.eventInfoVisible_Processed = true;
        that.listEventPic = [];
        that.url = '';
        that.id=id;
        getForest(id).then(response => {
          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
          })

          listByEventCode(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() {
        let that = this
        that.sourceData = [];
        //获取左侧菜单列表
        getBaseInfo().then(res => {
          that.forestInfo = res.data.baseinfo.baseinfo;//基本情况
          that.cameraList = res.data.cameraList;
          that.visuForestCloudMapDeviceBOList=res.data.visuForestCloudMapDeviceBOList;

          if (res.data.VisuForestCloudTodaySjfbBO!=null&&res.data.VisuForestCloudTodaySjfbBO.length>0){
            for (let i = 0; i < res.data.VisuForestCloudTodaySjfbBO.length; i++) {
              let aa=[res.data.VisuForestCloudTodaySjfbBO[i].deptName,Number(res.data.VisuForestCloudTodaySjfbBO[i].deptCount)];
              that.sourceData.push(aa);
            }
          }
          that.visuForestCloudRYBO=res.data.visuForestCloudRYBO;
          this.cameraChat();
        })
      },
      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
          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 = [];
          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)
          }
        })
      },
      todayEventCountSetMarkers(eventStatus) {
        if(eventStatus=="event_event_status_3"){
          return
        }
        //点击今日事件前三个按钮列表
        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.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) {
        //点击今日事件后三个按钮列表
        let that = this
        getEventSourceList(eventSource).then(res => {
          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(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.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"
              }else if(res.data.eventList[i].eventStatus=="event_event_status_4"){
                markersMap.click = "showEventInfo_notProcessed"
              }
              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)
            }
          }
          setTimeout(() => {
            that.$refs.supermap.clearM(true)
            that.$refs.supermap.clearM(false)
            that.$refs.supermap.setMarkers(that.markersList)
          },500)
        })
      },
      todayEventByDeptIdList(deptId) {
        //点击事件分类
        let that = this
        getEventListByDeptIdList(deptId).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: '',
                keepBindPopup: false,
                isAggregation: false
              }
              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"
              }
              if(res.data.eventList.length>50){
                markersMap.isAggregation = true
              }
              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)
        })
      },
      showDevice(deviceType){
			  this.cameraMarkersList=[];
			  if(deviceType=="sxt"){
          this.$refs.supermap.clearM(true)
          this.$refs.supermap.clearM(false)
			    if(this.cameraList!=null&&this.cameraList.length>0){

            for (let i = 0; i < this.cameraList.length; i++) {
              let markersMap = {
                lng: 124.59,
                lat: 43.02,
                icon: 'camera',
                bindPopupHtml: '',
                click: 'preview',
                parameter: '',
                keepBindPopup: false,
                isAggregation: false
              }
              if(this.cameraList.length>50){
                markersMap.isAggregation = true
              }
              if(this.cameraList[i].channelCode!=null){
                markersMap.parameter=this.cameraList[i].channelCode.split(",");
              }else{
                markersMap.parameter=[];
              }
              markersMap.lng=this.cameraList[i].longitude;
              markersMap.lat=this.cameraList[i].latitude;
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' +this.cameraList[i].longitude + ',' +this.cameraList[i].latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>摄像头名称：' +this.cameraList[i].cameraName + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '</div>';
              this.cameraMarkersList.push(markersMap);
            }
            this.$refs.supermap.setMarkers(this.cameraMarkersList)
          }
        }

      },
      /** ----------------------------------摄像头预览开始------------------------------------- */
      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>