Project_yhfu/src/views/event.vue

<!--事件中心-->
<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <!-- 左侧 -->
      <div class="leftbar" :class="indentleft" ref="left">
        <div class="forthis">
          <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 class="h-16 overflow-y">
             <div class="d-l-con"  v-for="(item,index) in todayEventCountDeptList"
                 v-on:click="todayEventByDeptIdList(item.deptId)">
              <div class="d-l-l-text">
                <i class="i-small"></i>
                <h4>{{item.deptName}}</h4>
              </div>
              <div class="d-l-l-count">{{item.count}}</div>
             </div>
						</div>
            <div class="d-tit">
              <h4>事件分类</h4>
            </div>
            <div id="event-chart" style="width: 100%;height:24.2vh;"></div>
            <div class="d-l-con"  v-for="(item,index) in todayEventCountTypeList"
                 v-on:click="todayEventByTypeList(item.eventType)">
              <div class="d-l-l-text">
                <i class="i-small"></i>
                <h4>{{item.eventTypeName}}</h4>
              </div>
              <div class="d-l-l-count"> {{item.count}}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 地图 -->
      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" :mapSite="{doubleClickZoom:false}"
                :codes="['9fa5']" :isSideBySide="false" @showEventInfo_notProcessed="showEventInfo_notProcessed" @showEventInfo_Processed="showEventInfo_Processed"></supermap>
      <!-- 右侧 -->
      <div class="rightbar" :class="indentright" ref="right">
        <div class="forthis">
          <div class="this-title">
            <span>事件列表</span>
            <!-- <span>23</span> -->
          </div>
          <div class="i-list-con h-73">
            <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="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>
<!--                <h4><span-->
<!--                  :class="[item.state==0?'state-wcl':'state-wyc']">{{['新上报','处理中'][item.state]}}</span><span>{{item.source}}</span><span>{{item.time}}</span>-->
<!--                </h4>-->
<!--                <h4>{{item.phoneNum}}</h4>-->
              </div>
            </div>
          </div>
        </div>
      </div>
      <vBottomMenu></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">
            <el-step title="待处理"></el-step>
            <el-step title="处理中"></el-step>
            <el-step title="已办结"></el-step>
            <el-step title="已归档"></el-step>
          </el-steps>

        </div>
        <el-tabs v-model="activeName" @tab-click="handleClickNotProcessed" :before-leave="beforeLeave" >
          <el-tab-pane label="基础信息" name="info" >
            <div class="event-info-con">
              <div class="e-left">
                <div class="forthis">
                  <div class="i-list-con h-35">
										<span v-for="(information,index) in information" :key="index">
											<div class="d-l-con" >
												<div class="d-l-l-text">
													<i class="i-small"></i>
													<h4>{{information.name}}：</h4>
													<h4>{{information.content}}</h4>
												</div>
											</div>
										</span>
                  </div>
                </div>
                <div class="forthis d-map h-30">
                  <div class="this-title">
                    <span>涉事单位</span>
                  </div>
                  <div class="i-list-con h-26">
										<span v-for="(company,index) in listEventDept" :key="index">
											<div class="d-l-con" >
												<div class="d-l-l-text">
													<i class="i-small"></i>
													<h4>{{company.deptName}}</h4>
												</div>
												<div class="d-l-l-count"
                             :class="[company.eventStatus=='未处理'?'state-wcl':'state-wyc']">
<!--													{{['未处理','无异常'][company.state]}}-->{{company.eventStatus}}
												</div>
											</div>
										</span>
                  </div>
                </div>
              </div>
              <div class="e-center">
                <div class="forthis">
                  <div class="i-list-con h-35">
                    <el-image :src="url" :preview-src-list="listEventPic" class="img-company" style="height: 100%;" v-if="url!=''">
                    </el-image>
                  </div>
                </div>
                <div class="forthis h-30">
                  <div class="i-list-con h-26">
                    <el-image :src="item"
                              style="width:3.9rem; height:3rem;margin: 2px;"
                              v-for="(item,index) in listEventPic" @click="tp(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>
			    <supermapNotProcessed ref="supermapNotProcessed" v-if="'point' === activeName"  style="width:100% ;height: 75vh;"   :mapDiv="'supermapNotProcessedSuperMap'" :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" @preview="preview" :isSideBySide="false"></supermapNotProcessed>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
      <el-dialog title="事件信息-处理中" :visible.sync="eventInfoVisible_Processed"  v-if="eventInfoVisible_Processed" width="80%" @close="cancelEventShow()">
        <div style="position:absolute; right: 0;top:60px; width:40%;">
          <el-steps :space="200" :active=zt finish-status="success">
            <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="tp(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>
						<supermapProcessed v-if="'point' === activeName" ref="supermapProcessed"  style="width:100% ;position:absolute;height: 75vh;top: 0;left: 0;" :mapDiv="'supermapProcessedSuperMap'" :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" @preview="preview" :isSideBySide="false"></supermapProcessed>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {
    getTodayEvent, getEventStatusList, getEventSourceList, getEventListByDeptIdList, getEventListByTypeList,getForest,updateCentereventTForestfireStatus
  } from '@/api/event'
  import {
    selectByeventCode,getWarm,updateDeptEventStatus,listByEventCode,selectCameraEventByCameraId,listCenterdataTAttachByBusId,selectchannelCodeByCameraId,selectFjsxt
  } from '@/api/forest'
  /** ----------------------------------摄像头预览开始------------------------------------- */
  import {getDahuaVideoServer} from "@/api/dahua/dahua";
  import DHWs from '@/dahua/lib/DHWs'

  /** ----------------------------------摄像头预览结束------------------------------------- */
  import supermap from '@/components/supermap' //超图
  import supermapNotProcessed from '@/components/supermap' //超图
  import supermapProcessed from '@/components/supermap' //超图
  import vheader from '@/components/v-header.vue' //一体化共用头部
  import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
  // import echarts from 'echarts'
  let echarts = require('echarts')
  export default {
    dicts: ['event_source'],
    components: {
      supermap,
      supermapNotProcessed,
      supermapProcessed,
      vheader,
      vBottomMenu
    },
    created() {
      /** ----------------------------------摄像头预览开始------------------------------------- */
      const DHWsInstance = DHWs.getInstance();
      this.ws = DHWsInstance;
      console.log(this.ws);
      /** ----------------------------------摄像头预览结束------------------------------------- */
    },
    mounted() {
      this.getTodayEvent()
    },
    data() {
      return {
        /** ----------------------------------摄像头预览开始------------------------------------- */
        activePanel: 'key1',
        isLogin: false,
        cameraParams: [],
        /** ----------------------------------摄像头预览结束------------------------------------- */
        markersList: [],
        todayEventCountList: [],//今日事件列表
        todayEventSourcetList: [],//今日事件列表
        todayEventCountDeptList: [],//事件分布
        todayEventCountTypeList: [],//事件分类
        eventChartData: [],//左侧eachar图表数据
        iframeBoo: true,
        open: false,
        iframeVue: null,
        eventInfoVisible_notProcessed: false,
        eventInfoVisible_Processed: false,
        eventInfoVisible2: false,
        activeName: 'info',
        radio: '1',
        eventList: [],
        /** ----------------------------------事件弹窗开始-未处理------------------------------------- */
        listEventPic: [],//事件图片
        url: '',
        id: '',
        eventType : '',
        deptName : '',
        eventStatus : '',
        cameraId: '',
        reportTime: '',
        reportAddress: '',
        eventCode: null,
        eventSource: '',
        //事件详情弹出显隐
        eventTypeShow: false,
        listEventDept: [],//涉事单位List,
        listLog: [],//处理过程List,
        listoperateDept:[],
        optionsNotProcessed: [{
          value: 'wyc',
          label: '无异常'
        }, {
          value: 'qr',
          label: '确认'
        }],
        listeventType: [],
        updateEventStatusForm: {
          id: '',
          eventStatus: '',
          eventCode: '',
          deptId: '',
          deptName: '',
          eventType: '',
          zt: ''
        },
        /** ----------------------------------事件弹窗结束-未处理------------------------------------- */
        aniu: true,
        showZt: true,
        zt: "",
        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: '这里发现病虫害，需要立刻支援'
          }
        ],
        // 弹出层 基本信息 涉事单位
        srcList: [
          require('@/assets/images/visual/img-sample-3.jpg'),
          require('@/assets/images/visual/img-sample-2.jpg'),
          require('@/assets/images/visual/img-sample-1.jpg')
        ],
        srcList1: [
          require('@/assets/images/visual/林业病虫害抓拍2.png'),
          require('@/assets/images/visual/林业病虫害松墨天牛抓拍.png'),
          require('@/assets/images/visual/img-sample-3.jpg')
        ],

        //左右缩进
        indentStyle: '',
        indentleft: '',
        indentright: '',
        indentText: '收起左右栏',
        indentdisabled: false

      }
    },

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

        }
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.eventTypeShow = false
        this.eventType = ''
        this.deptName = ''
        this.eventStatus = ''
      },
  /** ----------------------------------事件弹窗结束-未处理------------------------------------- */
      /** ----------------------------------事件弹窗开始-处理中------------------------------------- */
      handleClickProcessed(tab, event) {
        let that=this
        if(tab.name == 'frame'){
          if(that.eventSource=='event_source_2') {
            selectchannelCodeByCameraId(that.cameraId).then(res => {
              let channelCode=[];
              if(res.data!=null&&res.data.length>0){
                for (let i = 0; i < res.data.length; i++) {
                  channelCode.push(res.data[i].channelCode);
                }
              }
              //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.supermapProcessed.dropLocation(information.lat,information.lng)
              that.$refs.supermapProcessed.clearM(false)
              that.$refs.supermapProcessed.setMarkers(that.markersMapList)
            })
          }, 1000);



        }
      },
    showEventInfo_Processed(id) {
      let that = this
      that.id=id;
      that.eventInfoVisible_Processed = true;
      that.listEventPic = [];
      that.url = '';
      getForest(id).then(response => {
        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=""
            }
          })
        }
      })
      },
      /** ----------------------------------事件弹窗结束-处理中------------------------------------- */
      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 = [];
          that.eventList = [];
          if(res.data.eventListAll!=null&&res.data.eventListAll.length>0){
            for (let i = 0; i < res.data.eventListAll.length; i++) {
              let markersMap = {
                lng: 124.59,
                lat: 43.02,
                icon: 'marker',
                bindPopupHtml: '',
                click: '',
                parameter: '',
                keepBindPopup: false,
                isAggregation: false
              }
              if(res.data.eventListAll.length>50){
                markersMap.isAggregation = true
              }
              if(res.data.eventListAll[i].eventStatus=="event_event_status_1"||res.data.eventListAll[i].eventStatus=="event_event_status_2"||res.data.eventListAll[i].eventStatus=="event_event_status_6"){
                markersMap.click = "showEventInfo_Processed"
              }else if(res.data.eventListAll[i].eventStatus=="event_event_status_4"){
                markersMap.click = "showEventInfo_notProcessed"
              }
              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) {
        //点击今日事件前三个按钮列表
        let that = this
        getEventStatusList(eventStatus).then(res => {
          that.$refs.supermap.clearM(false)
          that.$refs.supermap.clearM(true)
          that.markersList = [];
          that.eventList = [];
          if(res.data.eventList!=null&&res.data.eventList.length>0){
            for (let i = 0; i < res.data.eventList.length; i++) {
              let markersMap = {
                lng: 124.59,
                lat: 43.02,
                icon: 'marker',
                bindPopupHtml: '',
                click: '',
                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"
              }else if(eventStatus=="event_event_status_4"){
                markersMap.click = "showEventInfo_notProcessed"
              }else{
                markersMap.click = "showEventInfo_Processed"
              }
              markersMap.parameter = res.data.eventList[i].id
              markersMap.lng = res.data.eventList[i].longitude
              markersMap.lat =res.data.eventList[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' +res.data.eventList[i].longitude + ',' +res.data.eventList[i]
                  .latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>事件名称：' +res.data.eventList[i].eventTitle + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>事件时间：' +res.data.eventList[i].reportTime + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '</div>';
              that.markersList.push(markersMap)
            }
            that.eventList=res.data.eventList;
            that.$refs.supermap.setMarkers(that.markersList)
          }
          // eventCode: "718b040cf1f747eb8ab4ffc6db643ca0"
          // eventContent: "集安-东明-可见光2022-06-27 02:42:04烟雾报警"
          // eventSource: "event_source_2"
          // eventStatus: "event_event_status_4"
          // eventTitle: "集安-东明点位2022-06-27 02:42:04烟雾报警"
          // id: "01458301eb834f3da5be16a75cd38bb6"
          // latitude: "43.85618180244526"
          // longitude: "125.31971797326736"
          // reportBy: "集安-东明点位"
          // reportTime: "2022-06-27 02:42:04"
        })
      },
      todayEventSourcetSetMarkers(eventSource) {
        //点击今日事件后三个按钮列表
        let that = this
        getEventSourceList(eventSource).then(res => {
          that.$refs.supermap.clearM(true)
          that.$refs.supermap.clearM(false)
          that.eventList = [];
          that.markersList = [];
          let markersMap = {
            lng: 124.59,
            lat: 43.02,
            icon: 'marker',
            bindPopupHtml: '',
            click: '',
            keepBindPopup: false,
            isAggregation: false
          }
          if(res.data.eventList!=null&&res.data.eventList.length>0){
            if(res.data.eventList.length>50){
              markersMap.isAggregation = true
            }
            for (let i = 0; i < res.data.eventList.length; i++) {
              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"
              }else{
                markersMap.click = "showEventInfo_Processed"
              }
              markersMap.lng = res.data.eventList[i].longitude
              markersMap.lat =res.data.eventList[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' +res.data.eventList[i].longitude + ',' +res.data.eventList[i]
                  .latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>事件名称：' +res.data.eventList[i].eventTitle + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>事件时间：' +res.data.eventList[i].reportTime + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '</div>';
              that.markersList.push(markersMap)
            }
            that.eventList=res.data.eventList;
            that.$refs.supermap.setMarkers(that.markersList)
          }
          // eventCode: "718b040cf1f747eb8ab4ffc6db643ca0"
          // eventContent: "集安-东明-可见光2022-06-27 02:42:04烟雾报警"
          // eventSource: "event_source_2"
          // eventStatus: "event_event_status_4"
          // eventTitle: "集安-东明点位2022-06-27 02:42:04烟雾报警"
          // id: "01458301eb834f3da5be16a75cd38bb6"
          // latitude: "43.85618180244526"
          // longitude: "125.31971797326736"
          // reportBy: "集安-东明点位"
          // reportTime: "2022-06-27 02:42:04"
        })
      },
      todayEventByDeptIdList(deptId) {
        //点击事件分类
        let that = this
        getEventListByDeptIdList(deptId).then(res => {
          that.$refs.supermap.clearM(true)
          that.$refs.supermap.clearM(false)
          that.markersList = [];
          that.eventList = [];
          let markersMap = {
            lng: 124.59,
            lat: 43.02,
            icon: 'marker',
            bindPopupHtml: '',
            click: '',
            keepBindPopup: false,
            isAggregation: false
          }
          if(res.data.eventList!=null&&res.data.eventList.length>0){
            if(res.data.eventList.length>50){
              markersMap.isAggregation = true
            }
            for (let i = 0; i < res.data.eventList.length; i++) {

              markersMap.lng = res.data.eventList[i].longitude
              markersMap.lat =res.data.eventList[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' +res.data.eventList[i].longitude + ',' +res.data.eventList[i]
                  .latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>事件名称：' +res.data.eventList[i].eventTitle + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>事件时间：' +res.data.eventList[i].reportTime + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '</div>';
              that.markersList.push(markersMap)
            }
            that.eventList=res.data.eventList;
            that.$refs.supermap.setMarkers(that.markersList)
          }
          // eventCode: "718b040cf1f747eb8ab4ffc6db643ca0"
          // eventContent: "集安-东明-可见光2022-06-27 02:42:04烟雾报警"
          // eventSource: "event_source_2"
          // eventStatus: "event_event_status_4"
          // eventTitle: "集安-东明点位2022-06-27 02:42:04烟雾报警"
          // id: "01458301eb834f3da5be16a75cd38bb6"
          // latitude: "43.85618180244526"
          // longitude: "125.31971797326736"
          // reportBy: "集安-东明点位"
          // reportTime: "2022-06-27 02:42:04"
        })
      },
      todayEventByTypeList(eventType) {
        //点击事件分类
        let that = this
        getEventListByTypeList(eventType).then(res => {
          that.$refs.supermap.clearM(true)
          that.$refs.supermap.clearM(false)
          that.markersList = [];
          that.eventList = [];
          if(res.data.eventList!=null&&res.data.eventList.length>0){
            for (let i = 0; i < res.data.eventList.length; i++) {
              let markersMap = {
                lng: 124.59,
                lat: 43.02,
                icon: 'marker',
                bindPopupHtml: '',
                click: '',
                keepBindPopup: false,
                isAggregation: false
              }
              if(res.data.eventList.length>50){
                markersMap.isAggregation = true
              }
              markersMap.lng = res.data.eventList[i].longitude
              markersMap.lat =res.data.eventList[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' +res.data.eventList[i].longitude + ',' +res.data.eventList[i]
                  .latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>事件名称：' +res.data.eventList[i].eventTitle + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>事件时间：' +res.data.eventList[i].reportTime + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '</div>';
              that.markersList.push(markersMap)
            }
            that.$refs.supermap.setMarkers(that.markersList)
          }
          that.eventList=res.data.eventList;
          // eventCode: "718b040cf1f747eb8ab4ffc6db643ca0"
          // eventContent: "集安-东明-可见光2022-06-27 02:42:04烟雾报警"
          // eventSource: "event_source_2"
          // eventStatus: "event_event_status_4"
          // eventTitle: "集安-东明点位2022-06-27 02:42:04烟雾报警"
          // id: "01458301eb834f3da5be16a75cd38bb6"
          // latitude: "43.85618180244526"
          // longitude: "125.31971797326736"
          // reportBy: "集安-东明点位"
          // reportTime: "2022-06-27 02:42:04"
        })
      },
      dropLocation(lat,lng) {
        this.$refs.supermap.dropLocation(lat,lng)
      },
      /** ----------------------------------摄像头预览开始------------------------------------- */
      alertLogin: function () {
        this.$modal.msg("登录中....");
      },
      alertLoginSuccess: function () {
        this.$modal.msgSuccess("登录成功！");
      },
      alertLoginFailed: function () {
        this.$modal.msgError("登陆失败！");
      },
      alertReinstall: function () {
        this.$modal.msgWarning("请重新安装客户端");
      },
      /** 预览按钮操作 */
      preview(channelCode) {
        getDahuaVideoServer().then(newResponse => {
          this.ws.detectConnectQt().then(res => {
            if (res) { // 连接客户端成功
              this.alertLogin();
              this.ws.login({
                loginIp: newResponse.loginIp,
                loginPort: newResponse.loginPort,
                userName: newResponse.userName,
                userPwd: newResponse.userPwd,
                token: '',
                https: 1
              });
              this.ws.on('loginState', (res) => {
                this.isLogin = res;
                console.log('---res-----', res);
                if (res) {
                  this.alertLoginSuccess()
                  this.activePanel = 'key2'
                  this.realTimeVideoDialog(channelCode);
                } else {
                  this.alertLoginFailed();
                }
              });
            } else { // 连接客户端失败
              this.alertReinstall();
            }
          });
        });
      },
      realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
        if (!this.isLogin) {
          this.$Message.info('正在登陆客户端，请稍等......');
          return false;
        }
        this.ws.openVideo(cameraParams);
      },
      /** ----------------------------------摄像头预览结束------------------------------------- */
    }
  }
</script>

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