Project_yhfu/src/components/eventLocation.vue

<template>
  <div>
    <el-dialog title="事件定位" :visible.sync="eventLocationVisible" v-if="eventLocationVisible" width="80%"
               @close="cancelEventLocationShow()">
      <div class="event-info">
        <div class="event-info-top">
          <el-form>
            <div class="event-info-top-grp">
              <el-input placeholder="输入经度" v-model="longitude" class="m-l-none">
              </el-input>
              <el-input placeholder="输入纬度" v-model="latitude">
              </el-input>
              <el-button type="success" size="mini" @click="getNearEvent()">定位</el-button>
            </div>
          </el-form>
        </div>
        <div class="event-info-con">
          <div class="e-location-left">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="事件" name="event">
                <div class="forthis">
                  <div class="i-list-con overflow-y" style="height: 50vh;">
                    <div class="d-l-con d-evnet-list-con" v-for="(item,index) in eventList"
                         v-on:click="dropLocation(item.latitude,item.longitude)">
                      <!-- <img :src="" v-if="item.picturePath!=null&&item.picturePath!=''" class="event-list-img"> -->
                      <img :src="item.picturePath" v-if="item.picturePath!=null&&item.picturePath!=''"
                           class="event-list-img">
                      <img src="@/assets/images/visual/img-sample.png" v-else class="event-list-img">
                      <div class="event-list-text">
                        <h3>{{item.eventTitle}}</h3>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="探头" name="monitor">
                <div class="forthis">
                  <div class="i-list-con overflow-y" style="height: 50vh;">
										<span v-for="(item,index) in cameraList" v-on:click="dropLocation(item.latitude,item.longitude)">
											<div class="d-l-con" @click="">
												<div class="d-l-l-text">
													<i class="iconfont sj-icon-jkzx icon-sxt"></i>
													<h4>{{item.cameraName}}</h4>
												</div>
											</div>
										</span>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="e-location-right" style="height: 57.8vh;">
            <!-- 地图 -->
            <eventLocationSupermap ref="eventLocationSupermap" style="width: 100%;height: 57.8vh;"
                                   :mapDiv="'eventLocationMap'" :mapSite="{doubleClickZoom:false,zoom:8}"
                                   :codes="['9fa5']" :isSideBySide="false" @preview="preview"  @showEventInfo_notProcessed="showEventInfo_notProcessed" @showEventInfo_Processed="showEventInfo_Processed"></eventLocationSupermap>
          </div>
        </div>
      </div>
    </el-dialog>
    <!--事件弹层-->
    <div class="event-info">
      <el-dialog title="事件信息-未处理" :visible.sync="eventInfoVisible_notProcessed" v-if="eventInfoVisible_notProcessed" width="80%" hight="1000px" @close="cancelEventShow()" append-to-body>
        <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="eventInfoVisibleActiveName" @tab-click="handleClickNotProcessed" :before-leave="beforeLeave" >
          <el-tab-pane label="基础信息" name="info" >
            <div class="event-info-con">
              <div class="e-left">
                <div class="forthis">
                  <div class="i-list-con h-35">
										<span v-for="(information,index) in information" :key="index">
											<div class="d-l-con" >
												<div class="d-l-l-text">
													<i class="i-small"></i>
													<h4>{{information.name}}：</h4>
													<h4>{{information.content}}</h4>
												</div>
											</div>
										</span>
                  </div>
                </div>
                <div class="forthis d-map h-30">
                  <div class="this-title">
                    <span>涉事单位</span>
                  </div>
                  <div class="i-list-con h-26">
										<span v-for="(company,index) in listEventDept" :key="index">
											<div class="d-l-con" >
												<div class="d-l-l-text">
													<i class="i-small"></i>
													<h4>{{company.deptName}}</h4>
												</div>
												<div class="d-l-l-count"
                             :class="[company.eventStatus=='未处理'?'state-wcl':'state-wyc']">
<!--													{{['未处理','无异常'][company.state]}}-->{{company.eventStatus}}
												</div>
											</div>
										</span>
                  </div>
                </div>
              </div>
              <div class="e-center">
                <div class="forthis">
                  <div class="i-list-con h-35">
                    <el-image :src="url" :preview-src-list="listEventPic" class="img-company" style="height: 100%;" v-if="url!=''">
                    </el-image>
                  </div>
                </div>
                <div class="forthis h-30">
                  <div class="i-list-con h-26">
                    <el-image :src="item"
                              style="width:3.9rem; height:3rem;margin: 2px;"
                              v-for="(item,index) in listEventPic" @click="switchImage(item)">
                    </el-image>
                  </div>
                </div>
              </div>
              <div class="e-right">
                <div class="forthis h-67">
                  <div class="this-title">
                    <span>处理过程</span>
                  </div>
                  <div class="i-list-con">
                    <div class="this-con">
                       <span v-for="(company,index) in listLog" :key="index">

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

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

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

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

                          </div>
                        </div>

                      </div>
                      </span>

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

              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="实时画面" name="frame">
          </el-tab-pane>
          <el-tab-pane label="地理位置" name="point">
          <div class="info-button-group">            <button>视频联动</button>
            <button>矢量标记</button>
            <button>测面</button>
            <button>测距</button>
          </div>
			    <notProcessedSupermap ref="notProcessedSupermap" v-if="'point' === eventInfoVisibleActiveName"  style="width:100% ;height: 75vh;"   :mapDiv="'notProcessedSupermap'" :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" @preview="preview" :isSideBySide="false"></notProcessedSupermap>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
      <el-dialog title="事件信息-处理中" :visible.sync="eventInfoVisible_Processed"  v-if="eventInfoVisible_Processed" width="80%"  hight="1000px" @close="cancelEventShow()"  append-to-body>
        <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="eventInfoVisibleActiveName" @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>矢量标记</button>
							<button>测面</button>
							<button>测距</button>
						</div>
						<processedSupermap v-if="'point' === eventInfoVisibleActiveName" ref="processedSupermap"  style="width:100% ;height: 75vh;" :mapDiv="'processedSuperMap'" :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" @preview="preview" :isSideBySide="false"></processedSupermap>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>
  </div>

</template>

<script>
  import {
    getForest,updateCentereventTForestfireStatus,getNearEvent, getNearCamera
  } from '@/api/event'
  import {
    selectByeventCode,getWarm,updateDeptEventStatus,listByEventCode,selectCameraEventByCameraId,listCenterdataTAttachByBusId,selectchannelCodeByCameraId,selectFjsxt
  } from '@/api/forest'


  import eventLocationSupermap from '@/components/supermap' //超图
  import notProcessedSupermap from '@/components/supermap' //超图
  import processedSupermap from '@/components/supermap' //超图
  /** ----------------------------------摄像头预览开始------------------------------------- */
  import { getDahuaVideoServer } from '@/api/dahua/dahua'
  import DHWs from '@/dahua/lib/DHWs'

  /** ----------------------------------摄像头预览结束------------------------------------- */
  export default {
    dicts: ['event_source'],
    components: {
      eventLocationSupermap,
      notProcessedSupermap,
      processedSupermap
    },
    data() {
      return {
        /** ----------------------------------事件弹窗开始-未处理------------------------------------- */
        eventInfoVisibleActiveName: 'info',
        eventInfoVisible_notProcessed: false,
        eventInfoVisible_Processed: false,
        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: '归档'
          }
        ],
        // 弹出层 基本信息
        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: '这里发现病虫害，需要立刻支援'
          }
        ],
        eventLocationVisible: false,
        longitude: '',
        latitude: '',
        activeName: 'event',
        eventList: [],
        markersList: [],
        cameraList: [],
        cameraMarkersList: []
      }
    },
    created() {
      /** ----------------------------------摄像头预览开始------------------------------------- */
      const DHWsInstance = DHWs.getInstance()
      this.ws = DHWsInstance
      console.log(this.ws)
      /** ----------------------------------摄像头预览结束------------------------------------- */
    },
    methods: {
      cancelEventLocationShow() {
        this.longitude = ''
        this.latitude = ''
        this.activeName = 'event'
        this.eventList = []
        this.markersList = []
        this.cameraList = []
        this.cameraMarkersList = []
      },
      getNearEvent() {
        this.activeName = 'event'
        let marker = [{
          lng: this.longitude,
          lat: this.latitude,
          icon: 'marker',
          bindPopupHtml: '定位',
          click: '',
          parameter: '',
          keepBindPopup: false,
          isAggregation: false
        }]
        let that = this
        getNearEvent(this.longitude, this.latitude).then(res => {
          that.markersList = []
          that.eventList = []
          if (res.data != null && res.data.length > 0) {
            for (let i = 0; i < res.data.length; i++) {
              let markersMap = {
                lng: 124.59,
                lat: 43.02,
                icon: 'marker',
                bindPopupHtml: '',
                click: '',
                parameter: '',
                keepBindPopup: false,
                isAggregation: false
              }
              if (res.data.length > 50) {
                markersMap.isAggregation = true
              }
              if (res.data[i].eventStatus == "event_event_status_1" || res.data[i].eventStatus == "event_event_status_2" || res.data[i].eventStatus == "event_event_status_6") {
                markersMap.click = "showEventInfo_Processed"
                markersMap.icon = "sj-icon-map-clz"
              } else if (res.data[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[i].id
              markersMap.lng = res.data[i].longitude
              markersMap.lat = res.data[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' + res.data[i].longitude + ',' + res.data[i]
                  .latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>事件名称：' + res.data[i].eventTitle + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>事件时间：' + res.data[i].reportTime + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '</div>'
              that.markersList.push(markersMap)
            }
            that.eventList = res.data
            setTimeout(() => {
              that.$refs.eventLocationSupermap.clearM(true)
              that.$refs.eventLocationSupermap.clearM(false)
              that.$refs.eventLocationSupermap.setMarkers(that.markersList)
              that.$refs.eventLocationSupermap.setMarkers(marker)
            }, 1000)
          }
        })
      },
      handleClick(tab, event) {
        let that = this
        that.$refs.eventLocationSupermap.controlLevel(8)
        let marker = [{
          lng: this.longitude,
          lat: this.latitude,
          icon: 'marker',
          bindPopupHtml: '定位',
          click: '',
          parameter: '',
          keepBindPopup: false,
          isAggregation: false
        }]
        if (tab.name == 'monitor') {
          that.cameraMarkersList = []
          that.cameraList = []
          getNearCamera(this.longitude, this.latitude).then(res => {
            //根据设备类型查看列表
            that.cameraList = res.data

            if (res.data != null && res.data.length > 0) {
              for (let i = 0; i < res.data.length; i++) {
                let markersMap = {
                  lng: 124.59,
                  lat: 43.02,
                  icon: 'camera',
                  bindPopupHtml: '',
                  click: 'preview',
                  parameter: '',
                  keepBindPopup: false,
                  isAggregation: false
                }
                if (res.data.length > 50) {
                  markersMap.isAggregation = true
                }
                if (res.data[i].channelCode != null) {
                  markersMap.parameter = res.data[i].channelCode.split(',')
                } else {
                  markersMap.parameter = []
                }

                markersMap.lng = res.data[i].longitude
                markersMap.lat = res.data[i].latitude
                markersMap.bindPopupHtml = '<div class="map-tip">' +
                  '<span>' +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  '                  <h4>经纬度：' + res.data[i].longitude + ',' + res.data[i].latitude + '</h4>' +
                  '                </div>' +
                  '                </div>' +
                  '                </span>' +
                  '<span>' +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  '                  <h4>摄像头名称：' + res.data[i].cameraName + '</h4>' +
                  '                </div>' +
                  '                </div>' +
                  '                </span>' +
                  '</div>'
                this.cameraMarkersList.push(markersMap)
              }
              setTimeout(() => {
                that.$refs.eventLocationSupermap.clearM(true)
                that.$refs.eventLocationSupermap.clearM(false)
                that.$refs.eventLocationSupermap.setMarkers(this.cameraMarkersList)
                that.$refs.eventLocationSupermap.setMarkers(marker)
              }, 1000)
            }
          })
        } else {
          that.getNearEvent()
        }
      },
      dropLocation(lat, lng) {
        this.$refs.eventLocationSupermap.dropLocation(lat, lng)
      },
      showEventLocation() {
        this.eventLocationVisible = true
      },
      /** ----------------------------------摄像头预览开始------------------------------------- */
      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)
      },
      /** ----------------------------------摄像头预览结束------------------------------------- */

      /** ----------------------------------事件弹窗开始-未处理------------------------------------- */
      switchImage(url) {
        this.url = url
      },
      formLeaveTable(){
        let p=new Promise((resolve, reject) =>
          reject()
        );
        return p;
      },
      async beforeLeave(newactiveName, oldActiveName) {
        let that = this;
        if (newactiveName == 'frame') {
          return await that.formLeaveTable()
        }
      },
      // 弹层方法
      showEventInfo_notProcessed(id) {
        let that = this
        that.id=id;
        that.eventInfoVisible_notProcessed = true
        that.listEventPic = [],
          that.url = '',
          that.resetQuery()
        getWarm(id).then(res => {
          let data = res.data
          that.id = data.id;
          that.cameraId = data.reportById
          that.reportTime = data.reportTime
          that.reportAddress = data.reportAddress
          that.eventCode = data.eventCode
          that.eventSource = data.eventSource
          that.information[0].content = data.eventTitle
          that.information[1].content = data.reportTime
          that.information[2].content = that.selectDictLabel(that.dict.type.event_source, data.eventSource)
          that.information[3].content = data.longitude
          that.information[4].content = data.latitude
          that.information[5].content = data.reportBy
          that.information[6].content = data.eventContent
          selectByeventCode(data.eventCode).then(res1 => {
            let that = this
            that.listEventDept = res1.data.allDept
            that.listoperateDept = res1.data.operateDept
          })

          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 = ""
              }
            })
          }
        })
      },
      updateEventStatusNotProcessed() {
        if (this.deptName == '') {
          this.$modal.msgError("请选择部门");
          return
        }
        if (this.eventStatus == '') {
          this.$modal.msgError("请选择状态");
          return
        }
        if (this.eventTypeShow) {
          if (this.eventType == '') {
            this.$modal.msgError("请选择事件类型");
            return
          }
        }
        this.updateEventStatusForm.id = this.id
        this.updateEventStatusForm.zt = this.eventStatus
        this.updateEventStatusForm.eventCode = this.eventCode
        this.updateEventStatusForm.deptId = this.deptId
        this.updateEventStatusForm.deptName = this.deptName
        this.updateEventStatusForm.eventType = this.eventType


        updateDeptEventStatus(this.updateEventStatusForm).then(response => {
          this.$modal.msgSuccess(response.msg)
          this.eventStatus = ''
          this.deptId = ''
          this.eventType = ''
          this.deptName = ''
          this.eventInfoVisible_notProcessed = false
          cancelEventShow();
        })
      },
      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();
        })

      },
      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.eventInfoVisibleActiveName = 'info';
        this.listEventPic = [];//事件图片
        this.listEventDept = [];//涉事单位List,
        this.listLog = [];//处理过程List,
        this.listoperateDept = [];
      },
      handleClickNotProcessed: function (tab, oldActiveName) {
        let that = this
        if (tab.name == 'frame') {
          if (that.eventSource == 'event_source_2') {
            selectchannelCodeByCameraId(that.cameraId).then(res => {
              let channelCode = [];
              if (res.data != null && res.data.length > 0) {
                for (let i = 0; i < res.data.length; i++) {
                  channelCode.push(res.data[i].channelCode);
                }
              }
              //this.preview("ZgVzqsjwA1DT3G85KJ7HH0");
              if(channelCode!=null&&channelCode.length>0){
                this.preview(channelCode);
              }else{
                this.$modal.msg("没有匹配到相对应摄像头！！！");
              }
            })
          }else{
            this.$modal.msg("没有匹配到相对应摄像头！！！");
          }
        } else if (tab.name == 'point') {
          setTimeout(() => {
            that.markersMapList=[];
            let information={};
            information.lng = that.information[3].content;
            information.lat = that.information[4].content;
            let bindPopupHtml = '';
            for (let i = 0; i < that.information.length; i++) {
              bindPopupHtml += '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>' + that.information[i].name + '：' + that.information[i].content + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>';
            }
            information.bindPopupHtml = bindPopupHtml;
            information.click = "";
            information.keepBindPopup = false;
            information.isAggregation = false;
            information.icon = "marker";
            that.markersMapList.push(information)
            // 查询火点附近摄像头
            selectFjsxt(that.information[3].content,that.information[4].content).then(response => {
              console.log("vv",response.data)
              if (response.data!=null&&response.data.length>0){
                for(let i=0;i<response.data.length;i++)
                {
                  let marke={};
                  marke.lng = response.data[i].longitude;
                  marke.lat = response.data[i].latitude;
                  let code=response.data[i].channelCode.split(",");
                  marke.bindPopupHtml = response.data[i].cameraName;
                  marke.click =   "preview";
                  marke.parameter =   code;
                  marke.keepBindPopup = false;
                  marke.isAggregation = false;
                  marke.icon = "camera";
                  that.markersMapList.push(marke)
                }
              }
              that.$refs.notProcessedSupermap.dropLocation(information.lat ,information.lng)
              that.$refs.notProcessedSupermap.clearM(false)
              that.$refs.notProcessedSupermap.setMarkers(that.markersMapList)
            })
          }, 1000);

        }
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.eventTypeShow = false
        this.eventType = ''
        this.deptName = ''
        this.eventStatus = ''
      },
      /** ----------------------------------事件弹窗结束-未处理------------------------------------- */
      /** ----------------------------------事件弹窗开始-处理中------------------------------------- */
      handleClickProcessed(tab, event) {
        let that=this
        if(tab.name == 'frame'){
          if(that.eventSource=='event_source_2') {
            selectchannelCodeByCameraId(that.cameraId).then(res => {
              let channelCode=[];
              if(res.data!=null&&res.data.length>0){
                for (let i = 0; i < res.data.length; i++) {
                  channelCode.push(res.data[i].channelCode);
                }
              }
              if(channelCode!=null&&channelCode.length>0){
                this.preview(channelCode);
              }else{
                this.$modal.msg("没有匹配到相对应摄像头！！！");
              }
            })
          }else{
            this.$modal.msg("没有匹配到相对应摄像头！！！");
          }
        } else if (tab.name == 'point') {
          setTimeout(() => {
            that.markersMapList=[];
            let information={};
            information.lng = that.information[3].content;
            information.lat = that.information[4].content;
            let bindPopupHtml = '';
            for (let i = 0; i < that.information.length; i++) {
              bindPopupHtml += '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>' + that.information[i].name + '：' + that.information[i].content + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>';
            }
            information.bindPopupHtml = bindPopupHtml;
            information.click = "";
            information.keepBindPopup = false;
            information.isAggregation = false;
            information.icon = "marker";
            that.markersMapList.push(information)

            // 查询火点附近摄像头
            selectFjsxt(that.information[3].content,that.information[4].content).then(response => {
              console.log("vv",response.data)
              if (response.data!=null&&response.data.length>0){
                for(let i=0;i<response.data.length;i++)
                {

                  let marke={};
                  marke.lng = response.data[i].longitude;
                  marke.lat = response.data[i].latitude;
                  let code=response.data[i].channelCode.split(",");
                  marke.bindPopupHtml = response.data[i].cameraName;
                  marke.click =   "preview";
                  marke.parameter =   code;
                  marke.keepBindPopup = false;
                  marke.isAggregation = false;
                  marke.icon = "camera";
                  that.markersMapList.push(marke)
                }
              }
              that.$refs.processedSupermap.dropLocation(information.lat,information.lng)
              that.$refs.processedSupermap.clearM(false)
              that.$refs.processedSupermap.setMarkers(that.markersMapList)
            })
          }, 1000);



        }
      },
      showEventInfo_Processed(id) {
        let that = this
        that.id=id;
        that.eventInfoVisible_Processed = true;
        that.listEventPic = [];
        that.url = '';
        getForest(id).then(response => {
          let data = response.data
          if (data.eventStatus != 'event_event_status_1') {
            this.aniu = false
          }
          if(data.eventStatus=='event_event_status_6'){
            this.optionsProcessed.splice(1,2)
            this.zt=3
          }
          if(data.eventStatus=='event_event_status_1'){
            this.optionsProcessed.splice(2,1)
            this.zt=2
          }
          if(data.eventStatus=='event_event_status_2'){
            this.optionsProcessed.splice(0,2)
            this.zt=4
          }
          if(data.eventStatus=='event_event_status_3'){
            this.showZt=false
            this.fireReport=true
            this.zt=5
          }


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

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

          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=""
              }
            })
          }
        })
      },
      /** ----------------------------------事件弹窗结束-处理中------------------------------------- */
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '@/assets/styles/base.scss';
  .event-info-con{
		width: 100%;
		display: flex;
		.e-left{
			width: 32%;
		}
		.e-center{
			width: 30%;
			margin-left: 1%;
			.img-company{
				width: 100%;
				height: 18.3vh;
				img{}
			}
		}
		.e-right{
			margin-left: 1%;
			width: 45%;
		}
		.e-location-left{
			width: 28%;
			margin-top: 1rem;
		}
		.e-location-right{
			width: 71%;
			margin-top: 1.3rem;
			margin-left: 1rem;
		}
	}
  .el-dialog:not(.is-fullscreen) {
    margin-top: 5.5vh !important;
  }

  .bottom-menu-normal {
    max-width: 90%;
    padding: 0 3rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 100000;
    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;
    overflow: hidden;

    .btm-m-con {
      position: relative;
      color: $inBlue;
      font-size: .5rem;
      padding: 1rem 1.5rem;
      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;
      }
    }

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

      i {
        color: $inBlueHover;
        text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
      }
    }
		
	.m-l-none{
		.el-input__inner{
			margin-left:0 !important;
		}
	}

  }
</style>