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">
                  <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']"
                                   style="padding-bottom:1rem ;">
                    <div class="i-list-con">
                      <div class="this-con">
                        <div class="z-info-list" style="margin-top: 0;">
                          <el-timeline>
                            <el-timeline-item color="#2bacf7" :timestamp="item.createTime"
                                              placement="top" v-for="(item,index) in eventLogList">
                              <el-card style="width: 40vh">
                                <div class="z-info-list-con">
                                  <div class="user-and-time flex-d">
                                    <span>{{ item.createName }}</span>
                                    <span v-if="eventLogList.length - 1 == index&&address!=null&&address!=''"><i
                                      class="el-icon-location"></i> {{ address }}</span>
                                    <span v-else></span>
                                  </div>
                                  <div class="z-info">
                                    <div class="this-con-list-info">
                                      {{ item.logContent }}
                                    </div>
                                    <div>
                                      <router-link to="#"
                                                   @click.native="clickFile(itemfile.fileUrl,itemfile.fileName,itemfile.fileType)"
                                                   v-for="(itemfile,indexfile) in item.fileVOs">
                                        <el-image :src="itemfile.fileUrl" v-if="itemfile.fileType=='image'"
                                                  :preview-src-list="assetTypeAnImage(item.fileVOs)"
                                                  style="width:3rem; height:3rem;margin: 2px;"
                                                  :title="itemfile.fileName">
                                        </el-image>
                                        <img v-else-if="itemfile.fileType=='video'"
                                             style="width:3rem; height:3rem;margin: 2px;"
                                             :src="require('@/assets/fileTypeImage/mp4.png')"
                                             :title="itemfile.fileName">
                                        </img>
                                        <img v-else-if="itemfile.fileType=='word'"
                                             style="width:3rem; height:3rem;margin: 2px;"
                                             :src="require('@/assets/fileTypeImage/word.png')"
                                             :title="itemfile.fileName">
                                        </img>
                                        <img v-else-if="itemfile.fileType=='excel'"
                                             style="width:3rem; height:3rem;margin: 2px;"
                                             :src="require('@/assets/fileTypeImage/excel.png')"
                                             :title="itemfile.fileName">
                                        </img>
                                        <img v-else
                                             style="width:3rem; height:3rem;margin: 2px;"
                                             :src="require('@/assets/fileTypeImage/file.png')"
                                             :title="itemfile.fileName">
                                        </img>
                                      </router-link>
                                    </div>
                                  </div>
                                </div>
                              </el-card>
                            </el-timeline-item>
                          </el-timeline>
                        </div>
                      </div>
                    </div>
                  </dv-border-box-7>
                </div>
                <div class="forthis2">
                  <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">
                    <div class="i-list-con">
                      <div class="this-con h-25 no-padding">
                        <div class="z-info-list" style="margin-top: 0;">
                          <div class="z-info-btm-grp">
                            <div class="z-info-btm-grp-top">
                              <div class="z-info-btm-grp-left">
                                <!--                                <el-button size="small" icon="el-icon-s-flag">责任制-->
                                <!--                                </el-button>-->
                                <el-button size="small" icon="el-icon-upload" @click="showEventLogUpload()">上传
                                </el-button>
                                <el-button size="small" icon="el-icon-download" @click="toImage()">截图上传
                                </el-button>
                                <el-button size="small" icon="el-icon-download" @click="showResponsibility()">责任制
                                </el-button>
                              </div>
                              <div class="z-info-btm-grp-right">
                                <el-button size="small" icon="el-icon-mic" @click="joinMeeting()">会议
                                </el-button>
                              </div>
                            </div>
                            <div class="z-info-btm-input">
                              <el-input type="textarea" v-model="eventLog"
                                        :autosize="{ minRows: 7, maxRows: 7}" placeholder="请输入反馈信息">
                              </el-input>
                              <div class="z-info-btm-input-btn" v-if="eventStatusValue=='forest_event_status_1'">
                                <div style="text-align:left">
                                  <el-button size="small"
                                             icon="el-icon-s-flag"
                                             @click="updateCentereventTEventcatalogueStatus('qr',true)">
                                    确认
                                  </el-button>
                                  <el-button size="small"
                                             icon="el-icon-question"
                                             @click="updateCentereventTEventcatalogueStatus('wb',false)">
                                    误报
                                  </el-button>
                                  <el-button size="small"
                                             icon="el-icon-warning"
                                             @click="updateCentereventTEventcatalogueStatus('cf',false)">
                                    重复
                                  </el-button>
                                </div>
                                <el-button size="small" icon="el-icon-chat-dot-square" @click="sendEventLog()">发送
                                </el-button>
                              </div>
                              <div class="z-info-btm-input-btn" v-else-if="eventStatusValue=='forest_event_status_7'">
                                <div style="text-align:left">
                                  <el-button size="small"
                                             icon="el-icon-s-flag"
                                             @click="updateCentereventTEventcatalogueStatus('qs',false)">
                                    签收
                                  </el-button>
                                  <!--<el-button size="small"-->
                                             <!--icon="el-icon-question"-->
                                             <!--@click="updateCentereventTEventcatalogueStatus('wb',false)">-->
                                    <!--误报-->
                                  <!--</el-button>-->
                                  <!--<el-button size="small"-->
                                             <!--icon="el-icon-warning"-->
                                             <!--@click="updateCentereventTEventcatalogueStatus('cf',false)">-->
                                    <!--重复-->
                                  <!--</el-button>-->
                                </div>
                                <el-button size="small" icon="el-icon-chat-dot-square" @click="sendEventLog()">发送
                                </el-button>
                              </div>
                              <div class="z-info-btm-input-btn" v-else-if="eventStatusValue=='forest_event_status_2'">
                                <div>
                                  <!--<el-button size="small"-->
                                             <!--icon="el-icon-question"-->
                                             <!--@click="updateCentereventTEventcatalogueStatus('wb',false)">-->
                                    <!--误报-->
                                  <!--</el-button>-->
                                  <!--<el-button size="small"-->
                                             <!--icon="el-icon-warning"-->
                                             <!--@click="updateCentereventTEventcatalogueStatus('cf',false)">-->
                                    <!--重复-->
                                  <!--</el-button>-->
                                  <el-button size="small"
                                             icon="el-icon-phone" style="text-align:left"
                                             @click="updateCentereventTEventcatalogueStatus('ld',false)">
                                    联动
                                  </el-button>
                                  <el-button size="small" v-if="dataStatus=='1'"
                                             icon="el-icon-success" style="text-align:left"
                                             @click="updateCentereventTEventcatalogueStatus('bj',true)">
                                    办结
                                  </el-button>
                                </div>
                                <el-button size="small" icon="el-icon-chat-dot-square" @click="sendEventLog()">发送
                                </el-button>
                              </div>
                              <div class="z-info-btm-input-btn"
                                   v-else-if="eventStatusValue=='forest_event_status_5'&&dataStatus=='1'">
                                <el-button size="small"
                                           icon="el-icon-success" style="text-align:left"
                                           @click="updateCentereventTEventcatalogueStatus('gd',false)">
                                  填报
                                </el-button>
                                <el-button size="small" icon="el-icon-chat-dot-square" @click="sendEventLog()">发送
                                </el-button>
                              </div>
                              <div class="z-info-btm-input-btn" v-else>
                                <el-button size="small" icon="el-icon-chat-dot-square" @click="sendEventLog()">发送
                                </el-button>
                              </div>
                            </div>
                          </div>
                        </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="eventConfirmTitle" :visible.sync="showEventConfirm" v-if="showEventConfirm" width="50%"
               class="top-dialog"
               @close="cancelEventConfirm()">
      <el-form label-width="80px">
        <el-form-item label="火灾半径" v-if="eventStatusButton=='qs'">
          <el-input type="number" v-model="sendHuoZaiBanJing" placeholder="请输入火灾半径"/>
        </el-form-item>
        <el-form-item :label="deptNameitem">
          <!--          <treeselect v-model="deptId" :options="deptOptions" multiple :show-count="true"-->
          <!--                      placeholder="请选择签收部门"/>-->
          <el-select v-model="sendDeptName" clearable placeholder="请选择部门" class="m-r-1rem" @change="setValue"
                     v-if="eventStatusButton=='wb'||eventStatusButton=='qs'||eventStatusButton=='cf'||eventStatusButton=='ld'">
            <el-option
              v-for="item in deptOptions"
              :key="item.deptId"
              :label="item.deptName"
              :value="{value:item.deptId,label:item.deptName}">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="事件类型" v-if="eventStatusButton=='qs'">
          <el-select v-model="sendEventType" placeholder="请选择事件类型！" clearable>
            <el-option
              v-for="item in eventTypeList"
              :key="item.id"
              :label="item.eventTypeName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="任务来源" v-if="eventStatusButton=='ld'">
          <el-select v-model="sendTaskSource" placeholder="请选择任务来源！" clearable>
            <el-option
              v-for="dict in dict.type.task_source"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="联动标题" v-if="eventStatusButton=='ld'">
          <el-input v-model="sendTaskTitle" placeholder="请输入联动标题"/>
        </el-form-item>
        <el-form-item label="联动内容" v-if="eventStatusButton=='ld'">
          <el-input type="textarea" v-model="sendTaskContent"
                    :autosize="{ minRows: 7, maxRows: 7}" placeholder="请输入联动内容">
          </el-input>
        </el-form-item>
        <el-form-item label="联动部门" v-if="eventStatusButton=='ld'">
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText">
          </el-input>
          <el-tree
            class="tree-border tree_scroll"
            style="height: 20vh; overflow-y:scroll"
            :data="deptOptionsLiandong"
            show-checkbox
            ref="LiandongDept"
            node-key="id"
            :check-strictly="true"
            :filter-node-method="filterNode"
            :accordion="true"
            empty-text="加载中，请稍候"
            :props="defaultProps"
          ></el-tree>
          <!--            default-expand-all-->
        </el-form-item>
        <el-form-item label="关联预案" v-if="eventStatusButton=='qs'">
          <el-select v-model="sendGuanLianYuAn" placeholder="请选择关联预案！" clearable>
            <el-option
              v-for="item in guanLianYuAnList"
              :key="item.id"
              :label="item.resTitle"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <!--<el-form-item label="联系人" v-if="eventStatusButton=='qs'">-->
        <!--<el-select multiple collapse-tags v-model='sendUserFegin' placeholder='请选择联系人！' clearable filterable>-->
        <!--<el-option-->
        <!--v-for="item in userFeginList"-->
        <!--:label="item.nickName"-->
        <!--:value="item.phonenumber"-->
        <!--/>-->
        <!--</el-select>-->
        <!--</el-form-item>-->
        <el-button size="mini" type="primary" v-if="eventStatusButton=='qr'"
                   @click="updateCentereventTEventcatalogueStatus('qr',false)">确认
        </el-button>
        <el-button size="mini" type="primary" v-if="eventStatusButton=='qs'"
                   @click="updateCentereventTEventcatalogueStatus('qs',true)">签收
        </el-button>
        <el-button size="mini" type="primary" v-if="eventStatusButton=='wb'"
                   @click="updateCentereventTEventcatalogueStatus('wb',true)">误报
        </el-button>
        <el-button size="mini" type="primary" v-if="eventStatusButton=='cf'"
                   @click="updateCentereventTEventcatalogueStatus('cf',true)">重复
        </el-button>
        <el-button size="mini" type="primary" v-if="eventStatusButton=='ld'"
                   @click="updateCentereventTEventcatalogueStatus('ld',true)">发起联动
        </el-button>
      </el-form>
    </el-dialog>
    <el-dialog title="调整预案" :visible.sync="showGuanLianYuAnConfirm" v-if="showGuanLianYuAnConfirm" width="50%"
               class="top-dialog tz_tk">
      <el-form label-width="80px">
        <el-form-item label="关联预案">
          <el-select v-model="sendGuanLianYuAn" placeholder="请选择关联预案！" clearable>
            <el-option
              v-for="item in guanLianYuAnList"
              :key="item.id"
              :label="item.resTitle"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-button size="mini" type="primary" class="fr_button" @click="updateYjYuAn">确定
        </el-button>
        <div style="clear: both;"></div>
      </el-form>
    </el-dialog>
    <el-dialog title="责任制" :visible.sync="showResponsibilityDialog" v-if="showResponsibilityDialog" width="65%"
               @close="closeResponsibilityDialog()">
      <el-form label-width="1500px">
        <div class="bottom">
          <!-- 左侧菜单栏 -->
          <div class="bottomLeft">
            <div class="leftItem d-l-con padding-box nowrap" v-for="(item,index) in depteventList">
              <div class="bgt-info">
                <div class="bgt-info-name" :class="{on:iconCurrentIndex==item.deptId}"
                     @click="dutysystemSelect(item.deptId,item.deptName,item.id)">{{ item.deptName }}
                </div>
              </div>
            </div>
          </div>
          <!-- 左侧菜单栏对应的右侧的内容 -->
          <div class="bottomRight" ref="wrapper">
            <el-button
              size="mini"
              type="danger"
              v-if="depteventId!=null&&depteventId!=''"
              @click="addLine">添加
            </el-button>
            <el-table
              :data="dutysystemTableData"
              style="width: 100%"
              :rules="rules">
              <el-table-column prop="id" label="主键" v-if="false">
                <template slot-scope="scope" hidden>
                  <el-input v-model="scope.row.id" readonly placeholder="主键"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="姓名">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.name" placeholder="姓名" οninput="value=value.replace(/^[\u4e00-\u9fa5]{2,4}$/,'')"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="post" label="岗位">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.post" placeholder="岗位"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="telphone" label="手机号码">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.telphone" placeholder="手机号码" οninput="value=value.replace(/^((13[0-9])|(14[5-9])|(15([0-3]|[5-9]))|(16[6-7])|(17[1-8])|(18[0-9])|(19[1|3])|(19[5|6])|(19[8|9]))\d{8}$/,'')"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="bookbuytime" label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.$index, scope.row)">删除
                  </el-button>
                  <!--<el-button-->
                  <!--size="mini"-->
                  <!--type="danger"-->
                  <!--icon="el-icon-save"-->
                  <!--@click="handleSave(scope.$index, scope.row)">保存-->
                  <!--</el-button>-->
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <el-button size="mini" type="primary" class="fr_button" @click="addResponsibilityDialog">确定
        </el-button>
        <div style="clear: both;"></div>
      </el-form>
    </el-dialog>
    <el-dialog title="火险报告" :visible.sync="showEventConfirm_gd" v-if="showEventConfirm_gd" width="100%"
               class="top-dialog"
               @close="cancelEventConfirm_gd()">
      <div class="table-container">
        <form>
          <table id="table1" cellpadding="0" cellspacing="0">
            <thead style="width: 100%;padding:.5rem 0;">
            <th rowspan="1" colspan="1" class="txt_left" width="100px">填报单位：</th>
            <th rowspan="1" colspan="6" align="left"><input type="text" style=" width:100%;margin-left: .5rem;"
                                                            v-model="table1.reportUnit"/></th>
            <th rowspan="1" colspan="2" class="txt_right">填报时间：</th>
            <th rowspan="1" colspan="6" align="left"><input type="text" style="width:3rem;text-align: center;"
                                                            v-model="table1.reportTimeY"/>年<input
              type="text" style="width:4rem;text-align: center;" v-model="table1.reportTimeM"/>月<input type="text"
                                                                                                       style="width:3rem;text-align: center;"
                                                                                                       v-model="table1.reportTimeD"/>日
            </th>
            <th rowspan="1" colspan="8" style="text-align: right;">吉林省人民政府森林防火指挥部办公室制</th>
            </thead>
            <tbody>

            <tr>
              <td colspan="22" rowspan="1" class="font1" style="letter-spacing:3rem;padding: .5rem 0">森林火灾损失</td>
              <td colspan="1" rowspan="6">
                <table class="border0">
                  <tr>
                    <td>备注</td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td rowspan="4" colspan="1">
                <table class="border0">
                  <tr>
                    <td>森林火灾<br>损失总计</td>
                  </tr>
                </table>
              </td>
              <td rowspan="1" colspan="12">火灾损失价值</td>
              <td rowspan="1" colspan="9">扑火费用支出</td>
            </tr>
            <tr>

              <td rowspan="3" colspan="1">
                <table class="border0">
                  <tr>
                    <td>合计</td>
                  </tr>
                </table>
              </td>
              <td rowspan="1" colspan="4">林木资源</td>
              <td rowspan="1" colspan="6">人员伤亡</td>
              <td rowspan="3" colspan="1">
                <table class="border0">
                  <tr>
                    <td>其他<br>火灾<br>损失</td>
                  </tr>
                </table>
              </td>
              <td rowspan="3" colspan="1">
                <table class="border0">
                  <tr>
                    <td>合计</td>
                  </tr>
                </table>
              </td>
              <td rowspan="1" colspan="2">
                <table class="border0">
                  <tr>
                    <td>人工费</td>
                  </tr>
                </table>
              </td>
              <td rowspan="1" colspan="3">
                <table class="border0">
                  <tr>
                    <td>车辆费</td>
                  </tr>
                </table>
              </td>
              <td rowspan="1" colspan="2">
                <table class="border0">
                  <tr>
                    <td>飞行费</td>
                  </tr>
                </table>
              </td>
              <td rowspan="3" colspan="1">
                <table class="border0">
                  <tr>
                    <td>其他<br>扑火<br>费用</td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td rowspan="1" colspan="2">成林</td>
              <td rowspan="1" colspan="2">幼林</td>
              <td rowspan="1" colspan="2">轻伤</td>
              <td rowspan="1" colspan="2">重伤</td>
              <td rowspan="1" colspan="2">死亡</td>
              <td rowspan="2" colspan="1">
                <table class="border0">
                  <tr>
                    <td>出动<br>人工</td>
                  </tr>
                </table>
              </td>
              <td rowspan="2" colspan="1">
                <table class="border0">
                  <tr>
                    <td>支出<br>费用</td>
                  </tr>
                </table>
              </td>
              <td rowspan="2" colspan="1">
                <table class="border0">
                  <tr>
                    <td>计</td>
                  </tr>
                </table>
              </td>
              <td rowspan="2" colspan="1">
                <table class="border0">
                  <tr>
                    <td>其中<br>汽车</td>
                  </tr>
                </table>
              </td>
              <td rowspan="2" colspan="1">
                <table class="border0">
                  <tr>
                    <td>支出<br>费用</td>
                  </tr>
                </table>
              </td>
              <td rowspan="2" colspan="1">
                <table class="border0">
                  <tr>
                    <td>出动<br>飞机</td>
                  </tr>
                </table>
              </td>
              <td rowspan="2" colspan="1">
                <table class="border0">
                  <tr>
                    <td>支出<br>费用</td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td rowspan="1" colspan="1">蓄积</td>
              <td rowspan="1" colspan="1">价值</td>
              <td rowspan="1" colspan="1">株数</td>
              <td rowspan="1" colspan="1">价值</td>
              <td rowspan="1" colspan="1">人数</td>
              <td rowspan="1" colspan="1">支出费用</td>
              <td rowspan="1" colspan="1">人数</td>
              <td rowspan="1" colspan="1">支出费用</td>
              <td rowspan="1" colspan="1">人数</td>
              <td rowspan="1" colspan="1">支出费用</td>
            </tr>
            <tr>
              <td rowspan="1" colspan="1">万元</td>
              <td rowspan="1" colspan="1">万元</td>
              <td rowspan="1" colspan="1">米³</td>
              <td rowspan="1" colspan="1">万元</td>
              <td rowspan="1" colspan="1">万株</td>
              <td rowspan="1" colspan="1">万元</td>
              <td rowspan="1" colspan="1">人</td>
              <td rowspan="1" colspan="1">万元</td>
              <td rowspan="1" colspan="1">人</td>
              <td rowspan="1" colspan="1">万元</td>
              <td rowspan="1" colspan="1">人</td>
              <td rowspan="1" colspan="1">万元</td>
              <td rowspan="1" colspan="1">万元</td>
              <td rowspan="1" colspan="1">万元</td>
              <td rowspan="1" colspan="1">工日</td>
              <td rowspan="1" colspan="1">万元</td>
              <td rowspan="1" colspan="1">台</td>
              <td rowspan="1" colspan="1">台</td>
              <td rowspan="1" colspan="1">万元</td>
              <td rowspan="1" colspan="1">架次</td>
              <td rowspan="1" colspan="1">万元</td>
              <td rowspan="1" colspan="1">万元</td>
            </tr>
            <tr>
              <td rowspan="1" colspan="1">1</td>
              <td rowspan="1" colspan="1">2</td>
              <td rowspan="1" colspan="1">3</td>
              <td rowspan="1" colspan="1">4</td>
              <td rowspan="1" colspan="1">5</td>
              <td rowspan="1" colspan="1">6</td>
              <td rowspan="1" colspan="1">7</td>
              <td rowspan="1" colspan="1">8</td>
              <td rowspan="1" colspan="1">9</td>
              <td rowspan="1" colspan="1">10</td>
              <td rowspan="1" colspan="1">11</td>
              <td rowspan="1" colspan="1">12</td>
              <td rowspan="1" colspan="1">13</td>
              <td rowspan="1" colspan="1">14</td>
              <td rowspan="1" colspan="1">15</td>
              <td rowspan="1" colspan="1">16</td>
              <td rowspan="1" colspan="1">17</td>
              <td rowspan="1" colspan="1">18</td>
              <td rowspan="1" colspan="1">19</td>
              <td rowspan="1" colspan="1">20</td>
              <td rowspan="1" colspan="1">21</td>
              <td rowspan="1" colspan="1">22</td>
              <td rowspan="1" colspan="1">23</td>
            </tr>
            <tr class="int_tr">
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.forestFireLossTotal"/></td>
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.fireLossTotal"/></td>
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.forestArea"/></td>
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.forestPrice"/></td>
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.treesNumber"/></td>
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.treesPrice"/></td>
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.minorInjuriesNumber"/></td>
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.minorInjuriesPrice"/></td>
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.seriouslyInjuredNumber"/>
              </td>
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.seriouslyInjuredPrice"/>
              </td>
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.deathNumber"/></td>
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.deathPrice"/></td>
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.elseFireLossPrice"/></td>
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.blazesPriceTotal"/></td>
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.artificialDays"/></td>
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.artificialPrice"/></td>
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.vehicleNumber"/></td>
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.carNumber"/></td>
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.vehiclePrice"/></td>
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.planeNumber"/></td>
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.planePrice"/></td>
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.elseBlazesPrice"/></td>
              <td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.note"/></td>

            </tr>
            </tbody>
          </table>
          <table class="table2" cellpadding="0" cellspacing="0" style="white-space: nowrap;">
            <tbody>
            <tr>
              <th rowspan="1" colspan="26" style="letter-spacing:6rem">火场资料</th>
            </tr>
            <tr>
              <td colspan="2" rowspan="1" class="txt_left">&nbsp;1.起火时间</td>
              <td colspan="5" rowspan="1"><input type="text" v-model="table2.fireTime"/></td>
              <td colspan="2" rowspan="1">发现时间</td>
              <td colspan="8" rowspan="1"><input type="text" v-model="table2.foundTime"/></td>
              <td colspan="2" rowspan="1">扑灭时间</td>
              <td colspan="7" rowspan="1"><input type="text" v-model="table2.blazesTime"/></td>
            </tr>
            <tr>
              <td colspan="2" rowspan="1" class="txt_left">&nbsp;2.地点及发现方式</td>
              <td colspan="2" rowspan="1" class="txt_left"><select v-model="table2.address">
                <option>吉林市</option>
                <option>延边州</option>
                <option>白山市</option>
                <option>通化市</option>
                <option>辽源市</option>
                <option>四平市</option>
                <option>长春市</option>
                <option>白城市</option>
                <option>松原市</option>
                <option>敦化航站</option>
                <option>长白山管委会</option>
              </select></td>
              <td colspan="13" rowspan="1"><input type="text" v-model="table2.firePlace"/></td>
              <td colspan="2" rowspan="1">发现方式</td>
              <td colspan="7" rowspan="1"><input type="text" v-model="table2.foundType"/></td>
            </tr>
            <tr>
              <td colspan="2" rowspan="1" class="txt_left">&nbsp;3.火场位置</td>
              <td colspan="2" rowspan="1" class="border_l0">东经：</td>
              <td colspan="1" rowspan="1" class="border_l0"><input type="text" style="width:50px;"
                                                                   v-model="table2.longitudeD"/></td>
              <td colspan="1" rowspan="1" class="border_l0">度</td>
              <td colspan="1" rowspan="1" class="border_l0"><input type="text" style="width:50px;"
                                                                   v-model="table2.longitudeM"/></td>
              <td colspan="1" rowspan="1" class="border_l0">分</td>
              <td colspan="1" rowspan="1" class="border_l0"><input type="text" style="width:50px;"
                                                                   v-model="table2.longitudeS"/></td>
              <td colspan="2" rowspan="1" class="border_l0">秒</td>
              <td colspan="1" rowspan="1" class="border_l0">；</td>
              <td colspan="2" rowspan="1" class="border_l0">北纬：</td>
              <td colspan="1" rowspan="1" class="border_l0"><input type="text" style="width:50px;"
                                                                   v-model="table2.latitudeD"/></td>
              <td colspan="1" rowspan="1" class="border_l0">度</td>
              <td colspan="1" rowspan="1" class="border_l0"><input type="text" style="width:50px;"
                                                                   v-model="table2.latitudeM"/></td>
              <td colspan="1" rowspan="1" class="border_l0">分</td>
              <td colspan="1" rowspan="1" class="border_l0"><input type="text" style="width:50px;"
                                                                   v-model="table2.latitudeS"/></td>
              <td colspan="1" rowspan="1" class="border_l0">秒</td>
              <td class="border_l0"></td>
              <td class="border_l0"></td>
              <td class="border_l0"></td>
              <td class="border_l0"></td>
              <td class="border_l0"></td>
              <td></td>
            </tr>
            <tr>
              <td colspan="2" rowspan="1" class="txt_left">&nbsp;4.起火原因</td>
              <td colspan="3" rowspan="1" class="txt_left"><select v-model="table2.fireSource">
                <option>未查明火源</option>
                <option>烧荒烧炭</option>
                <option>炼山造林</option>
                <option>烧牧场</option>
                <option disabled>烧窑</option>
                <option>烧隔离带</option>
                <option>火车喷漏</option>
                <option>火车甩瓦</option>
                <option>机车喷火</option>
                <option>其他（生产性火源）</option>
                <option>野外吸烟</option>
                <option>取暖做饭</option>
                <option>上坟烧纸</option>
                <option>烧山驱兽</option>
                <option>小孩玩火</option>
                <option>痴呆弄火</option>
                <option>家火上山</option>
                <option>电线引起</option>
                <option>其他（非生产性用火）</option>
                <option>故意放火</option>
                <option>外省（区）烧入</option>
                <option>外国烧入</option>
                <option>雷击火</option>
                <option>其他自然火</option>
              </select></td>
              <td colspan="3" rowspan="1">火灾种类</td>
              <td colspan="4" rowspan="1" class="txt_left"><select v-model="table2.fireType">
                <option>地表火</option>
                <option>树冠火</option>
                <option>地下火</option>
              </select></td>
              <td colspan="3" rowspan="1">火灾等级</td>
              <td colspan="11" rowspan="1" class="txt_left"><select v-model="table2.fireLevel">
                <option>一般</option>
                <option>较大</option>
                <option>重大</option>
                <option>特大</option>
              </select></td>
            </tr>
            <tr>
              <td colspan="2" rowspan="1" class="txt_left">&nbsp;5.火场面积（公顷）</td>
              <td colspan="2" rowspan="1">总面积合计</td>
              <td colspan="3" rowspan="1"><input type="text" v-model="table2.areaTotal"/></td>
              <td colspan="4" rowspan="1">受害森林面积合计</td>
              <td colspan="3" rowspan="1"><input type="text" v-model="table2.forestLossAreaTotal"/></td>
              <td colspan="1" rowspan="1">其中：</td>
              <td colspan="2" rowspan="1">原森林</td>
              <td colspan="4" rowspan="1"><input type="text" v-model="table2.originalForestArea"/></td>
              <td colspan="2" rowspan="1">人工林</td>
              <td colspan="3" rowspan="1"><input type="text" v-model="table2.artificialForestArea"/></td>
            </tr>
            <tr>
              <td colspan="2" rowspan="1" class="txt_left">&nbsp;6.扑火人力物力投入</td>
              <td colspan="2" rowspan="1">出动总人数</td>
              <td colspan="1" rowspan="1"><input type="text" v-model="table2.peopleTotal"/></td>
              <td colspan="2" rowspan="1">其中扑火队</td>
              <td colspan="1" rowspan="1"><input type="text" v-model="table2.blazesTeamNumber"/></td>
              <td colspan="1" rowspan="1">森警</td>
              <td colspan="2" rowspan="1"><input type="text" v-model="table2.policeNumber"/></td>
              <td colspan="1" rowspan="1">军队</td>
              <td colspan="1" rowspan="1"><input type="text" v-model="table2.armyNumber"/></td>
              <td colspan="1" rowspan="1">群众</td>
              <td colspan="1" rowspan="1"><input type="text" v-model="table2.crowdNumber"/></td>
              <td colspan="2" rowspan="1">风力灭火机</td>
              <td colspan="1" rowspan="1"><input type="text" v-model="table2.windExtinguisher"/></td>
              <td colspan="2" rowspan="1">二号工具</td>
              <td colspan="1" rowspan="1"><input type="text" v-model="table2.secondTool"/></td>
              <td colspan="2" rowspan="1">水枪</td>
              <td colspan="1" rowspan="1"><input type="text" v-model="table2.waterGun"/></td>
              <td colspan="1" rowspan="1">其他</td>
              <td colspan="1" rowspan="1"><input type="text" v-model="table2.elseThings"/></td>
            </tr>
            <tr>
              <td colspan="2" rowspan="1" class="txt_left">&nbsp;7.受害森林概况</td>
              <td colspan="2" rowspan="1">林木组成</td>
              <td colspan="11" rowspan="1"><input type="text" v-model="table2.forestComposition"/></td>
              <td colspan="2" rowspan="1">林令</td>
              <td colspan="4" rowspan="1"><input type="text" v-model="table2.forestToken"/></td>
              <td colspan="2" rowspan="1">疏密度</td>
              <td colspan="3" rowspan="1"><input type="text" v-model="table2.porosities"/></td>
            </tr>
            <tr>
              <td colspan="2" rowspan="1" class="txt_left">&nbsp;8.当日天气实况</td>
              <td colspan="2" rowspan="1">天气</td>
              <td colspan="3" rowspan="1"><input type="text" v-model="table2.weather"/></td>
              <td colspan="1" rowspan="1">气温</td>
              <td colspan="2" rowspan="1"><input type="text" v-model="table2.temperature"/></td>
              <td colspan="1" rowspan="1">C°</td>
              <td colspan="3" rowspan="1">火险等级</td>
              <td colspan="1" rowspan="1"><input type="text" v-model="table2.fireInsuranceLevel"/></td>
              <td colspan="2" rowspan="1">风力</td>
              <td colspan="2" rowspan="1" class="border_l0"><input type="text" v-model="table2.windLevel"/></td>
              <td colspan="2" rowspan="1" class="txt_left">级</td>
              <td colspan="2" rowspan="1">风向</td>
              <td colspan="3" rowspan="1"><input type="text" v-model="table2.windDirection"/></td>
            </tr>
            <tr>
              <td colspan="2" rowspan="1" class="txt_left">&nbsp;9.指挥扑火负责人</td>
              <td colspan="2" rowspan="1">单位</td>
              <td colspan="11" rowspan="1"><input type="text" v-model="table2.commandUnit"/></td>
              <td colspan="2" rowspan="1">姓名</td>
              <td colspan="4" rowspan="1"><input type="text" v-model="table2.commandName"/></td>
              <td colspan="2" rowspan="1">职务</td>
              <td colspan="3" rowspan="1"><input type="text" v-model="table2.commandPosition"/></td>
            </tr>
            <tr>
              <td colspan="2" rowspan="1" class="txt_left">&nbsp;10.火场调查负责人</td>
              <td colspan="2" rowspan="1">单位</td>
              <td colspan="11" rowspan="1"><input type="text" v-model="table2.surveyUnit"/></td>
              <td colspan="2" rowspan="1">姓名</td>
              <td colspan="4" rowspan="1"><input type="text" v-model="table2.surveyName"/></td>
              <td colspan="2" rowspan="1">职务</td>
              <td colspan="3" rowspan="1"><input type="text" v-model="table2.surveyPosition"/></td>
            </tr>
            <tr>
              <td colspan="2" rowspan="1" class="txt_left">&nbsp;11.火灾肇事人情况</td>
              <td colspan="2" rowspan="1">姓名</td>
              <td colspan="2" rowspan="1"><input type="text" v-model="table2.accidentName"/></td>
              <td colspan="2" rowspan="1">性别</td>
              <td colspan="1" rowspan="1"><input type="text" v-model="table2.accidentSex"/></td>
              <td colspan="3" rowspan="1">年龄</td>
              <td colspan="1" rowspan="1"><input type="text" v-model="table2.accidentAge"/></td>
              <td colspan="1" rowspan="1">职业</td>
              <td colspan="1" rowspan="1"><input type="text" v-model="table2.accidentPosition"/></td>
              <td colspan="2" rowspan="1">单位或住址</td>
              <td colspan="9" rowspan="1"><input type="text" v-model="table2.accidentUnit"/></td>
            </tr>
            <tr>
              <td colspan="2" rowspan="1" class="txt_left">&nbsp;12.火灾处理情况</td>
              <td colspan="2" rowspan="1">处理方式</td>
              <td colspan="4" rowspan="1"><select v-model="table2.dealType">
                <option>立案（刑事处理）</option>
                <option>破案（刑事处理）</option>
                <option>行政处理</option>
                <option>待查</option>
                <option>拘留</option>
                <option>处理</option>
                <option>未处理</option>
              </select></td>
              <td colspan="3" rowspan="1">已处理人数</td>
              <td colspan="4" rowspan="1"><input type="text" v-model="table2.dealNumber"/></td>
              <td colspan="4" rowspan="1">刑事处罚人数</td>
              <td colspan="7" rowspan="1"><input type="text" v-model="table2.criminalDealNumber"/></td>
            </tr>
            <tr>
              <td colspan="2" rowspan="1" class="txt_left" style="height: 60px;">&nbsp;13.对火灾肇事人<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;的处理情况
              </td>
              <td colspan="24" rowspan="1" class="txt_left">
                <textarea v-model="table2.accidentDealSituation"></textarea>
              </td>
            </tr>
            <tr>
              <td colspan="2" rowspan="1" class="txt_left" style="height: 60px;">&nbsp;14.对责任人员的<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;责任人追查情况
              </td>
              <td colspan="24" rowspan="1" class="txt_left">
                <textarea v-model="table2.responsibilityDealSituation"></textarea></td>
            </tr>
            <tr>
              <td colspan="2" rowspan="1" class="txt_left" style="height: 60px;">&nbsp;15.对有关领导的<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;责任追查情况
              </td>
              <td colspan="24" rowspan="1" class="txt_left">
                <textarea v-model="table2.leadershipDealSituation"></textarea></td>
            </tr>
            <tr class="tr_border">
              <td colspan="4" rowspan="1">县（市、区、局、站）填表人：</td>
              <td colspan="2" rowspan="1"><input type="text" v-model="table2.townForm"/></td>
              <td colspan="4" rowspan="1">县（市、区、局、站）审核人：</td>
              <td colspan="3" rowspan="1"><input type="text" v-model="table2.townAudit"/></td>
              <td colspan="4" rowspan="1">市（州、管委会）填表人：</td>
              <td colspan="2" rowspan="1"><input type="text" v-model="table2.cityForm"/></td>
              <td colspan="4" rowspan="1">市（州、管委会）审核人：</td>
              <td colspan="3" rowspan="1"><input type="text" v-model="table2.cityAudit"/></td>
            </tr>
            </tbody>
          </table>
          <div class="btm-btn-group">
            <el-button size="mini" type="primary"
                       @click="updateCentereventTEventcatalogueStatus('gd',true)">归档
            </el-button>
            <el-button size="mini" type="primary"
                       @click="regionalFlagAdd()">火灾区域
            </el-button>
          </div>
        </form>
      </div>
    </el-dialog>
    <!-- 添加区域标记 -->
    <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: 0,//火灾报告
        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 = 0
        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 = 0
        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.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>