Project_yhfu/src/views/firespread.vue

<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <button @click="showEventDialog"
              style="position: absolute; left:50%;top: 50vh; transform: translateX(-50%);">触发事件详情
      </button>
      <!-- 弹层 -->
      <el-dialog title="事件详情" :visible.sync="eventDialog" customClass="customWidth" v-if="eventDialog"
                 @close="cancelEventShow()">
        <div class="dia-event-info">
          <el-row>
            <!-- 左侧 -->
            <el-col :span="18" class="dia-left">
              <div ref="imageTofile" style="height: 75vh;">
                <!-- 应急预案 -->
                <div class="dia-left-top">
                  <div class="dia-left-top-tit">应急预案</div>
                  <div class="dia-left-top-carousel">
                    <el-carousel height="30px" direction="vertical" :interval="2000">
                      <el-carousel-item v-if="visuForestCloudYuAnBo!=null">
                        <a :href="visuForestCloudYuAnBo.fileUrl">{{ visuForestCloudYuAnBo.reserveName }}</a>
                      </el-carousel-item>
                      <el-carousel-item v-else>
                        <a href="#">暂未关联预案</a>
                      </el-carousel-item>
                    </el-carousel>
                  </div>
                  <el-button size="mini" type="primary" class="yatz_button" @click="showUpdateYjYuAn">预案调整
                  </el-button>
                </div>
                <!-- 应急预案end -->
                <div class="fire-m">
                  <el-button size="small" icon="el-icon-upload" @click="showEventdetailsdialog()">动态标绘</el-button>
                  <el-button size="small" icon="el-icon-upload" @click="showheatPlotting()">火灾蔓延</el-button>
                </div>
                <!-- 地图 -->
                <supermapDialog1 ref="supermapDialog1"
                                 style="position: absolute; top:0;left: 0;"
                                 :mapDiv="'forestWarmSuperMap'"
                                 :mapSite="{zoom:16,doubleClickZoom:true,dragging:true,scrollWheelZoom:true}"
                                 :codes="['9fa5']"
                                 :isSideBySide="false"
                                 @preview="preview"/>
                <!-- 地图end -->
              </div>
            </el-col>
            <!-- 左侧end -->
            <!-- 右侧 -->
            <el-col :span="6" class="dia-right">
              <div class="e-right">
                <div class="forthis1" style="height: 785px;">
                  <dv-border-box-7 backgroundColor="#040b1f" :color="['#0e7957', '#0da24c']"
                                   style="padding-bottom:1rem ;">
                    <div class="i-list-con">
                      <div class="this-con">
                        <div class="z-info-list" style="margin-top: 0;">
                          <el-timeline>
                            <el-timeline-item color="#2bacf7" :timestamp="item.createTime"
                                              placement="top" v-for="(item,index) in eventLogList">
                              <el-card style="width: 40vh">
                                <div class="z-info-list-con">
                                  <div class="user-and-time flex-d">
                                    <span>{{ item.createName }}</span>
                                    <span v-if="eventLogList.length - 1 == index&&address!=null&&address!=''"><i
                                      class="el-icon-location"></i> {{ address }}</span>
                                    <span v-else></span>
                                  </div>
                                  <div class="z-info">
                                    <div class="this-con-list-info">
                                      {{ item.logContent }}
                                    </div>
                                    <div>
                                      <router-link to="#"
                                                   @click.native="clickFile(itemfile.fileUrl,itemfile.fileName,itemfile.fileType)"
                                                   v-for="(itemfile,indexfile) in item.fileVOs">
                                        <el-image :src="itemfile.fileUrl" v-if="itemfile.fileType=='image'"
                                                  :preview-src-list="assetTypeAnImage(item.fileVOs)"
                                                  style="width:3rem; height:3rem;margin: 2px;"
                                                  :title="itemfile.fileName">
                                        </el-image>
                                        <img v-else-if="itemfile.fileType=='video'"
                                             style="width:3rem; height:3rem;margin: 2px;"
                                             :src="require('@/assets/fileTypeImage/mp4.png')"
                                             :title="itemfile.fileName">
                                        </img>
                                        <img v-else-if="itemfile.fileType=='word'"
                                             style="width:3rem; height:3rem;margin: 2px;"
                                             :src="require('@/assets/fileTypeImage/word.png')"
                                             :title="itemfile.fileName">
                                        </img>
                                        <img v-else-if="itemfile.fileType=='excel'"
                                             style="width:3rem; height:3rem;margin: 2px;"
                                             :src="require('@/assets/fileTypeImage/excel.png')"
                                             :title="itemfile.fileName">
                                        </img>
                                        <img v-else
                                             style="width:3rem; height:3rem;margin: 2px;"
                                             :src="require('@/assets/fileTypeImage/file.png')"
                                             :title="itemfile.fileName">
                                        </img>
                                      </router-link>
                                    </div>
                                  </div>
                                </div>
                              </el-card>
                            </el-timeline-item>
                          </el-timeline>
                        </div>
                      </div>
                    </div>
                  </dv-border-box-7>
                </div>
              </div>

            </el-col>
            <!-- 左侧end -->
          </el-row>
        </div>
      </el-dialog>
    </div>
    <vBottomMenu ref="bottomMenu"></vBottomMenu>
    <eventLogUpload ref="eventLogUpload"></eventLogUpload>
    <!-- 添加区域标记 -->
    <el-dialog title="火灾区域" :visible.sync="regionalFlagOpen" width="1000px">
      <areaSupermap ref="fireAreaSupermap" v-if="regionalFlagOpen" style="width: 100%;height:74vh"
                    :mapDiv="'fireAreaSuperMap'" :mapSite="{doubleClickZoom:false}" :codes="['9fa5']"
                    :isSideBySide="false" :showAreaLatLng="showAreaLatLng"></areaSupermap>
    </el-dialog>
    <!-- 图片，视频预览 -->
    <el-dialog title="视频预览" :visible.sync="showTcPlayer" width="40%" customClass="customWidthMp4">
      <TcPlayer ref="TcPlayer" :playVideo="playVideo" :widthHeigt="[100,100]"></TcPlayer>
    </el-dialog>
    <el-dialog :title="cameraTitle" :visible.sync="cameraVisible" v-if="cameraVisible" customClass="videoCustomWidth"
               @close="cancelEventLocationShow()">
      <div style="width:1020px;height:625px;position:relative;">
        <!--视频窗口展示---海康-->
        <div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import html2canvas from 'html2canvas'//截图组件
  import supermapDialog1 from '@/components/supermap' //超图
  import vheader from '@/components/v-header.vue' //一体化共用头部
  import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
  import eventLogUpload from '@/views/eventLogUpload.vue' //日志上传文件
  import areaSupermap from '@/components/supermap'//区域标记地图
  import TcPlayer from '@/components/TcPlayer' //视频预览
  import {
    getEventDetail,
    sendEventLog,
    listSJfl,
    listYuAn,
    selectByeventCode,
    updateCentereventTEventcatalogueStatus,
    sendTask,
    listResourceByWz,
    updateYjYuAn,
    uploadBase64,
    centereventtdepteventList,
    dutysystemList,
    dutysystemAdd,
    dutysystemRemove,
    userFeginlist
  } from '@/api/forest'
  import {
    treeselectAll as deptTreeselect
  } from '@/api/system/dept'
  import {
    getHaiKangVideoServer
  } from '@/api/haikang/haikang'
  import {
    hasConferences,
    createConferences, getUserInfo
  } from "@/api/meeting"
  import {
    getDahuaVideoServer
  } from '@/api/dahua/dahua'
  import DHWs from '@/dahua/lib/DHWs'
  export default {
    dicts: ['task_source'],
    watch: {
      filterText(val) {
        this.$refs.LiandongDept.filter(val)
      }
    },
    components: {
      vheader,
      vBottomMenu,
      supermapDialog1,
      eventLogUpload,
      areaSupermap,
      TcPlayer
    },
    data() {
      return {
        //海康
        cameraTitle: '',
        cameraCode:'',
        cameraVisible: false,
        initCount: 0,
        pubKey: '',
        oWebControl: null,

        playVideo: '',//视频预览地址
        showTcPlayer: false,//视频预览弹窗
        regionalFlagOpen: false,//区域标记
        //区域标记
        regionalFlagObj: {
          array: []
        },
        filterText: '',//树搜索
        /** *****************事件流程***************************/
        deptNameitem: '签收部门',
        sendDeptId: null,//签收部门/发起部门
        sendDeptName: null,//签收部门/发起部门
        sendEventType: null,//事件类型
        sendHuoZaiBanJing: null,//火灾报告
        sendGuanLianYuAn: null,//关联预案
        sendUserFegin: [],//联系人
        sendTaskSource: null,//任务来源
        sendTaskTitle: null,//联动标题
        sendTaskContent: null,//联动内容
        sendLianDongDept: [],//联动部门
        eventTypeList: [],//事件类型列表
        guanLianYuAnList: [],//关联预案列表
        userFeginList: [],//联系人列表
        deptOptions: [],//签收部门
        deptOptionsLiandong: [],//联动部门
        eventStatusButton: null,//流程按钮标识
        eventConfirmTitle: null,//弹窗标题  ---签收 误报  重复
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        table1: {
          reportUnit: null,
          reportTimeY: null,
          reportTimeM: null,
          reportTimeD: null,
          forestFireLossTotal: null,
          fireLossTotal: null,
          forestArea: null,
          forestPrice: null,
          treesNumber: null,
          treesPrice: null,
          minorInjuriesNumber: null,
          minorInjuriesPrice: null,
          seriouslyInjuredNumber: null,
          seriouslyInjuredPrice: null,
          deathNumber: null,
          deathPrice: null,
          elseFireLossPrice: null,
          blazesPriceTotal: null,
          artificialDays: null,
          artificialPrice: null,
          vehicleNumber: null,
          carNumber: null,
          vehiclePrice: null,
          planeNumber: null,
          planePrice: null,
          elseBlazesPrice: null,
          note: null
        },
        table2: {
          fireTime: null,
          foundTime: null,
          blazesTime: null,
          address: null,
          firePlace: null,
          foundType: null,
          longitudeD: null,
          longitudeM: null,
          longitudeS: null,
          latitudeD: null,
          latitudeM: null,
          latitudeS: null,
          fireSource: null,
          fireType: null,
          fireLevel: null,
          areaTotal: null,
          forestLossAreaTotal: null,
          originalForestArea: null,
          artificialForestArea: null,
          peopleTotal: null,
          blazesTeamNumber: null,
          policeNumber: null,
          armyNumber: null,
          crowdNumber: null,
          windExtinguisher: null,
          secondTool: null,
          waterGun: null,
          elseThings: null,
          forestComposition: null,
          forestToken: null,
          porosities: null,
          weather: null,
          temperature: null,
          fireInsuranceLevel: null,
          windLevel: null,
          windDirection: null,
          commandUnit: null,
          commandName: null,
          commandPosition: null,
          surveyUnit: null,
          surveyName: null,
          surveyPosition: null,
          accidentName: null,
          accidentSex: null,
          accidentAge: null,
          accidentPosition: null,
          accidentUnit: null,
          dealType: null,
          dealNumber: null,
          criminalDealNumber: null,
          accidentDealSituation: null,
          responsibilityDealSituation: null,
          leadershipDealSituation: null,
          townForm: null,
          townAudit: null,
          cityForm: null,
          cityAudit: null
        },
        /** *****************事件流程***************************/
        showEventConfirm: false,//事件签收弹窗
        showGuanLianYuAnConfirm: false,//调整关联预案弹窗
        showEventConfirm_gd: false,//事件火险报告弹窗
        address: null,//事件上报地址
        eventStatusValue: null,//事件状态
        eventId: null,//事件ID
        eventType: null,//事件类型-大类
        dataStatus: null,//事件流程按钮
        deptId: null,//事件流程部门
        eventCode: null,
        eventName: null,
        longitude: null,
        latitude: null,
        eventLog: null,
        eventLogList: [],
        visuForestCloudYuAnBo: null,
        eventDialog: false,
        showResponsibilityDialog: false,//责任制弹窗
        depteventList: [],//责任制部门列表
        iconCurrentIndex: '',
        dutysystemDeptName: '',
        depteventId: '',
        dutysystemTableData: [],
        radius: 50,//资源搜索半径
        resourcesList: [
          {
            resourceName: '取水口',
            type: 'qsk',
            count: '1',
            icon: 'sj-icon-waterintake'
          },
          {
            resourceName: '水鹤',
            type: 'sh',
            icon: 'sj-icon-watercrane'
          },
          {
            resourceName: '消防栓',
            type: 'xfs',
            count: '1',
            icon: 'sj-icon-firehydrant'
          },
          {
            resourceName: '起降点',
            type: 'qjd',
            count: '1',
            icon: 'sj-icon-landing'
          },
          {
            resourceName: '检查站',
            type: 'jcz',
            count: '1',
            icon: 'sj-icon-checkpoint'
          },
          {
            resourceName: '防火队',
            type: 'fhd',
            count: '1',
            icon: 'sj-icon-fireteam'
          },
          {
            resourceName: '重点区域',
            type: 'zdqy',
            count: '1',
            icon: 'sj-icon-keyAreas'
          },
          {
            resourceName: '摄像头',
            type: 'sxt',
            count: '1',
            icon: 'sj-icon-jkzx'
          }
        ],
        resourcesListCheck: [],
        //文本域
        feedback: '',

      }
    },
    props: {
      calendarDay: null//首页日历选择
    },
    created() {
      /** ----------------------------------摄像头预览开始------------------------------------- */
      const DHWsInstance = DHWs.getInstance()
      this.ws = DHWsInstance
      /** ----------------------------------摄像头预览结束------------------------------------- */
    },
    methods: {
      /************************************责任制-开始****************************************/
      addLine: function() {//添加负责人行数
        var newValue = {
          id: '',//主键
          dept: '',//部门名称
          depteventId: '',//事件部门关联责任人
          name: '',//姓名
          post: '',//岗位
          telphone: ''//手机号
        }
        //添加新的行数
        this.dutysystemTableData.push(newValue)
      },
      handleDelete: function(index, row) {//删除负责人行数
        if (row.id != null && row.id != '') {
          let param = { ids: row.id }
          dutysystemRemove(param).then(res => {
            this.$message.success(`删除成功!`)
            this.dutysystemSelect(this.iconCurrentIndex, this.dutysystemDeptName, this.depteventId)
          })
        } else {
          this.dutysystemTableData.splice(index, 1)
        }
      },
      handleSave: function(index, rowData) {//保存负责人行数
        rowData.dept = this.dutysystemDeptName
        rowData.depteventId = this.depteventId
        dutysystemAdd(rowData).then(res => {
          this.$message.success(`保存成功!`)
          this.dutysystemSelect(this.iconCurrentIndex, this.dutysystemDeptName, this.depteventId)
        })
      },
      dutysystemSelect: function(deptId, dutysystemDeptName, depteventId) {//通过部门查询负责人信息
        this.dutysystemDeptName = dutysystemDeptName
        this.depteventId = depteventId
        this.iconCurrentIndex = deptId
        let param = { depteventId: depteventId }
        dutysystemList(param).then(res => {
          if (res.data != null && res.data.length > 0) {
            this.dutysystemTableData = res.data
          } else {
            this.dutysystemTableData = [{
              id: '',//主键
              dept: this.dutysystemDeptName,//部门名称
              depteventId: this.depteventId,//事件部门关联责任人
              name: '',//姓名
              post: '',//岗位
              telphone: ''//手机号
            }]
          }
        })
      },

      showResponsibility() {//弹出责任制弹窗
        let param = { eventCode: this.eventCode }
        centereventtdepteventList(param).then(res => {
          this.depteventList = res.data
          this.showResponsibilityDialog = true
        })
      },
      closeResponsibilityDialog() {//责任制关闭
        this.dutysystemTableData = []
        this.dutysystemDeptName = ''
        this.depteventId = ''
        this.iconCurrentIndex = ''
        this.showResponsibilityDialog = false
      },
      addResponsibilityDialog() {//责任制保存
        let reg_user = /^[\u4e00-\u9fa5]{2,4}$/;    //2-4个中文字符正则
        let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;    //11位手机号码正则
        for(let i in this.dutysystemTableData){
          if(!reg_user.test(this.dutysystemTableData[i].name)){
            this.$message.error(`请输入正确姓名!`)
            return;
          }
          if(!reg_tel.test(this.dutysystemTableData[i].telphone)){
            this.$message.error(`请输入正确手机号码!`)
            return;
          }

          if(this.dutysystemTableData[i].id==null || this.dutysystemTableData[i].id==''){
            this.dutysystemTableData[i].dept = this.dutysystemDeptName;
            this.dutysystemTableData[i].depteventId = this.depteventId;
          }
        }
        const param = {centereventTDutySystemList:this.dutysystemTableData,eventCode:this.eventCode,eventName:this.eventName}
        dutysystemAdd(param).then(res => {
          this.$message.success(`保存成功!`)
          this.dutysystemSelect(this.iconCurrentIndex, this.dutysystemDeptName, this.depteventId);
          this.closeResponsibilityDialog();
        })
      },
      /************************************责任制-结束****************************************/
      showEventdetailsdialog() {
        this.eventDialog = false;
        this.$emit('showEventDialog', this.eventCode);
      },
      showheatPlotting() {
        if (!this.$refs.supermapDialog1.isheatPlotting) {
          this.$refs.supermapDialog1.showheatPlotting(this.latitude, this.longitude)
        } else {
          this.$refs.supermapDialog1.isheatPlotting = false
        }
      },
      showUpdateYjYuAn() {
        listYuAn().then(res => {
          //关联预案列表
          if (res.code == 200) {
            this.guanLianYuAnList = res.data
            this.showGuanLianYuAnConfirm = true
          }
        })
      },
      updateYjYuAn() {
        if(this.eventStatusValue=='forest_event_status_1'){
          this.$message.error(`未签收事件无法修改预案信息，请先签收！`)
          return
        }else{
          let param = { eventCode: this.eventCode, reserve: this.sendGuanLianYuAn }
          updateYjYuAn(param).then(res => {
            //事件调整关联预案
            if (res.code == 200) {
              this.$message.success(`预案调整成功!`)
              this.refreshEventDialog(this.eventCode)
              this.sendGuanLianYuAn = null
              this.showGuanLianYuAnConfirm = false
            }
          })
        }
      },
      listResourceByWz(type) {
        if (this.resourcesListCheck.indexOf(type) > -1) {
          this.resourcesListCheck.splice(this.resourcesListCheck.indexOf(type), 1)
          setTimeout(() => {
            this.$refs.supermapDialog1.clearMByType(type)
          }, 1000)
        } else {
          //搜索物资
          let param = { longitude: this.longitude, latitude: this.latitude, type: type, radius: this.radius }
          listResourceByWz(param).then(res => {
            if (res.data != null && res.data.length > 0) {
              this.resourcesListCheck.push(type)
              var markersList = []
              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 (type == 'qsk') {
                  markersMap.icon = 'sj-icon-waterintake'
                } else if (type == 'sh') {
                  markersMap.icon = 'sj-icon-watercrane'
                } else if (type == 'xfs') {
                  markersMap.icon = 'sj-icon-firehydrant'
                } else if (type == 'qjd') {
                  markersMap.icon = 'sj-icon-landing'
                } else if (type == 'jcz') {
                  markersMap.icon = 'sj-icon-checkpoint'
                } else if (type == 'fhd') {
                  markersMap.icon = 'sj-icon-fireteam'
                } else if (type == 'zdqy') {
                  markersMap.icon = 'sj-icon-keyAreas'
                } else if (type == 'sxt') {
                  markersMap.icon = 'camera'
                  if (res.data[i].cameraCode != null) {
                    markersMap.click = 'preview'
                    // markersMap.parameter = res.data[i].cameraCode
                    markersMap.parameter = {code:res.data.data[i].cameraCode,
                      type:res.data.data[i].cameraFactory}
                  }
                }
                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].name + '</h4>' +
                  '                </div>' +
                  '                </div>' +
                  '                </span>' +
                  '</div>'
                markersList.push(markersMap)
              }
              setTimeout(() => {
                this.$refs.supermapDialog1.setMarkersByType(markersList, type)
              }, 1000)
            }
          })
        }
      },
      // 返回图片列表
      assetTypeAnImage(filePath) {
        let imageList = []
        if (filePath != null && filePath.length > 0) {
          for (let i = 0; i < filePath.length; i++) {
            if (filePath[i].fileType == 'image') {
              imageList.push(filePath[i].fileUrl)
            }
          }
        }
        return imageList
      },
      clickFile(fileUrl, fileName, fileType) {
        if (fileType == 'image') {
          return
        } else if (fileType == 'video') {
          this.showTcPlayer = true
          setTimeout(() => {
            this.playVideo = fileUrl
          }, 500)
        } else {
          let a = document.createElement('a')
          a.download = fileName
          a.href = fileUrl
          a.target = '_blank'
          a.click()
        }
      },
      setValue(event) {
        //签收选择部门
        this.sendDeptName = event.label
        this.sendDeptId = event.value
      },
      cancelEventConfirm() {
        //关闭事件签收弹窗
        this.sendDeptId = null
        this.sendDeptName = null
        this.sendUserFegin = []
        this.sendEventType = null
        this.sendHuoZaiBanJing = null
        this.sendGuanLianYuAn = null
        this.longitude = null
        this.latitude = null
        this.sendTaskTitle = null
        this.sendTaskSource = null
        this.sendTaskContent = null
        this.sendLianDongDept = []
        this.eventTypeList = []//事件类型列表
        this.guanLianYuAnList = []//关联预案列表
        this.deptOptions = []//签收部门
        this.deptOptionsLiandong = []//联动部门
        this.eventStatusButton = null//流程按钮标识
        this.eventConfirmTitle = null//流程按钮标识
        this.resourcesListCheck = []
        this.userFeginList = [] //联系人列表
      },
      cancelEventConfirm_send() {
        //清空表单数据
        this.sendDeptId = null
        this.sendDeptName = null
        this.sendUserFegin = []
        this.sendEventType = null
        this.sendHuoZaiBanJing = null
        this.sendGuanLianYuAn = null
        this.sendTaskTitle = null
        this.sendTaskSource = null
        this.sendTaskContent = null
        this.sendLianDongDept = []
        this.eventTypeList = []//事件类型列表
        this.guanLianYuAnList = []//关联预案列表
        this.deptOptions = []//签收部门
        this.deptOptionsLiandong = []//联动部门
        this.userFeginList = [] //联系人列表
      },
      cancelEventConfirm_gd() {
        //关闭事件火险报告窗口
        this.resetTable1()
        this.resetTable2()
      },
      cancelEventConfirm_mp4() {
        //关闭视频窗口
        this.playVideo = ''
        this.$refs.TcPlayer.destroyed()
      },
      resetTable1() {
        this.table1 = {
          reportUnit: null,
          reportTimeY: null,
          reportTimeM: null,
          reportTimeD: null,
          forestFireLossTotal: null,
          fireLossTotal: null,
          forestArea: null,
          forestPrice: null,
          treesNumber: null,
          treesPrice: null,
          minorInjuriesNumber: null,
          minorInjuriesPrice: null,
          seriouslyInjuredNumber: null,
          seriouslyInjuredPrice: null,
          deathNumber: null,
          deathPrice: null,
          elseFireLossPrice: null,
          blazesPriceTotal: null,
          artificialDays: null,
          artificialPrice: null,
          vehicleNumber: null,
          carNumber: null,
          vehiclePrice: null,
          planeNumber: null,
          planePrice: null,
          elseBlazesPrice: null,
          note: null
        }
      },
      resetTable2() {
        this.table2 = {
          fireTime: null,
          foundTime: null,
          blazesTime: null,
          address: null,
          firePlace: null,
          foundType: null,
          longitudeD: null,
          longitudeM: null,
          longitudeS: null,
          latitudeD: null,
          latitudeM: null,
          latitudeS: null,
          fireSource: null,
          fireType: null,
          fireLevel: null,
          areaTotal: null,
          forestLossAreaTotal: null,
          originalForestArea: null,
          artificialForestArea: null,
          peopleTotal: null,
          blazesTeamNumber: null,
          policeNumber: null,
          armyNumber: null,
          crowdNumber: null,
          windExtinguisher: null,
          secondTool: null,
          waterGun: null,
          elseThings: null,
          forestComposition: null,
          forestToken: null,
          porosities: null,
          weather: null,
          temperature: null,
          fireInsuranceLevel: null,
          windLevel: null,
          windDirection: null,
          commandUnit: null,
          commandName: null,
          commandPosition: null,
          surveyUnit: null,
          surveyName: null,
          surveyPosition: null,
          accidentName: null,
          accidentSex: null,
          accidentAge: null,
          accidentPosition: null,
          accidentUnit: null,
          dealType: null,
          dealNumber: null,
          criminalDealNumber: null,
          accidentDealSituation: null,
          responsibilityDealSituation: null,
          leadershipDealSituation: null,
          townForm: null,
          townAudit: null,
          cityForm: null,
          cityAudit: null
        }
      },
      /**
       * eventStatusValue 事件状态
       * isSend 是否办理
       * */
      async updateCentereventTEventcatalogueStatus(eventStatus, isSend) {
        this.eventStatusButton = eventStatus
        let that=this
        if (!isSend) {//事件弹窗
          if (eventStatus == 'qs') {//签收
            that.eventConfirmTitle = '事件签收'
            let param = { parentId: that.eventType }
            await listSJfl(param).then(res => {
              //事件类型
              if (res.code == 200) {
                that.eventTypeList = res.data
              }
            })
            await listYuAn().then(res => {
              //关联预案
              if (res.code == 200) {
                that.guanLianYuAnList = res.data
              }
            })
            await selectByeventCode(that.eventCode).then(res => {
              //签收部门
              if (res.code == 200) {
                that.deptOptions = res.data
                that.deptNameitem = '签收部门'
              }
            })
            that.showEventConfirm = true
          } else if (eventStatus == 'qr') {//确认
            that.eventConfirmTitle = '事件确认'
          } else if (eventStatus == 'wb') {//误报
            that.eventConfirmTitle = '事件误报'
            await selectByeventCode(that.eventCode).then(res => {
              //签收部门
              if (res.code == 200) {
                that.deptOptions = res.data
                that.deptNameitem = '签收部门'
              }
            })
            that.showEventConfirm = true
          } else if (eventStatus == 'cf') {//重复
            that.eventConfirmTitle = '事件重复'
            await selectByeventCode(that.eventCode).then(res => {
              //签收部门
              if (res.code == 200) {
                that.deptOptions = res.data
                that.deptNameitem = '签收部门'
              }
            })
            that.showEventConfirm = true
          } else if (eventStatus == 'ld') {//联动
            await selectByeventCode(that.eventCode).then(res => {
              //签收部门
              if (res.code == 200) {
                that.deptOptions = res.data
                that.deptNameitem = '发起部门'
              }
            })
            that.eventConfirmTitle = '事件联动'
            /** 查询部门树结构 */
            await deptTreeselect().then(response => {
              that.deptOptionsLiandong = response.data
            })
            that.showEventConfirm = true
          } else if (eventStatus == 'gd') {//归档填报
            that.showEventConfirm_gd = true
          }
        } else {//事件提交后台
          if (eventStatus == 'ld') {
            //事件处理流程--联动
            let array = that.$refs.LiandongDept.getCheckedNodes()
            if (array != null && array.length > 0) {
              for (let i = 0; i < array.length; i++) {
                that.sendLianDongDept.push({ 'taskDeptId': array[i].id, 'taskDeptName': array[i].label })
              }
            }
            if (that.sendTaskSource == '' || that.sendTaskSource == null) {
              that.$message.error(`请选择任务来源!`)
              return
            }
            if (that.sendTaskContent == '' || that.sendTaskContent == null) {
              that.$message.error(`请输入任务内容!`)
              return
            }
            if (that.sendTaskTitle == '' || that.sendTaskTitle == null) {
              that.$message.error(`请输入任务标题!`)
              return
            }
            if (that.sendLianDongDept == '' || that.sendLianDongDept == null) {
              that.$message.error(`请选择任务联动部门!`)
              return
            }
            if (that.sendDeptId == '' || that.sendDeptId == null || that.sendDeptName == '' || that.sendDeptName == null) {
              that.$message.error(`请选择任务发起部门!`)
              return
            }
            let param = {
              sendDeptId: that.sendDeptId,
              sendDept: that.sendDeptName,
              eventCode: that.eventCode,
              longitude: that.longitude,
              latitude: that.latitude,
              taskTitle: that.sendTaskTitle,
              taskSource: that.sendTaskSource,
              taskContent: that.sendTaskContent,
              taskDept: that.sendLianDongDept
            }
            sendTask(param).then(res => {
              if (res.code == 200) {
                that.$message.success(`联动发起成功!`)
                that.refreshEventDialog(that.eventCode)
                that.cancelEventConfirm_send()
                that.showEventConfirm = false
              }
            })

          } else if (eventStatus == 'gd') {
            let double = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;    //数字和两位小数
            let number = /^[+]{0,1}(\d+)$/g;    //正整数

            if(!double.test(that.table2.areaTotal)){
              that.$message.error(`面积只能填写到小数后两位!`)
              return
            }
            if(!number.test(that.table2.peopleTotal)){
              that.$message.error(`人员请填写正整数!`)
              return
            }
            if(that.table2.forestComposition == '' || that.table2.forestComposition==null){
              that.$message.error(`林木组成不能为空!`)
              return
            }
            if(that.table2.forestToken == '' || that.table2.forestToken==null){
              that.$message.error(`林令不能为空!`)
              return
            }
            if(that.table2.porosities == '' || that.table2.porosities==null){
              that.$message.error(`疏密度不能为空!`)
              return
            }

            //事件处理流程--归档
            let param = {
              deptId: that.deptId,
              eventCode: that.eventCode,
              eventStatus: eventStatus,
              id: that.eventId,
              czlx: '',
              forestFireLoss: { eventId: that.eventCode, table1: that.table1 },
              fireInformation: { eventId: that.eventCode, table2: that.table2 },
              array: that.regionalFlagObj.array
            }
            updateCentereventTEventcatalogueStatus(param).then(res => {
              if (res.code == 200) {
                that.$message.success(`处理成功!`)
                that.refreshEvent(that.eventCode)
                that.cancelEventConfirm_send()
                that.showEventConfirm_gd = false
                that.$emit('getEventList', that.calendarDay,10,1)
                that.$emit('getSupermap', that.calendarDay)
              }
            })
          } else {
            if (eventStatus == 'qs' || eventStatus == 'wb' || eventStatus == 'cf') {
              if (that.sendDeptId == '' || that.sendDeptId == null || that.sendDeptName == '' || that.sendDeptName == null) {
                that.$message.error(`请选择部门!`)
                return
              }
              if (eventStatus == 'qs') {
                if (that.sendHuoZaiBanJing == '' || that.sendHuoZaiBanJing == null) {
                  that.$message.error(`请输入火灾半径!`)
                  return
                }
                if (that.sendEventType == '' || that.sendEventType == null) {
                  that.$message.error(`请选择事件类型!`)
                  return
                }
              }
            } else {
              that.sendDeptId = that.deptId
            }
            //事件处理流程
            let param = {
              phones:that.sendUserFegin,
              eventCode: that.eventCode,
              deptId: that.sendDeptId,
              deptName: that.sendDeptName,
              eventStatus: eventStatus,
              eventType: that.sendEventType,
              id: that.eventId,
              czlx: '',
              cameraCode: that.cameraCode,
              fireRadius: that.sendHuoZaiBanJing,
              reserve: that.sendGuanLianYuAn
            }
            updateCentereventTEventcatalogueStatus(param).then(res => {
              if (res.code == 200) {
                that.$message.success(`处理成功!`)
                that.refreshEvent(that.eventCode)
                that.cancelEventConfirm_send()
                that.showEventConfirm = false
                that.$emit('getEventList', that.calendarDay,10,1)
                that.$emit('getSupermap', that.calendarDay)
              }
            })
          }
        }
      },
      filterNode(value, data) {
        //树搜索
        if (!value) return true
        return data.label.indexOf(value) !== -1
      },
      sendEventLog() {
        //日志发送
        let param = { eventCode: this.eventCode, logContent: this.eventLog,operation:"bus_oper_type_2",operationType:"log_oper_type_1"}
        sendEventLog(param).then(res => {
          if (res.code == 200) {
            this.$message.success(`发送成功!`)
            this.eventLog = null
            this.refreshEventDialog(this.eventCode)
          }
        })
      },
      showEventLogUpload() {
        this.$refs.eventLogUpload.eventLogUpload(this.eventCode)
      },
      cancelEventShow() {
        this.dataStatus = null
        this.deptId = null
        console.log('关闭事件弹窗')
        this.eventLogList = []
      },
      showEventDialog(eventCode) {
        this.eventCode = eventCode
        let that = this
        //获取事件详情
        getEventDetail({ eventCode: eventCode }).then(res => {
          that.eventDialog = true
          that.eventLogList = res.data.eventlog//日志列表
          that.visuForestCloudYuAnBo = res.data.visuForestCloudYuAnBo//应急预案
          that.address = res.data.catalogue.address
          that.eventStatusValue = res.data.catalogue.eventStatusValue
          that.eventType = res.data.catalogue.eventType
          that.dataStatus = res.data.catalogue.dataStatus
          that.deptId = res.data.catalogue.deptId
          that.eventId = res.data.catalogue.id
          that.longitude = res.data.catalogue.longitude
          that.latitude = res.data.catalogue.latitude
          that.eventName = res.data.catalogue.eventName
          let markersMap = {
            lng: 124.59,
            lat: 43.02,
            icon: 'marker',
            bindPopupHtml: '',
            click: '',
            parameter: '',
            keepBindPopup: false,
            isAggregation: false,
            radius: 0
          }
          if (res.data.catalogue.eventStatusValue == 'forest_event_status_1' && res.data.catalogue.urgeCount == 0) {
            markersMap.icon = 'sj-icon-map-xinshangbao'
          }
          if (res.data.catalogue.eventStatusValue == 'forest_event_status_1' && res.data.catalogue.urgeCount > 0) {
            markersMap.icon = 'sj-icon-map-cuiban'
          } else if (res.data.catalogue.eventStatusValue == 'forest_event_status_2') {
            markersMap.icon = 'sj-icon-map-qianshou'
          } else if (res.data.catalogue.eventStatusValue == 'forest_event_status_5') {
            markersMap.icon = 'sj-icon-map-banjie'
          } else if (res.data.catalogue.eventStatusValue == 'forest_event_status_6') {
            markersMap.icon = 'sj-icon-map-guidang'
          } else if (res.data.catalogue.eventStatusValue == 'forest_event_status_7') {
            markersMap.icon = 'sj-icon-map-queren'
          }
          markersMap.lng = res.data.catalogue.longitude
          markersMap.lat = res.data.catalogue.latitude
          if (res.data.eventdetail != null && res.data.eventdetail.length > 0 && res.data.eventdetail[0].fireRadius != null && res.data.eventdetail[0].fireRadius != '' && res.data.eventdetail[0].fireRadius > 0) {
            markersMap.radius = res.data.eventdetail[0].fireRadius
          }
          setTimeout(() => {
            that.$refs.supermapDialog1.dynamicPlotting()//弹出动态绘制窗口，防止截图位置改变
            that.$refs.supermapDialog1.clearM(false)
            that.$refs.supermapDialog1.setMarkersRadius([markersMap])
            that.$refs.supermapDialog1.dropLocation10(res.data.catalogue.latitude, res.data.catalogue.longitude)
          }, 2000)
          if (res.data.centermonitorTCamera != null) {
            that.cameraCode = res.data.centermonitorTCamera.cameraCode;
            let markersMap = {
              lng: 124.59,
              lat: 43.02,
              icon: 'camera',
              bindPopupHtml: '',
              click: 'preview',
              parameter: {code:res.data.centermonitorTCamera.cameraCode,type:res.data.centermonitorTCamera.cameraFactory},
              keepBindPopup: false,
              isAggregation: false,
              radius: 0
            }
            markersMap.bindPopupHtml = '<div class="map-tip">' +
              '<span>' +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              '                  <h4>摄像头名称：' + res.data.centermonitorTCamera.cameraName + '</h4>' +
              '                </div>' +
              '                </div>' +
              '                </span>' +
              '<span>' +
              '</div>'
            markersMap.lng = res.data.centermonitorTCamera.longitude
            markersMap.lat = res.data.centermonitorTCamera.latitude
            setTimeout(() => {
              that.$refs.supermapDialog1.setMarkers([markersMap])
            }, 2000)
          }
        })
      },
      refreshEvent(eventCode) {
        this.eventCode = eventCode
        let that = this
        //刷新--事件详情
        getEventDetail({ eventCode: eventCode }).then(res => {
          that.eventDialog = true
          that.eventLogList = res.data.eventlog
          that.visuForestCloudYuAnBo = res.data.visuForestCloudYuAnBo//应急预案
          that.address = res.data.catalogue.address
          that.eventStatusValue = res.data.catalogue.eventStatusValue
          that.eventType = res.data.catalogue.eventType
          that.dataStatus = res.data.catalogue.dataStatus
          that.deptId = res.data.catalogue.deptId
          that.eventId = res.data.catalogue.id
          that.latitude = res.data.catalogue.latitude
          that.longitude = res.data.catalogue.longitude
          that.eventName = res.data.catalogue.eventName
          let markersMap = {
            lng: 124.59,
            lat: 43.02,
            icon: 'marker',
            bindPopupHtml: '',
            click: '',
            parameter: '',
            keepBindPopup: false,
            isAggregation: false,
            radius: 0
          }
          if (res.data.catalogue.eventStatusValue == 'forest_event_status_1' && res.data.catalogue.urgeCount == 0) {
            markersMap.icon = 'sj-icon-map-xinshangbao'
          }
          if (res.data.catalogue.eventStatusValue == 'forest_event_status_1' && res.data.catalogue.urgeCount > 0) {
            markersMap.icon = 'sj-icon-map-cuiban'
          } else if (res.data.catalogue.eventStatusValue == 'forest_event_status_2') {
            markersMap.icon = 'sj-icon-map-qianshou'
          } else if (res.data.catalogue.eventStatusValue == 'forest_event_status_5') {
            markersMap.icon = 'sj-icon-map-banjie'
          } else if (res.data.catalogue.eventStatusValue == 'forest_event_status_6') {
            markersMap.icon = 'sj-icon-map-guidang'
          } else if (res.data.catalogue.eventStatusValue == 'forest_event_status_7') {
            markersMap.icon = 'sj-icon-map-queren'
          }
          markersMap.lng = res.data.catalogue.longitude
          markersMap.lat = res.data.catalogue.latitude
          if (res.data.eventdetail != null && res.data.eventdetail.length > 0 && res.data.eventdetail[0].fireRadius != null && res.data.eventdetail[0].fireRadius != '' && res.data.eventdetail[0].fireRadius > 0) {
            markersMap.radius = res.data.eventdetail[0].fireRadius
          }
          setTimeout(() => {
            that.$refs.supermapDialog1.clearM(false)
            if (res.data.eventdetail != null && res.data.eventdetail.length > 0 && res.data.eventdetail[0].fireRadius != null && res.data.eventdetail[0].fireRadius != '' && res.data.eventdetail[0].fireRadius > 0) {
              that.$refs.supermapDialog1.setMarkersRadius([markersMap])
            } else {
              that.$refs.supermapDialog1.setMarkers([markersMap])
            }
            that.$refs.supermapDialog1.dropLocation10(res.data.catalogue.latitude, res.data.catalogue.longitude)
          }, 2000)
          if (res.data.centermonitorTCamera != null) {
            let markersMap = {
              lng: 124.59,
              lat: 43.02,
              icon: 'camera',
              bindPopupHtml: '',
              click: 'preview',
              parameter: {code:res.data.centermonitorTCamera.cameraCode,type:res.data.centermonitorTCamera.cameraFactory},
              keepBindPopup: false,
              isAggregation: false,
              radius: 0
            }
            markersMap.bindPopupHtml = '<div class="map-tip">' +
              '<span>' +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              '                  <h4>摄像头名称：' + res.data.centermonitorTCamera.cameraName + '</h4>' +
              '                </div>' +
              '                </div>' +
              '                </span>' +
              '<span>' +
              '</div>'
            markersMap.lng = res.data.centermonitorTCamera.longitude
            markersMap.lat = res.data.centermonitorTCamera.latitude
            setTimeout(() => {
              that.$refs.supermapDialog1.setMarkers([markersMap])
            }, 2000)
          }
        })
      },
      refreshEventDialog(eventCode) {
        //刷新--事件日志
        getEventDetail({ eventCode: eventCode }).then(res => {
          this.eventLogList = res.data.eventlog
          this.visuForestCloudYuAnBo = res.data.visuForestCloudYuAnBo//应急预案
        })
      },
      // 页面元素转图片
      toImage() {
        this.$message.success(`正在上传!请稍后...`)
        // 手动创建一个 canvas 标签
        const canvas = document.createElement('canvas')
        // 获取父标签，意思是这个标签内的 DOM 元素生成图片
        // imageTofile是给截图范围内的父级元素自定义的ref名称
        // let canvasBox = this.$refs.imageTofile
        let canvasBox = document.getElementById('forestWarmSuperMap')
        let toolbar = document.getElementById('toolbar')
        canvasBox.removeChild(toolbar)
        // 获取父级的宽高
        const width = parseInt(window.getComputedStyle(canvasBox).width)
        const height = parseInt(window.getComputedStyle(canvasBox).height)

        // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
        canvas.width = width * 2
        canvas.height = height * 2
        canvas.style.width = width + 'px'
        canvas.style.height = height + 'px'
        const context = canvas.getContext('2d')
        context.scale(2, 2)
        const options = {
          backgroundColor: null,
          canvas: canvas,
          useCORS: true
        }
        html2canvas(canvasBox, options).then((canvas) => {
          // toDataURL 图片格式转成 base64
          let dataBase64 = canvas.toDataURL('image/png')
          this.uploadBase64(dataBase64)
        })
        canvasBox.appendChild(toolbar)
      },
      uploadBase64(dataBase64) {
        //事件详情截图直接上传日志
        uploadBase64({ eventCode: this.eventCode, base64: dataBase64 }).then(res => {
          if (res.code == 200) {
            this.$message.success(`截图上传成功!`)
            this.refreshEventDialog(this.eventCode)
          }
        })
      },
      regionalFlagAdd: function() {//火灾区域
        this.regionalFlagObj.array = []
        this.regionalFlagOpen = true
      },
      showAreaLatLng: function(latlng) {//获取火灾区域经纬度
        this.regionalFlagObj.array = latlng
        this.$modal.msgSuccess('获取坐标成功！')
      },
      /** ----------------------------------摄像头预览开始------------------------------------- */
      alertLogin: function() {
        this.$modal.msg('登录中....')
      },
      alertLoginSuccess: function() {
        this.$modal.msgSuccess('登录成功！')
      },
      alertLoginFailed: function() {
        this.$modal.msgError('登陆失败！')
      },
      alertReinstall: function() {
        this.$modal.msgWarning('请重新安装客户端')
      },
      cancelEventLocationShow() {
        if (this.oWebControl != null) {
          this.oWebControl.JS_HideWnd()   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
          this.oWebControl.JS_Disconnect().then(function() {  // 断开与插件服务连接成功
            },
            function() {  // 断开与插件服务连接失败
            })
        }
      },
      /** 预览按钮操作 */
      preview(cameraParam) {
        if(cameraParam.type=='1'){
          getDahuaVideoServer().then(newResponse => {
            console.log(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(cameraParam.code)
                  } else {
                    this.alertLoginFailed()
                  }
                })
              } else { // 连接客户端失败
                this.alertReinstall()
              }
            })
          })
        }else if(cameraParam.type=='0'){
          let that = this
          that.cameraVisible = true
          getHaiKangVideoServer({cameraCode:cameraParam.code}).then(newResponse => {
            that.cameraTitle = '摄像头-'+newResponse.data.cameraName
            that.initPlugin(newResponse.data.appkey,newResponse.data.loginIp,newResponse.data.secret,newResponse.data.loginPort)
            setTimeout(function() {
              that.playhk(newResponse.data.channelCode)
            }, 5000)
          })
        }

      },
      realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
        if (!this.isLogin) {
          this.$Message.info('正在登陆客户端，请稍等......')
          return false
        }
        this.ws.openVideo(cameraParams)
      },
      /** ----------------------------------摄像头预览结束------------------------------------- */


      /** ----------------------------------海康摄像头预览开始------------------------------------- */
      // 创建播放实例
      initPlugin(newappkey, newloginIp, newsecret, newloginPort) {
        let that = this
        that.oWebControl = new WebControl({
          szPluginContainer: 'playWnd',                       // 指定容器id
          iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
          iServicePortEnd: 15909,
          szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11',   // 用于IE10使用ActiveX的clsid
          cbConnectSuccess: function() {                     // 创建WebControl实例成功
            that.oWebControl.JS_StartService('window', {         // WebControl实例创建成功后需要启动服务
              dllPath: './VideoPluginConnect.dll'         // 值"./VideoPluginConnect.dll"写死
            }).then(function() {                           // 启动插件服务成功
              that.oWebControl.JS_SetWindowControlCallback({   // 设置消息回调
                cbIntegrationCallBack: cbIntegrationCallBack
              })

              that.oWebControl.JS_CreateWnd('playWnd', 1020, 600).then(function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
                that.init(newappkey, newloginIp, newsecret, newloginPort)  // 创建播放实例成功后初始化
              })
            }, function() { // 启动插件服务失败
            })
          },
          cbConnectError: function() { // 创建WebControl实例失败
            that.oWebControl = null
            $('#playWnd').html('插件未启动，正在尝试启动，请稍候...<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
            WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
            that.initCount++
            if (that.initCount < 3) {
              setTimeout(function() {
                that.initPlugin(newappkey, newloginIp, newsecret, newloginPort)
              }, 3000)
            } else {
              $('#playWnd').html('插件启动失败，请检查插件是否安装！<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
            }
          },
          cbConnectClose: function(bNormalClose) {
            // 异常断开：bNormalClose = false
            // JS_Disconnect正常断开：bNormalClose = true
            that.oWebControl = null
          }
        })
      },
      //播放海康摄像头
      playhk(channelCode) {
        var cameraIndexCode = channelCode     //获取输入的监控点编号值，必填
        var streamMode = 0                                     //主子码流标识：0-主码流，1-子码流
        var transMode = 1                                      //传输协议：0-UDP，1-TCP
        var gpuMode = 0                                        //是否启用GPU硬解，0-不启用，1-启用
        var wndId = -1                                         //播放窗口序号（在2x2以上布局下可指定播放窗口）

        cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, '')
        cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, '')

        this.oWebControl.JS_RequestInterface({
          funcName: 'startPreview',
          argument: JSON.stringify({
            cameraIndexCode: cameraIndexCode,                //监控点编号
            streamMode: streamMode,                         //主子码流标识
            transMode: transMode,                           //传输协议
            gpuMode: gpuMode,                               //是否开启GPU硬解
            wndId: wndId                                     //可指定播放窗口
          })
        })
      },
      //初始化
      init(newappkey, newloginIp, newsecret, newloginPort) {
        let that = this
        that.getPubKey(function() {
          ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
          var appkey = newappkey                           //综合安防管理平台提供的appkey，必填
          var secret = that.setEncrypt(newsecret)   //综合安防管理平台提供的secret，必填
          var ip = newloginIp                           //综合安防管理平台IP地址，必填
          var playMode = 0                                  //初始播放模式：0-预览，1-回放
          var port = Number(newloginPort)                                    //综合安防管理平台端口，若启用HTTPS协议，默认443
          var snapDir = 'D:\\SnapDir'                       //抓图存储路径
          var videoDir = 'D:\\VideoDir'                     //紧急录像或录像剪辑存储路径
          var layout = '1x1'                                //playMode指定模式的布局
          var enableHTTPS = 1                               //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
          var encryptedFields = 'secret'					   //加密字段，默认加密领域为secret
          var showToolbar = 1                               //是否显示工具栏，0-不显示，非0-显示
          var showSmart = 1                                 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
          var buttonIDs = '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769'  //自定义工具条按钮
          ////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////

          that.oWebControl.JS_RequestInterface({
            funcName: 'init',
            argument: JSON.stringify({
              appkey: appkey,                            //API网关提供的appkey
              secret: secret,                            //API网关提供的secret
              ip: ip,                                    //API网关IP地址
              playMode: playMode,                        //播放模式（决定显示预览还是回放界面）
              port: port,                                //端口
              snapDir: snapDir,                          //抓图存储路径
              videoDir: videoDir,                        //紧急录像或录像剪辑存储路径
              layout: layout,                            //布局
              enableHTTPS: enableHTTPS,                  //是否启用HTTPS协议
              encryptedFields: encryptedFields,          //加密字段
              showToolbar: showToolbar,                  //是否显示工具栏
              showSmart: showSmart,                      //是否显示智能信息
              buttonIDs: buttonIDs                       //自定义工具条按钮
            })
          }).then(function(oData) {
            that.oWebControl.JS_Resize(1020, 600)  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
          })
        })
      },
      //获取公钥
      getPubKey(callback) {
        let that = this
        that.oWebControl.JS_RequestInterface({
          funcName: 'getRSAPubKey',
          argument: JSON.stringify({
            keyLength: 1024
          })
        }).then(function(oData) {
          console.log(oData)
          if (oData.responseMsg.data) {
            that.pubKey = oData.responseMsg.data
            callback()
          }
        })
      },
      //RSA加密
      setEncrypt(value) {
        var encrypt = new JSEncrypt()
        encrypt.setPublicKey(this.pubKey)
        return encrypt.encrypt(value)
      },
      //加入华为视频会议方法
      joinMeeting(){
        let eventId = this.eventId;
        let subject = "视频会议";
        let nickName;
        getUserInfo().then(res => {
          nickName = res.data.nickName;
        });
        hasConferences(eventId).then(res => {
          let data = res.data;
          /**如果没有正在开启的会议会返回空对象**/
          if(res.code == 200 && Object.keys(data).length === 0){
            createConferences(eventId,subject).then(res => {
              let data = res.data;
              if(res.code == 200){
                window.open("/hwMeeting/meeting.html?nickName="+encodeURI(encodeURI(nickName))+"&conferenceID="+data.conferenceID+"&password="+data.password);
              }
            });
          }else{
            window.open("/hwMeeting/meeting.html?nickName="+encodeURI(encodeURI(nickName))+"&conferenceID="+data.conferenceID+"&password="+data.password);
          }
        });
      }
      /** ----------------------------------海康摄像头预览结束------------------------------------- */
    }
  }

  // 推送消息
  function cbIntegrationCallBack(oData) {
    console.log(JSON.stringify(oData.responseMsg))
  }
</script>


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

  //弹层样式
  //.customWidthMp4 {
  //  width: 70px !important;
  //  height: 70px !important;
  //}

  .tree-border {
    border: 1px $barBorder;

  }

  button {
    padding: .5rem;
  }

  /** 火灾报告**/
  //@font-face {
  //  font-family: 'fontnameRegular';
  //  src: url('../../../../assets/styles/FZYTJW_0.TTF');
  //}

  body,
  html,
  * {
    padding: 0px;
    margin: 0px;
    font-family: "fontnameRegular";
  }

  .table-container {
    width: 100%;
  }

  .txt_right {
    text-align: right !important;
  }

  .txt_left {
    text-align: left !important;
  }

  table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 99%;
    margin: 0 auto;
    color: $inBlue;
  }

  table input {
    font-size: 1rem;
    border: 0px;
    outline: 0px;
    font-family: "微软雅黑";
    background: none;
    color: $inBlue;

  }

  table th input:hover {
    background: $eventBG;
  }


  table thead th {
    font-size: 1rem;
    font-family: "宋体";
    height: 2rem;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    outline: 0px;
  }

  table tr td {
    font-size: 1rem;
    font-family: "fontnameRegular";
    height: 2rem;
    border: 1px $searchBorder;
    text-align: center;

  }

  .font1 {
    font-size: 1.7rem;
    font-weight: bolder;
  }

  .border0 {
    width: 100% !important;
  }

  .border0 tr td {
    border: 0px !important;
  }

  table tr td input {
    width: 100%;
    /*    display: inline-block;*/
    outline: 0px;
    text-align: left;
    height: 94%;
    color: $inBlue;
    background: none;
    float: left;
    padding: 0 .5rem;
  }

  table tr td input:hover {
    background: $eventBG;
  }


  .int_tr td input {
    text-align: center !important;
  }

  .table2 tr th {
    font-size: 1.7rem;
    padding: .5rem 0;
    font-family: 'fontnameRegular';
  }

  .table2 tr td {
    font-size: 1rem;
  }

  .table2 tr td select {
    border: 0px !important;
    outline: 0px;
    width: 100%;
    font-family: "微软雅黑";
    font-size: 1rem;
    padding-left: 1%;
    color: $inBlue;
    background: none;
  }

  .table2 tr td select:hover {
    background: $eventBG;
  }

  .table2 tr td select option {
    font-size: 1rem;
    font-family: "微软雅黑";
  }

  .border_l0 {
    // border-right: 1px solid #ececec !important;
  }

  .table2 tr td textarea {
    border: 0px !important;
    outline: 0px;
    width: 98%;
    padding: .5rem;
    font-size: 1rem;
    resize: none;
    background: none;
    color: $inBlue;

  }

  .table2 tr td textarea:hover {
    background: $eventBG;
  }

  .tr_border td {
    border-right: 0px !important;
    border-left: 0px !important;
    border-bottom: 0px !important;
    font-size: 15px;
  }

  .btm-btn-group {
    padding: 1rem 0;
    width: 100%;
    display: flex;

    button {
      padding: .5rem 2rem;
    }
  }


  // 20220928
  .yatz_button {
    padding: 0.5rem 0.5rem;
    color: #409EFF;
    background: none;
    border-color: #409EFF;
  }

  .yatz_button:hover {
    color: #fff;
    background: #409EFF;
    border-color: #409EFF;
  }

  .fr_button {
    float: right;
    padding: 0.5rem 1.5rem;
  }

  .bottom {
    width: 100%;
    height: calc(100% - 80px);
    display: flex;

    .bottomLeft {
      width: 288px;
      height: 500px;
      overflow-y: auto;

      .leftItem {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        cursor: pointer;
      }
    }

    .bottomRight {
      width: calc(100% - 288px);
      height: 500px;
      box-sizing: border-box;
      padding: 36px 36px 0 36px;
      overflow-y: auto;

      .bottomRightContent {
        width: 100%;
        box-sizing: border-box;
        padding-bottom: 36px;

        .bottomRightContentHead {
          height: 25px;
          font-family: PingFang SC;
          font-style: normal;
          font-weight: 600;
          font-size: 24px;
          line-height: 25px;
          text-transform: capitalize;
          color: rgba(0, 0, 0, 0.85);
          margin-bottom: 32px;
        }

        .bottomRightContentBody {
          .el-col {
            position: relative;
            margin-bottom: 18px;

            .circle {
              display: inline-block;
              width: 6px;
              height: 6px;
              background: #4677f6;
              border-radius: 50%;
              position: absolute;
              top: 8px;
              left: 0;
            }

            .word {
              margin-left: 12px;
              font-family: PingFang SC;
              font-style: normal;
              font-weight: normal;
              font-size: 14px;
              color: #4677f6;
              cursor: pointer;
            }

            .word:hover {
              text-decoration: underline;
            }

            .topPlace {
              position: absolute;
              top: 1px;
              margin-left: 8px;
            }
          }
        }

        .bottomRightContentFooter {
          height: 1px;
          width: 100%;
          margin-top: 14px;
        }
      }
    }
  }
</style>