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)"
                                                   v-for="(itemfile,indexfile) in item.fileVOs">
                                        <!-- 使用el-image的:src需要加require -->
                                        <!--                                        <img v-if="isAssetTypeAnImage(itemfile.fileUrl)"-->
                                        <!--                                             style="width:3rem; height:3rem;margin: 2px;"-->
                                        <!--                                             :src="itemfile.fileUrl"-->
                                        <!--                                             :title="itemfile.fileName">-->
                                        <!--                                        </img>-->
                                        <el-image :src="itemfile.fileUrl" v-if="isAssetTypeAnImage(itemfile.fileUrl)"
                                                  :preview-src-list="assetTypeAnImage(item.attachs)"
                                                  style="width:3rem; height:3rem;margin: 2px;"
                                                  :title="itemfile.fileName">
                                        </el-image>
                                        <img v-else-if="isAssetTypeAnMp4(itemfile.fileUrl)"
                                             style="width:3rem; height:3rem;margin: 2px;"
                                             :src="require('@/assets/fileTypeImage/mp4.png')"
                                             :title="itemfile.fileName">
                                        </img>
                                        <img v-else-if="isAssetTypeAnWord(itemfile.fileUrl)"
                                             style="width:3rem; height:3rem;margin: 2px;"
                                             :src="require('@/assets/fileTypeImage/word.png')"
                                             :title="itemfile.fileName">
                                        </img>
                                        <img v-else-if="isAssetTypeAnExcel(itemfile.fileUrl)"
                                             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>
                              </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"
                                             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'">
                                <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-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="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
} 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,//火灾报告
      sendGuanLianYuAn: null,//关联预案
      sendTaskSource: null,//任务来源
      sendTaskTitle: null,//联动标题
      sendTaskContent: null,//联动内容
      sendLianDongDept: [],//联动部门
      eventTypeList: [],//事件类型列表
      guanLianYuAnList: [],//关联预案列表
      deptOptions: [],//签收部门
      deptOptionsLiandong: [],//联动部门
      eventStatusButton: null,//流程按钮标识
      eventConfirmTitle: null,//弹窗标题  ---签收 误报  重复
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      table1: {
        reportUnit: null,
        reportTimeY: null,
        reportTimeM: null,
        reportTimeD: null,
        forestFireLossTotal: null,
        fireLossTotal: null,
        forestArea: null,
        forestPrice: null,
        treesNumber: null,
        treesPrice: null,
        minorInjuriesNumber: null,
        minorInjuriesPrice: null,
        seriouslyInjuredNumber: null,
        seriouslyInjuredPrice: null,
        deathNumber: null,
        deathPrice: null,
        elseFireLossPrice: null,
        blazesPriceTotal: null,
        artificialDays: null,
        artificialPrice: null,
        vehicleNumber: null,
        carNumber: null,
        vehiclePrice: null,
        planeNumber: null,
        planePrice: null,
        elseBlazesPrice: null,
        note: null
      },
      table2: {
        fireTime: null,
        foundTime: null,
        blazesTime: null,
        address: null,
        firePlace: null,
        foundType: null,
        longitudeD: null,
        longitudeM: null,
        longitudeS: null,
        latitudeD: null,
        latitudeM: null,
        latitudeS: null,
        fireSource: null,
        fireType: null,
        fireLevel: null,
        areaTotal: null,
        forestLossAreaTotal: null,
        originalForestArea: null,
        artificialForestArea: null,
        peopleTotal: null,
        blazesTeamNumber: null,
        policeNumber: null,
        armyNumber: null,
        crowdNumber: null,
        windExtinguisher: null,
        secondTool: null,
        waterGun: null,
        elseThings: null,
        forestComposition: null,
        forestToken: null,
        porosities: null,
        weather: null,
        temperature: null,
        fireInsuranceLevel: null,
        windLevel: null,
        windDirection: null,
        commandUnit: null,
        commandName: null,
        commandPosition: null,
        surveyUnit: null,
        surveyName: null,
        surveyPosition: null,
        accidentName: null,
        accidentSex: null,
        accidentAge: null,
        accidentPosition: null,
        accidentUnit: null,
        dealType: null,
        dealNumber: null,
        criminalDealNumber: null,
        accidentDealSituation: null,
        responsibilityDealSituation: null,
        leadershipDealSituation: null,
        townForm: null,
        townAudit: null,
        cityForm: null,
        cityAudit: null
      },
      /** *****************事件流程***************************/
      showEventConfirm: false,//事件签收弹窗
      showGuanLianYuAnConfirm: false,//调整关联预案弹窗
      showEventConfirm_gd: false,//事件火险报告弹窗
      address: null,//事件上报地址
      eventStatusValue: null,//事件状态
      eventId: null,//事件ID
      eventType: null,//事件类型-大类
      eventCode: null,
      longitude: null,
      latitude: null,
      eventLog: null,
      eventLogList: [],
      visuForestCloudYuAnBo: null,
      eventDialog: false,
      radius: 50,//资源搜索半径
      resourcesList: [
        {
          resourceName: '取水口',
          type: 'qsk',
          count: '1',
          icon: 'sj-icon-waterintake'
        },
        {
          resourceName: '水鹤',
          type: 'sh',
          icon: 'sj-icon-watercrane'
        },
        {
          resourceName: '消防栓',
          type: 'xfs',
          count: '1',
          icon: 'sj-icon-firehydrant'
        },
        {
          resourceName: '起降点',
          type: 'qjd',
          count: '1',
          icon: 'sj-icon-landing'
        },
        {
          resourceName: '检查站',
          type: 'jcz',
          count: '1',
          icon: 'sj-icon-checkpoint'
        },
        {
          resourceName: '防火队',
          type: 'fhd',
          count: '1',
          icon: 'sj-icon-fireteam'
        },
        {
          resourceName: '重点区域',
          type: 'zdqy',
          count: '1',
          icon: 'sj-icon-tcqh'
        },
        {
          resourceName: '摄像头',
          type: 'sxt',
          count: '1',
          icon: 'camera'
        }
      ],
      resourcesListCheck: [],
      //文本域
      feedback: ''

    }
  },
  props: {
    calendarDay: null//首页日历选择
  },
  methods: {
    showheatPlotting(){
      if(!this.$refs.supermapDialog.isheatPlotting){
        this.$refs.supermapDialog.showheatPlotting(this.latitude,this.longitude)
      }else{
        this.$refs.supermapDialog.isheatPlotting = false
      }
    },
    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 {
        this.resourcesListCheck.push(type)
        //搜索物资
        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) {
            var markersList = []
            for (let i = 0; i < res.data.length; i++) {
              let markersMap = {
                lng: 124.59,
                lat: 43.02,
                icon: 'marker',
                bindPopupHtml: '',
                click: '',
                parameter: '',
                keepBindPopup: false,
                isAggregation: false
              }
              if (res.data.length > 50) {
                markersMap.isAggregation = true
              }
              if (type == 'qsk') {
                markersMap.icon = 'sj-icon-waterintake'
              } else if (type == 'sh') {
                markersMap.icon = 'sj-icon-watercrane'
              } else if (type == 'xfs') {
                markersMap.icon = 'sj-icon-firehydrant'
              } else if (type == 'qjd') {
                markersMap.icon = 'sj-icon-landing'
              } else if (type == 'jcz') {
                markersMap.icon = 'sj-icon-checkpoint'
              } else if (type == 'fhd') {
                markersMap.icon = 'sj-icon-fireteam'
              } else if (type == 'zdqy') {
                markersMap.icon = 'sj-icon-tcqh'
              } else if (type == 'sxt') {
                markersMap.icon = 'sj-icon-jkzx'
              }
              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++) {
          //获取最后一个.的位置
          var index = filePath[i].lastIndexOf('.')
          //获取后缀
          var ext = filePath[i].substr(index + 1)
          let aa = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext.toLowerCase()) !== -1
          if (aa) {
            imageList.push(filePath[i])
          }
        }
      }
      return imageList
    },
    // 判断是否为图片
    isAssetTypeAnImage(filePath) {
      //获取最后一个.的位置
      var index = filePath.lastIndexOf('.')
      //获取后缀
      var ext = filePath.substr(index + 1)
      let aa = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext.toLowerCase()) !== -1
      return aa
    },
    // 判断是否为视频
    isAssetTypeAnMp4(filePath) {
      //获取最后一个.的位置
      var index = filePath.lastIndexOf('.')
      //获取后缀
      var ext = filePath.substr(index + 1)
      let aa = ['mp4'].indexOf(ext.toLowerCase()) !== -1
      return aa
    },
    // 判断是否为Word
    isAssetTypeAnWord(filePath) {
      //获取最后一个.的位置
      var index = filePath.lastIndexOf('.')
      //获取后缀
      var ext = filePath.substr(index + 1)
      let aa = ['doc', 'docx'].indexOf(ext.toLowerCase()) !== -1
      return aa
    },
    // 判断是否为Excel
    isAssetTypeAnExcel(filePath) {
      //获取最后一个.的位置
      var index = filePath.lastIndexOf('.')
      //获取后缀
      var ext = filePath.substr(index + 1)
      let aa = ['xlsx', 'xls', 'csv'].indexOf(ext.toLowerCase()) !== -1
      return aa
    },
    // 获取文件名称
    getFileName(name) {
      if (name.lastIndexOf('/') > -1) {
        return name.slice(name.lastIndexOf('/') + 1)
      } else {
        return ''
      }
    },
    clickFile(fileUrl, fileName) {
      if (this.isAssetTypeAnImage(fileUrl)) {
        return
      } else if (this.isAssetTypeAnMp4(fileUrl)) {
        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.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 = []
    },
    cancelEventConfirm_send() {
      //清空表单数据
      this.sendDeptId = null
      this.sendDeptName = null
      this.sendEventType = null
      this.sendHuoZaiBanJing = null
      this.sendGuanLianYuAn = null
      this.sendTaskTitle = null
      this.sendTaskSource = null
      this.sendTaskContent = null
      this.sendLianDongDept = []
      this.eventTypeList = []//事件类型列表
      this.guanLianYuAnList = []//关联预案列表
      this.deptOptions = []//签收部门
      this.deptOptionsLiandong = []//联动部门
    },
    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

      if (!isSend) {//事件弹窗
        if (eventStatus == 'qs') {//签收
          this.eventConfirmTitle = '事件签收'
          let param = { parentId: this.eventType }
          await listSJfl(param).then(res => {
            //事件类型
            if (res.code == 200) {
              this.eventTypeList = res.data
            }
          })
          await listYuAn().then(res => {
            //关联预案
            if (res.code == 200) {
              this.guanLianYuAnList = res.data
            }
          })
          await selectByeventCode(this.eventCode).then(res => {
            //签收部门
            if (res.code == 200) {
              this.deptOptions = res.data
              this.deptNameitem = '签收部门'
            }
          })
          this.showEventConfirm = true
        } else if (eventStatus == 'wb') {//误报
          this.eventConfirmTitle = '事件误报'
          await selectByeventCode(this.eventCode).then(res => {
            //签收部门
            if (res.code == 200) {
              this.deptOptions = res.data
              this.deptNameitem = '签收部门'
            }
          })
          this.showEventConfirm = true
        } else if (eventStatus == 'cf') {//重复
          this.eventConfirmTitle = '事件重复'
          await selectByeventCode(this.eventCode).then(res => {
            //签收部门
            if (res.code == 200) {
              this.deptOptions = res.data
              this.deptNameitem = '签收部门'
            }
          })
          this.showEventConfirm = true
        } else if (eventStatus == 'ld') {//联动
          await selectByeventCode(this.eventCode).then(res => {
            //签收部门
            if (res.code == 200) {
              this.deptOptions = res.data
              this.deptNameitem = '发起部门'
            }
          })
          this.eventConfirmTitle = '事件联动'
          /** 查询部门树结构 */
          await deptTreeselect().then(response => {
            this.deptOptionsLiandong = response.data
          })
          this.showEventConfirm = true
        } else if (eventStatus == 'gd') {//归档填报
          this.showEventConfirm_gd = true
        }
      } else {//事件提交后台
        if (eventStatus == 'ld') {
          //事件处理流程--联动
          let array = this.$refs.LiandongDept.getCheckedNodes()
          if (array != null && array.length > 0) {
            for (let i = 0; i < array.length; i++) {
              this.sendLianDongDept.push({ 'taskDeptId': array[i].id, 'taskDeptName': array[i].label })
            }
          }
          if (this.sendTaskSource == '' || this.sendTaskSource == null) {
            this.$message.error(`请选择任务来源!`)
            return
          }
          if (this.sendTaskContent == '' || this.sendTaskContent == null) {
            this.$message.error(`请输入任务内容!`)
            return
          }
          if (this.sendTaskTitle == '' || this.sendTaskTitle == null) {
            this.$message.error(`请输入任务标题!`)
            return
          }
          if (this.sendLianDongDept == '' || this.sendLianDongDept == null) {
            this.$message.error(`请选择任务联动部门!`)
            return
          }
          if (this.sendDeptId == '' || this.sendDeptId == null || this.sendDeptName == '' || this.sendDeptName == null) {
            this.$message.error(`请选择任务发起部门!`)
            return
          }
          let param = {
            sendDeptId: this.sendDeptId,
            sendDept: this.sendDeptName,
            eventCode: this.eventCode,
            longitude: this.longitude,
            latitude: this.latitude,
            taskTitle: this.sendTaskTitle,
            taskSource: this.sendTaskSource,
            taskContent: this.sendTaskContent,
            taskDept: this.sendLianDongDept
          }
          sendTask(param).then(res => {
            if (res.code == 200) {
              this.$message.success(`联动发起成功!`)
              this.refreshEventDialog(this.eventCode)
              this.cancelEventConfirm_send()
              this.showEventConfirm = false
            }
          })

        } else if (eventStatus == 'gd') {
          //事件处理流程--归档
          let param = {
            eventCode: this.eventCode,
            eventStatus: eventStatus,
            id: this.eventId,
            czlx: '',
            forestFireLoss: { eventId: this.eventCode, table1: this.table1 },
            fireInformation: { eventId: this.eventCode, table2: this.table2 },
            array: this.regionalFlagObj.array
          }
          updateCentereventTEventcatalogueStatus(param).then(res => {
            if (res.code == 200) {
              this.$message.success(`处理成功!`)
              this.refreshEvent(this.eventCode)
              this.cancelEventConfirm_send()
              this.showEventConfirm_gd = false
              this.$emit('getEventList', this.calendarDay)
              this.$emit('getTodayEvents', this.calendarDay)
            }
          })
        } else {
          if (eventStatus == 'qs' || eventStatus == 'wb' || eventStatus == 'cf') {
            if (this.sendDeptId == '' || this.sendDeptId == null || this.sendDeptName == '' || this.sendDeptName == null) {
              this.$message.error(`请选择部门!`)
              return
            }
          }
          //事件处理流程
          let param = {
            eventCode: this.eventCode,
            deptId: this.sendDeptId,
            deptName: this.sendDeptName,
            eventStatus: eventStatus,
            eventType: this.sendEventType,
            id: this.eventId,
            czlx: '',
            fireRadius: this.sendHuoZaiBanJing,
            reserve: this.sendGuanLianYuAn
          }
          updateCentereventTEventcatalogueStatus(param).then(res => {
            if (res.code == 200) {
              this.$message.success(`处理成功!`)
              this.refreshEvent(this.eventCode)
              this.cancelEventConfirm_send()
              this.showEventConfirm = false
              this.$emit('getEventList', this.calendarDay)
              this.$emit('getTodayEvents', this.calendarDay)
            }
          })
        }
      }
    },
    filterNode(value, data) {
      //树搜索
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    sendEventLog() {
      //日志发送
      let param = { eventCode: this.eventCode, conext: this.eventLog }
      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.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//应急预案
        if (res.data.catalogue != null && res.data.catalogue.length > 0) {
          this.address = res.data.catalogue[0].address
          this.eventStatusValue = res.data.catalogue[0].eventStatusValue
          this.eventType = res.data.catalogue[0].eventType
          this.eventId = res.data.catalogue[0].id
          this.longitude = res.data.catalogue[0].longitude
          this.latitude = res.data.catalogue[0].latitude
          let markersMap = {
            lng: 124.59,
            lat: 43.02,
            icon: 'marker',
            bindPopupHtml: '',
            click: '',
            parameter: '',
            keepBindPopup: false,
            isAggregation: false,
            radius: 0
          }
          if (res.data.catalogue[0].eventStatusValue == 'forest_event_status_1' && res.data.catalogue[0].urgeCount == 0) {
            markersMap.icon = 'sj-icon-map-xinshangbao'
          }
          if (res.data.catalogue[0].eventStatusValue == 'forest_event_status_1' && res.data.catalogue[0].urgeCount > 0) {
            markersMap.icon = 'sj-icon-map-cuiban'
          } else if (res.data.catalogue[0].eventStatusValue == 'forest_event_status_2') {
            markersMap.icon = 'sj-icon-map-qianshou'
          } else if (res.data.catalogue[0].eventStatusValue == 'forest_event_status_5') {
            markersMap.icon = 'sj-icon-map-banjie'
          } else if (res.data.catalogue[0].eventStatusValue == 'forest_event_status_6') {
            markersMap.icon = 'sj-icon-map-guidang'
          }
          markersMap.lng = res.data.catalogue[0].longitude
          markersMap.lat = res.data.catalogue[0].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[0].latitude, res.data.catalogue[0].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//应急预案
        if (res.data.catalogue != null && res.data.catalogue.length > 0) {
          this.address = res.data.catalogue[0].address
          this.eventStatusValue = res.data.catalogue[0].eventStatusValue
          this.eventType = res.data.catalogue[0].eventType
          this.eventId = res.data.catalogue[0].id
          this.latitude = res.data.catalogue[0].latitude
          this.longitude = res.data.catalogue[0].longitude
          let markersMap = {
            lng: 124.59,
            lat: 43.02,
            icon: 'marker',
            bindPopupHtml: '',
            click: '',
            parameter: '',
            keepBindPopup: false,
            isAggregation: false,
            radius: 0
          }
          if (res.data.catalogue[0].eventStatusValue == 'forest_event_status_1' && res.data.catalogue[0].urgeCount == 0) {
            markersMap.icon = 'sj-icon-map-xinshangbao'
          }
          if (res.data.catalogue[0].eventStatusValue == 'forest_event_status_1' && res.data.catalogue[0].urgeCount > 0) {
            markersMap.icon = 'sj-icon-map-cuiban'
          } else if (res.data.catalogue[0].eventStatusValue == 'forest_event_status_2') {
            markersMap.icon = 'sj-icon-map-qianshou'
          } else if (res.data.catalogue[0].eventStatusValue == 'forest_event_status_5') {
            markersMap.icon = 'sj-icon-map-banjie'
          } else if (res.data.catalogue[0].eventStatusValue == 'forest_event_status_6') {
            markersMap.icon = 'sj-icon-map-guidang'
          }
          markersMap.lng = res.data.catalogue[0].longitude
          markersMap.lat = res.data.catalogue[0].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[0].latitude, res.data.catalogue[0].longitude)
          }, 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('插件未启动，正在尝试启动，请稍候...')
          WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
          initCount++
          if (initCount < 3) {
            setTimeout(function() {
              that.initPlugin(newappkey,newloginIp,newsecret,newloginPort)
            }, 3000)
          } else {
            $('#playWnd').html('插件启动失败，请检查插件是否安装！')
          }
        },
        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;
  }
}


</style>