Project_yhfu/src/views/eventdetailsdialog.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" @click="showUpdateYjYuAn">预案调整
                  </el-button>
                </div>
                <!-- 应急预案end -->
                <!-- 左侧资源 -->
                <div class="leftbar" style="width:fit-content !important;bottom:0rem;left: 1rem; top: unset;">
                  <div class="forthis">
                    <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">
                      <div class="i-list-con">
                        <div class="d-l-con-icon" style="flex-direction:row;flex-wrap: nowrap;">
                          <div class="icon-con" style="width: fit-content !important;"
                               v-for="(item,index) in resourcesList" @click="listResourceByWz(item.type)">
                            <div class="iconfont icon icon-normal" :class="item.icon"></div>
                            <div class="icon-text">
                              <h5>{{ item.resourceName }}</h5>
                            </div>
                          </div>
                          <el-input type="number" v-model="radius" style="width: 80px;" placeholder="请输入搜索半径"/>
                        </div>
                      </div>
                    </dv-border-box-7>
                  </div>
                </div>
                <!-- 左侧资源end -->
                <!-- 底部工具栏 -->
                <!--   <div class="dia-left-btm-tool">
                   </div> -->
                <!-- 底部工具栏end -->
                <div class="fire-m">
                  <el-button size="small" icon="el-icon-upload" @click="showheatPlotting()">火灾蔓延
                  </el-button>
                </div>
                <!-- 地图 -->
                <supermapDialog ref="supermapDialog"
                                style="position: absolute; top:0;left: 0;"
                                :mapDiv="'forestWarmSuperMap'"
                                :mapSite="{zoom:12,doubleClickZoom:false,dragging:false,scrollWheelZoom:false}"
                                :codes="['9fa5']"
                                :isSideBySide="false"
                                :isdynamicPlotting="true"
                                @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">会议
                                </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('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"
            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>
            <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=='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">
      <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" @click="updateYjYuAn">确定
        </el-button>
      </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%">
              <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="姓名"></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="手机号码"></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="closeResponsibilityDialog">确定
        </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 supermapDialog 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'

export default {
  dicts: ['task_source'],
  watch: {
    filterText(val) {
      this.$refs.LiandongDept.filter(val)
    }
  },
  components: {
    vheader,
    vBottomMenu,
    supermapDialog,
    eventLogUpload,
    areaSupermap,
    TcPlayer
  },
  data() {
    return {
      //海康
      cameraTitle: '',
      cameraVisible: false,
      initCount: 0,
      pubKey: '',
      oWebControl: null,

      playVideo: '',//视频预览地址
      showTcPlayer: false,//视频预览弹窗
      regionalFlagOpen: false,//区域标记
      //区域标记
      regionalFlagObj: {
        array: []
      },
      filterText: '',//树搜索
      /** *****************事件流程***************************/
      deptNameitem: '签收部门',
      sendDeptId: null,//签收部门/发起部门
      sendDeptName: null,//签收部门/发起部门
      sendEventType: null,//事件类型
      sendHuoZaiBanJing: null,//火灾报告
      sendUserFegin: [],//联系人
      sendGuanLianYuAn: null,//关联预案
      sendTaskSource: null,//任务来源
      sendTaskTitle: null,//联动标题
      sendTaskContent: null,//联动内容
      sendLianDongDept: [],//联动部门
      eventTypeList: [],//事件类型列表
      guanLianYuAnList: [],//关联预案列表
      deptOptions: [],//签收部门
      deptOptionsLiandong: [],//联动部门
      userFeginList: [],//联系人列表
      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,
      longitude: null,
      latitude: null,
      eventLog: null,
      eventLogList: [],
      visuForestCloudYuAnBo: null,
      eventDialog: false,
      showResponsibilityDialog: false,//责任制弹窗
      depteventList: [],//责任制部门列表
      iconCurrentIndex: '',
      dutysystemDeptName: '',
      depteventId: '',
      dutysystemTableData: [],
      radius: 50,//资源搜索半径
      resourcesList: [
        {
          resourceName: '重点企业',
          type: 'zdqygl',
          count: '1',
          icon: 'sj-icon-enterprise'
        },
        {
          resourceName: '禁烧区',
          type: 'jsqgl',
          icon: 'sj-icon-area'
        },
        {
          resourceName: '污染源',
          type: 'wrygl',
          count: '1',
          icon: 'sj-icon-pollution'
        },
        {
          resourceName: '摄像头',
          type: 'sxt',
          count: '1',
          icon: 'sj-icon-jkzx'
        }
      ],
      resourcesListCheck: [],
      //文本域
      feedback: ''

    }
  },
  props: {
    calendarDay: null//首页日历选择
  },
  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
    },
    /************************************责任制-结束****************************************/
    showheatPlotting() {
      this.eventDialog = false;
      this.$emit('getFirespread', this.eventCode);
    },
    showUpdateYjYuAn() {
      listYuAn().then(res => {
        //关联预案列表
        if (res.code == 200) {
          this.guanLianYuAnList = res.data
          this.showGuanLianYuAnConfirm = true
        }
      })
    },
    updateYjYuAn() {
      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.supermapDialog.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 == 'zdqygl') {
                markersMap.icon = 'sj-icon-map-centerdata-t-environment-key-enterprise'
              } else if (type == 'jsqgl') {
                markersMap.icon = 'sj-icon-map-centerdata-t-environment-prohibition-area'
              } else if (type == 'wrygl') {
                markersMap.icon = 'sj-icon-map-centerdata-t-environment-source-pollution'
              }else if (type == 'sxt') {
                markersMap.icon = 'camera'
                if (res.data[i].cameraCode != null) {
                  markersMap.click = 'preview'
                  markersMap.parameter = res.data[i].cameraCode
                }
              }
              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.supermapDialog.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.sendEventType = null
      this.sendHuoZaiBanJing = null
      this.sendGuanLianYuAn = null
      this.sendUserFegin = []
      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.sendEventType = null
      this.sendHuoZaiBanJing = null
      this.sendGuanLianYuAn = null
      this.sendUserFegin = []
      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 userFeginlist().then(res => {
            //联系人列表
            if (res.code == 200) {
              that.userFeginList = res.data
            }
          })
          await selectByeventCode(that.eventCode).then(res => {
            //签收部门
            if (res.code == 200) {
              that.deptOptions = res.data
              that.deptNameitem = '签收部门'
            }
          })
          that.showEventConfirm = true
        } 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 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)
              that.$emit('getTodayEvents', 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
            }
          } 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: '',
            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)
              that.$emit('getTodayEvents', 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() {
      console.log('关闭事件弹窗')
      this.dataStatus = null
      this.deptId = null
      this.eventLogList = []
    },
    showEventDialog(eventCode) {
      this.eventCode = eventCode
      let that = this
      //获取事件详情
      getEventDetail({ eventCode: eventCode }).then(res => {
        this.eventDialog = true
        this.eventLogList = res.data.eventlog//日志列表
        this.visuForestCloudYuAnBo = res.data.visuForestCloudYuAnBo//应急预案
        this.address = res.data.catalogue.address
        this.eventStatusValue = res.data.catalogue.eventStatusValue
        this.eventType = res.data.catalogue.eventType
        this.dataStatus = res.data.catalogue.dataStatus
        this.deptId = res.data.catalogue.deptId
        this.eventId = res.data.catalogue.id
        this.longitude = res.data.catalogue.longitude
        this.latitude = res.data.catalogue.latitude
        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'
        }
        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.supermapDialog.dynamicPlotting()//弹出动态绘制窗口，防止截图位置改变
          that.$refs.supermapDialog.clearM(false)
          that.$refs.supermapDialog.setMarkersRadius([markersMap])
          that.$refs.supermapDialog.dropLocation(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: res.data.centermonitorTCamera.cameraCode,
            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.supermapDialog.setMarkers([markersMap])
          }, 2000)
        }
      })
    },
    refreshEvent(eventCode) {
      this.eventCode = eventCode
      let that = this
      //刷新--事件详情
      getEventDetail({ eventCode: eventCode }).then(res => {
        this.eventDialog = true
        this.eventLogList = res.data.eventlog
        this.visuForestCloudYuAnBo = res.data.visuForestCloudYuAnBo//应急预案
        this.address = res.data.catalogue.address
        this.eventStatusValue = res.data.catalogue.eventStatusValue
        this.eventType = res.data.catalogue.eventType
        this.dataStatus = res.data.catalogue.dataStatus
        this.deptId = res.data.catalogue.deptId
        this.eventId = res.data.catalogue.id
        this.latitude = res.data.catalogue.latitude
        this.longitude = res.data.catalogue.longitude
        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'
        }
        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.supermapDialog.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.supermapDialog.setMarkersRadius([markersMap])
          } else {
            that.$refs.supermapDialog.setMarkers([markersMap])
          }
          that.$refs.supermapDialog.dropLocation(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: res.data.centermonitorTCamera.cameraCode,
            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.supermapDialog.setMarkers([markersMap])
          }, 2000)
        }
      })
    },
    refreshEventDialog(eventCode) {
      //刷新--事件日志
      getEventDetail({ eventCode: eventCode }).then(res => {
        this.eventLogList = res.data.eventlog
        this.visuForestCloudYuAnBo = res.data.visuForestCloudYuAnBo//应急预案
      })
    },
    // 页面元素转图片
    toImage() {
      // 手动创建一个 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')
        console.log(dataBase64)
        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) {//获取火灾区域经纬度
      console.log(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(cameraCode) {
      let that = this
      // 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(channelCode)
      //         } else {
      //           this.alertLoginFailed()
      //         }
      //       })
      //     } else { // 连接客户端失败
      //       this.alertReinstall()
      //     }
      //   })
      // })
      that.cameraVisible = true
      getHaiKangVideoServer({ cameraCode: cameraCode }).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来启动程序
          initCount++
          if (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
          console.log('cbConnectClose')
          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)
    }
    /** ----------------------------------海康摄像头预览结束------------------------------------- */
  }
}

// 推送消息
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;
  }
}

.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>