Project_yhfu/src/views/firespread.vue

<template>
  <div class="visual-con">
    <!--主体-->
    <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 class="sj-map-tool-select">
                <transition-group
                  appear
                  name="animate__animated animate__bounce"
                  enter-active-class="animate__lightSpeedInRight"
                  leave-active-class="animate__backOutRight"
                >
                  <div
                    class="sj-map-tool-select-list"
                    v-show="mapToolShow"
                    id="eventMapToolOnly"
                    key="1"
                  >
                    <el-checkbox
                      v-model="mapToolCheckAll"
                      @change="mapToolCheckAllChange"
                      class="sj-map-tool-checkbox-all"
                    >全选</el-checkbox
                    >
                    <el-checkbox-group
                      v-model="mapToolCheckItem"
                      @change="mapToolCheckChange"
                      class="sj-map-tool-checkbox"
                    >
                      <el-checkbox
                        v-for="tools in mapToolCheck"
                        :label="tools"
                        :key="tools"
                      >{{ tools }}</el-checkbox
                      >
                    </el-checkbox-group>
                  </div>
                </transition-group>

                <el-button
                  size="small"
                  icon="el-icon-s-grid"
                  id="eventMapToolOnlyButton"
                  @click="mapToolShow = !mapToolShow"
                >地图功能</el-button
                >
              </div>
              <div ref="imageTofile" style="height: 75vh;">
                <transition-group
                  appear
                  name="animate__animated animate__bounce"
                  enter-active-class="animate__backInDown"
                  leave-active-class="animate__backOutUp"
                >
                  <!-- 应急预案 -->
                  <div class="dia-left-top" v-show="mapToolCheckItem.includes('应急预案')"
                       key="yingji" >
                    <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">
                          <el-tooltip class="item" effect="dark" :content="visuForestCloudYuAnBo.reserveName"
                                      placement="top-start">
                            <a :href="visuForestCloudYuAnBo.fileUrl"><span>
                              <div
                                style=" width: 50px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-break: keep-all;">
                                {{ visuForestCloudYuAnBo.reserveName }}
                              </div>
                            </span></a>
                          </el-tooltip>
                        </el-carousel-item>
                        <el-carousel-item v-else>
                          <a href="#">暂未关联预案</a>
                        </el-carousel-item>
                      </el-carousel>
                    </div>
                    <el-button size="mini" type="primary" class="yatz_button" @click="showUpdateYjYuAn">预案调整
                    </el-button>
                  </div>
                </transition-group>
                <!-- 左侧资源 -->
                <transition-group
                  appear
                  name="animate__animated animate__bounce"
                  enter-active-class="animate__backInUp"
                  leave-active-class="animate__backOutDown"
                >
                  <div class="leftbar" style="width:fit-content !important;bottom:0rem;left: 1rem; top: unset;"  v-show="mapToolCheckItem.includes('资源与操作')"
                       key="mapToolziyuan">
                    <div class="forthis" style="width:1320px; display: flex;">
                      <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">
                        <div class="i-list-con"
                             style="width: 100%;display: flex; align-items: center;justify-content: space-between">

                          <div class="d-l-con-icon" style="width: fit-content;  flex-direction:row;flex-wrap: nowrap;"
                               ref="thisWidthWH">
                            <leftRightSwiperScroll  v-if="mapToolCheckItem.includes('资源与操作')">
                              <div class="icon-con" style="width: fit-content !important;"
                                   v-for="(item,index) in resourcesList1" @click="fireControlViewPoint(item.type)"
                                   :key="index">
                                <div class="iconfont icon icon-normal" :class="item.icon"
                                     :style="'background:' + item.bg"></div>
                                <div class="icon-text">
                                  <h5 style="white-space: nowrap;">{{ item.resourceName }}</h5>
                                </div>
                              </div>
                            </leftRightSwiperScroll>
                          </div>

                          <el-input type="number" v-model="radius" class="d-input-bottom" placeholder="请输入搜索半径" />
                        </div>
                      </dv-border-box-7>
                    </div>
                  </div>
                  <!-- 左侧资源end -->
                  <!-- 应急预案end -->
                  <div class="fire-m" style="bottom:5rem" v-show="mapToolCheckItem.includes('资源与操作')"
                       key="ziyuan">
                    <el-button
                      size="small"
                      icon="el-icon-s-grid"
                      @click="showTVWallDiaLog()"
                    >视频联动</el-button>
                    <el-button size="small" icon="el-icon-upload" @click="showEventdetailsdialog()">动态标绘</el-button>
                  </div>
                </transition-group>
                <!-- 地图 -->
                <supermapDialog1 ref="supermapDialog1" style="position: absolute; top:0;left: 0;"
                                 :mapDiv="'forestWarmSuperMap'"
                                 :mapSite="{doubleClickZoom:true,dragging:true,scrollWheelZoom:true}" :codes="['9fa5']"
                                 :isSideBySide="false" @preview="preview" :mapToolShowBH="mapToolShowBH"/>
                <!-- 地图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" 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="['#0c4b53', '#18caca']">
                    <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-upload" @click="showEventLogUpload()">上传
                                </el-button>
                                <el-button size="small" icon="el-icon-download" @click="showResponsibility()"
                                           v-if="eventStatusValue!='forest_event_status_1'&&eventStatusValue!='forest_event_status_7'">责任制
                                </el-button>
                                <el-button
                                  v-if="eventStatusValue=='forest_event_status_2' && statusFlag=='1' && dataStatus=='0'"
                                  size="small" icon="el-icon-download"
                                  @click="updateCentereventTEventcatalogueStatus('cz',true)">处置
                                </el-button>
                              </div>
                              <div class="z-info-btm-grp-right">
                                <el-button size="small" icon="el-icon-mic" @click="Meeting()">会议
                                </el-button>
                              </div>
                            </div>
                            <div class="z-info-btm-input">
                              <el-input type="textarea" v-model="eventLog" :autosize="{ minRows: 7, maxRows: 7}"
                                        placeholder="请输入反馈信息">
                              </el-input>
                              <div class="z-info-btm-input-btn" v-if="eventStatusValue=='forest_event_status_1'">
                                <div style="text-align:left">
                                  <el-button size="small" icon="el-icon-s-flag"
                                             @click="updateCentereventTEventcatalogueStatus('qr',true)">
                                    确认
                                  </el-button>
                                  <el-button size="small" icon="el-icon-question"
                                             @click="updateCentereventTEventcatalogueStatus('wb',true)">
                                    误报
                                  </el-button>
                                  <el-button size="small" icon="el-icon-warning"
                                             @click="updateCentereventTEventcatalogueStatus('cf',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_7'">
                                <div style="text-align:left">
                                  <el-button size="small" icon="el-icon-s-flag"
                                             @click="updateCentereventTEventcatalogueStatus('qs',false)">
                                    签收
                                  </el-button>
                                  <el-button size="small" icon="el-icon-question"
                                             @click="updateCentereventTEventcatalogueStatus('wb',false)">
                                    误报
                                  </el-button>
                                  <el-button size="small" icon="el-icon-warning"
                                             @click="updateCentereventTEventcatalogueStatus('cf',false)">
                                    重复
                                  </el-button>
                                </div>
                                <el-button size="small" icon="el-icon-chat-dot-square" @click="sendEventLog()">发送
                                </el-button>
                              </div>
                              <div class="z-info-btm-input-btn" v-else-if="eventStatusValue=='forest_event_status_2'">
                                <div>
                                  <el-button size="small" icon="el-icon-phone" style="text-align:left"
                                             @click="updateCentereventTEventcatalogueStatus('ld',false)">
                                    联动
                                  </el-button>
                                  <el-button size="small" v-if="statusFlag=='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'">
                                <el-button size="small" icon="el-icon-success" style="text-align:left"
                                           v-if="eventTypeXl == 101&&statusFlag=='1'"
                                           @click="updateCentereventTEventcatalogueStatus('gd',false)">
                                  填报
                                </el-button>
                                <el-button size="small" icon="el-icon-success" style="text-align:left"
                                           v-else-if="eventTypeXl != 101&&statusFlag=='1'"
                                           @click="updateCentereventTEventcatalogueStatus('gd',true)">
                                  归档
                                </el-button>
                                <el-button size="small" v-else-if="statusFlag=='2'" icon="el-icon-success"
                                           style="text-align:left" @click="updateCentereventTEventcatalogueStatus('sh',false)">
                                  审核
                                </el-button>
                                <el-button size="small" v-else-if="isExamine =='0'" icon="el-icon-loading" style="text-align:left">
                                  请等待复核，复核通过后方可归档。
                                </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="调整预案" :visible.sync="showGuanLianYuAnConfirm" v-if="showGuanLianYuAnConfirm" width="50%"
               class="top-dialog tz_tk">
      <el-form label-width="80px">
        <el-form-item label="关联预案">
          <el-select v-model="sendGuanLianYuAn" placeholder="请选择关联预案！" clearable>
            <el-option v-for="item in guanLianYuAnList" :key="item.id" :label="item.resTitle" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-button size="mini" type="primary" class="fr_button" @click="updateYjYuAn">确定
        </el-button>
        <div style="clear: both;"></div>
      </el-form>
    </el-dialog>
    <!-- 添加区域标记 -->
    <el-dialog title="火灾区域" :visible.sync="regionalFlagOpen" width="1000px">
      <areaSupermap ref="fireAreaSupermap" v-if="regionalFlagOpen" style="width: 100%;height:74vh"
                    :mapDiv="'fireAreaSuperMap1'" :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>
    <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-button size="mini" type="danger" v-if="depteventId!=null&&depteventId!=''" @click="finUserByDept">选择
            </el-button>
            <el-table :data="dutysystemTableData" style="width: 100%" :rules="rules">
              <el-table-column prop="id" label="主键" v-if="false">
                <template slot-scope="scope" hidden>
                  <el-input v-model="scope.row.id" readonly placeholder="主键"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="姓名">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.name" placeholder="姓名"
                            οninput="value=value.replace(/^[\u4e00-\u9fa5]{2,4}$/,'')"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="post" label="岗位">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.post" placeholder="岗位"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="telphone" label="手机号码">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.telphone" placeholder="手机号码"
                            οninput="value=value.replace(/^((13[0-9])|(14[5-9])|(15([0-3]|[5-9]))|(16[6-7])|(17[1-8])|(18[0-9])|(19[1|3])|(19[5|6])|(19[8|9]))\d{8}$/,'')"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="bookbuytime" label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" icon="el-icon-delete"
                             @click="handleDelete(scope.$index, scope.row)">删除
                  </el-button>
                  <!--<el-button-->
                  <!--size="mini"-->
                  <!--type="danger"-->
                  <!--icon="el-icon-save"-->
                  <!--@click="handleSave(scope.$index, scope.row)">保存-->
                  <!--</el-button>-->
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <el-button size="mini" type="primary" class="fr_button" @click="addResponsibilityDialog">确定
        </el-button>
        <div style="clear: both;"></div>
      </el-form>
    </el-dialog>
    <!--    会议弹窗  start -->
    <el-dialog title="视频会议" :visible.sync="showMeetingMsgDialog" v-if="showMeetingMsgDialog" width="65%"
               @close="closeMeetingMsgDialog()">
      <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-button size="mini" type="danger" v-if="depteventId!=null&&depteventId!=''" @click="finUserByDept">选择
            </el-button>
            <el-table :data="dutysystemTableData" style="width: 100%" :rules="rules">
              <el-table-column prop="id" label="主键" v-if="false">
                <template slot-scope="scope" hidden>
                  <el-input v-model="scope.row.id" readonly placeholder="主键"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="姓名">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.name" placeholder="姓名"
                            οninput="value=value.replace(/^[\u4e00-\u9fa5]{2,4}$/,'')"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="post" label="岗位">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.post" placeholder="岗位"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="telphone" label="手机号码">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.telphone" placeholder="手机号码"
                            οninput="value=value.replace(/^((13[0-9])|(14[5-9])|(15([0-3]|[5-9]))|(16[6-7])|(17[1-8])|(18[0-9])|(19[1|3])|(19[5|6])|(19[8|9]))\d{8}$/,'')"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="bookbuytime" label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" icon="el-icon-delete"
                             @click="handleDelete(scope.$index, scope.row)">删除
                  </el-button>
                  <!--<el-button-->
                  <!--size="mini"-->
                  <!--type="danger"-->
                  <!--icon="el-icon-save"-->
                  <!--@click="handleSave(scope.$index, scope.row)">保存-->
                  <!--</el-button>-->
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <el-button size="mini" type="primary" class="fr_button" @click="sendMsg">发送短信
        </el-button>
        <div style="clear: both;"></div>
      </el-form>
    </el-dialog>
    <!--    会议弹窗  end   -->
    <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="showFindUserByDept" width="40%">
      <findUserByDept v-if="showFindUserByDept" ref="findUserByDept" :deptId="iconCurrentIndex"
                      @addSelection="addSelection"></findUserByDept>
    </el-dialog>
    <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'&&eventTypeXl==null">
          <el-input type="number" v-model="sendHuoZaiBanJing" placeholder="请输入火灾半径" />
        </el-form-item>
        <el-form-item
          v-if="eventStatusButton=='wb'||eventStatusButton=='qs'||eventStatusButton=='cf'"
          :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'">
            <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'&& eventTypeXl == null">
          <el-select v-model="sendEventType" placeholder="请选择事件类型！" clearable>
            <el-option v-for="item in eventTypeList" :key="item.id" :label="item.eventTypeName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="任务来源" v-if="eventStatusButton=='ld'">
          <el-select v-model="sendTaskSource" placeholder="请选择任务来源！" clearable>
            <el-option v-for="dict in dict.type.task_source" :key="dict.value" :label="dict.label"
                       :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="联动标题" v-if="eventStatusButton=='ld'">
          <el-input v-model="sendTaskTitle" placeholder="请输入联动标题" />
        </el-form-item>
        <el-form-item label="联动内容" v-if="eventStatusButton=='ld'">
          <el-input type="textarea" v-model="sendTaskContent" :autosize="{ minRows: 7, maxRows: 7}"
                    placeholder="请输入联动内容">
          </el-input>
        </el-form-item>
        <el-form-item label="联动部门" v-if="eventStatusButton=='ld'">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText">
          </el-input>
          <el-tree class="tree-border tree_scroll" style="height: 20vh; overflow-y:scroll" :data="deptOptionsLiandong"
                   show-checkbox ref="LiandongDept" node-key="id" :check-strictly="true" :filter-node-method="filterNode"
                   :accordion="true" empty-text="加载中，请稍候" :props="defaultProps"></el-tree>
          <!--            default-expand-all-->
        </el-form-item>
        <el-form-item label="关联预案" v-if="eventStatusButton=='qs'">
          <el-select v-model="sendGuanLianYuAn" placeholder="请选择关联预案！" filterable 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=='sh'">
          <el-input type="textarea" v-model="eventDescription" :autosize="{ minRows: 7, maxRows: 7}"
                    placeholder="请输入审核意见">
          </el-input>
        </el-form-item>
        <el-form-item label="附件" prop="schedulePictures" v-if="eventStatusButton=='sh'">
          <ImageUpload ref="ImageUpload" :limit="10" :fileType="['jpg', 'png','jpeg']" :value="uploadAttachList"
                       @input="getUrl"></ImageUpload>
        </el-form-item>
        <!--<el-form-item label="联系人" v-if="eventStatusButton=='qs'">-->
        <!--<el-select multiple collapse-tags v-model='sendUserFegin' placeholder='请选择联系人！' clearable filterable>-->
        <!--<el-option-->
        <!--v-for="item in userFeginList"-->
        <!--:label="item.nickName"-->
        <!--:value="item.phonenumber"-->
        <!--/>-->
        <!--</el-select>-->
        <!--</el-form-item>-->
        <el-button size="mini" type="primary" v-if="eventStatusButton=='qr'"
                   @click="updateCentereventTEventcatalogueStatus('qr',false)">确认
        </el-button>
        <el-button size="mini" type="primary" v-if="eventStatusButton=='qs'"
                   @click="updateCentereventTEventcatalogueStatus('qs',true)">签收
        </el-button>
        <el-button size="mini" type="primary" v-if="eventStatusButton=='wb'"
                   @click="updateCentereventTEventcatalogueStatus('wb',true)">误报
        </el-button>
        <el-button size="mini" type="primary" v-if="eventStatusButton=='cf'"
                   @click="updateCentereventTEventcatalogueStatus('cf',true)">重复
        </el-button>
        <el-button size="mini" type="primary" v-if="eventStatusButton=='ld'"
                   @click="updateCentereventTEventcatalogueStatus('ld',true)">发起联动
        </el-button>
        <el-button size="mini" type="primary" v-if="eventStatusButton=='sh'"
                   @click="updateCentereventTEventcatalogueStatus('shtg',true)">通过
        </el-button>
        <el-button size="mini" type="primary" v-if="eventStatusButton=='sh'"
                   @click="updateCentereventTEventcatalogueStatus('shbtg',true)">不通过
        </el-button>
      </el-form>
    </el-dialog>
    <TVWall ref="TVWall"></TVWall>
  </div>
</template>

<script>
import html2canvas from 'html2canvas' //截图组件
import supermapDialog1 from '@/components/supermap' //超图
import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
import eventLogUpload from '@/views/eventLogUpload.vue' //日志上传文件
import areaSupermap from '@/components/supermap' //区域标记地图
import TcPlayer from '@/components/TcPlayer' //视频预览
import leftRightSwiperScroll from '@/components/leftRightSwiperScroll.vue'; //事件中心底部资源内容溢出组件
import {
  getIconBg
} from '@/api/components/sookaMapIcon'; //资源底色控制文件
import TVWall from '@/components/TVWall.vue' //电视墙弹窗
import {
  getEventDetail,
  sendEventLog,
  listSJfl,
  listYuAn,
  selectByeventCode,
  updateCentereventTEventcatalogueStatus,
  sendTask,
  listResourceByWz,
  updateYjYuAn,
  uploadBase64,
  centereventtdepteventList,
  dutysystemList,
  dutysystemAdd,
  dutysystemRemove,
  getNewDataByDate,
  userFeginlist,
  eventHandling,
  eventExamine,
  fireControlViewList,
  fireControlViewPoint,
  sendMessage,
} from '@/api/forest'
import {
  treeselectAll as deptTreeselect
} from '@/api/system/dept'
import {
  getHaiKangVideoServer
} from '@/api/haikang/haikang'
import {
  hasConferences,
  createConferences,
  getUserInfo
} from "@/api/meeting"
import {
  getDahuaVideoServer
} from '@/api/dahua/dahua'
import DHWs from '@/dahua/lib/DHWs'
import {
  joinConferences
} from "@/api/meeting";
import findUserByDept from '@/views/findUserByDept'
import Cookies from "js-cookie"; //责任人选择弹框
export default {
  dicts: ['task_source'],
  watch: {
    filterText(val) {
      this.$refs.LiandongDept.filter(val)
    }
  },
  components: {
    leftRightSwiperScroll,
    vBottomMenu,
    supermapDialog1,
    eventLogUpload,
    areaSupermap,
    TcPlayer,
    TVWall,
    findUserByDept
  },
  data() {
    return {
      //地图tool开关
      centermonitorTCamera:[],
      mapToolShow: false,
      mapToolCheckAll: false,
      mapToolCheck: ["应急预案", "资源与操作"],
      mapToolCheckItem: [],
      mapToolShowBH:false,
      // isIndeterminate: true,

      isLoading: false,
      showFindUserByDept: false, //责任人选择框
      //海康
      cameraTitle: "",
      cameraCode: "",
      cameraVisible: false,
      initCount: 0,
      pubKey: "",
      oWebControl: null,
      version: 0,
      playVideo: "", //视频预览地址
      showTcPlayer: false, //视频预览弹窗
      regionalFlagOpen: false, //区域标记
      //区域标记
      regionalFlagObj: {
        array: [],
      },
      filterText: "", //树搜索
      /** *****************事件流程***************************/
      deptNameitem: "签收部门",
      sendDeptId: null, //签收部门/发起部门
      sendDeptName: null, //签收部门/发起部门
      sendEventType: null, //事件类型
      sendHuoZaiBanJing: 0, //火灾报告
      sendGuanLianYuAn: null, //关联预案
      sendUserFegin: [], //联系人
      sendTaskSource: null, //任务来源
      sendTaskTitle: null, //联动标题
      sendTaskContent: null, //联动内容
      sendLianDongDept: [], //联动部门
      eventTypeList: [], //事件类型列表
      guanLianYuAnList: [], //关联预案列表
      userFeginList: [], //联系人列表
      deptOptions: [], //签收部门
      deptOptionsLiandong: [], //联动部门
      eventStatusButton: null, //流程按钮标识
      eventConfirmTitle: null, //弹窗标题  ---签收 误报  重复  审核意见
      eventDescription: null, //审核意见
      uploadAttachList: [], //审核上传图片回显集合
      attachExamine: [], //审核图片集合
      defaultProps: {
        children: "children",
        label: "label",
      },
      table1: {
        reportUnit: null,
        reportTimeY: new Date().getFullYear(),
        reportTimeM: new Date().getMonth() + 1,
        reportTimeD: new Date().getDate(),
        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: 0,
        forestLossAreaTotal: null,
        originalForestArea: null,
        artificialForestArea: null,
        peopleTotal: 0,
        blazesTeamNumber: null,
        policeNumber: null,
        armyNumber: null,
        crowdNumber: null,
        windExtinguisher: null,
        secondTool: null,
        waterGun: null,
        elseThings: null,
        forestComposition: "无",
        forestToken: "无",
        porosities: "无",
        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, //事件状态
      isExamine: "0", //事件审核 1通过  0不通过
      eventId: null, //事件ID
      eventType: null, //事件类型-大类
      eventTypeXl: null, //事件类型-小类
      statusFlag: null, //事件流程按钮
      dataStatus: null, //事件处置按钮
      deptId: null, //事件流程部门
      eventCode: null,
      eventName: null,
      longitude: null,
      latitude: null,
      eventLog: null,
      eventLogList: [],
      visuForestCloudYuAnBo: null,
      eventDialog: false,
      showResponsibilityDialog: false, //责任制弹窗
      showMeetingMsgDialog: false, //发送会议短信弹窗
      depteventList: [], //责任制部门列表
      iconCurrentIndex: "",
      dutysystemDeptName: "",
      depteventId: "",
      dutysystemTableData: [],
      radius: 5000, //资源搜索半径
      resourcesList: [
        {
          resourceName: "取水口",
          type: "qsk",
          count: "1",
          icon: "sj-icon-waterintake",
        },
        {
          resourceName: "水鹤",
          type: "sh",
          icon: "sj-icon-watercrane",
        },
        {
          resourceName: "消防栓",
          type: "xfs",
          count: "1",
          icon: "sj-icon-firehydrant",
        },
        {
          resourceName: "起降点",
          type: "qjd",
          count: "1",
          icon: "sj-icon-landing",
        },
        {
          resourceName: "检查站",
          type: "jcz",
          count: "1",
          icon: "sj-icon-checkpoint",
        },
        {
          resourceName: "防火队",
          type: "fhd",
          count: "1",
          icon: "sj-icon-fireteam",
        },
        {
          resourceName: "重点区域",
          type: "zdqy",
          count: "1",
          icon: "sj-icon-keyAreas",
        },
        {
          resourceName: "摄像头",
          type: "sxt",
          count: "1",
          icon: "sj-icon-jkzx",
        },
      ],
      resourcesList1: [{
        resourceName: '取水口',
        type: 'qsk',
        count: '1',
        icon: 'sj-icon-waterintake'
      },
        {
          resourceName: '水鹤',
          type: 'sh',
          icon: 'sj-icon-watercrane'
        },
        {
          resourceName: '消防栓',
          type: 'xfs',
          count: '1',
          icon: 'sj-icon-firehydrant'
        },
        {
          resourceName: '起降点',
          type: 'qjd',
          count: '1',
          icon: 'sj-icon-landing'
        },
        {
          resourceName: '检查站',
          type: 'jcz',
          count: '1',
          icon: 'sj-icon-checkpoint'
        },
        {
          resourceName: '防火队',
          type: 'fhd',
          count: '1',
          icon: 'sj-icon-fireteam'
        },
        {
          resourceName: '重点区域',
          type: 'zdqy',
          count: '1',
          icon: 'sj-icon-keyAreas'
        },
        {
          resourceName: '摄像头',
          type: 'sxt',
          count: '1',
          icon: 'sj-icon-jkzx'
        }
      ],
      resourcesListCheck: [],
      //文本域
      feedback: '',
    }
  },
  props: {
    calendarDay: null //首页日历选择
  },
  created() {
    this.isLoading = true;
    /** ----------------------------------摄像头预览开始------------------------------------- */
    const DHWsInstance = DHWs.getInstance()
    this.ws = DHWsInstance
    /** ----------------------------------摄像头预览结束------------------------------------- */
  },
  // mounted() {
  //   this.fireControlViewList();
  // },
  methods: {
    showTVWallDiaLog() {
      this.initByCameras();
      // this.$refs.TVWall.showTVWall();
    },
    initByCameras() {
      // const params = Object.assign({})
      // params.longitude = this.longitude;
      // params.latitude = this.latitude;
      // params.type = '8'
      // initByCameras(params).then(res => {
      //   this.$refs.TVWall.showTVWall1(this.longitude, this.latitude, res.data);
      //   this.$refs.bottomMenu.showMeasure = false
      //   this.$refs.bottomMenu.showChild = false
      //   this.$refs.bottomMenu.showBanChild = false
      //   this.$refs.bottomMenu.showChangChild = false
      // })
      let that = this
      if(that.centermonitorTCamera == null){
        this.$message.warning("当前事件无绑定摄像头")
        return
      }
      let tvListJson = [{
        "switchTab": "2",
        "treeLabels": [{
          "id": null,
          "labelCode": "999",
          "labelName": "电视墙",
          "cameraType": null,
          "parentLabelCode": ""
        },
          {
            "id": "spcamera00010",
            "labelCode": that.centermonitorTCamera.cameraCode,
            "labelName": that.centermonitorTCamera.cameraName,
            "cameraType": that.centermonitorTCamera.cameraType,
            "parentLabelCode": "999"
          }
        ],
        "labelChannels": [{
          "labelCode": that.centermonitorTCamera.cameraCode,
          "channelDates": [{
            "channelCode": that.centermonitorTCamera.cameraCode,
            "channelName": that.centermonitorTCamera.cameraName,
            "channelSn": null,
            "cameraType": that.centermonitorTCamera.cameraType,
            "online": "1",
            "cameraCode": null
          }]
        }]
      }]
      this.$refs.TVWall.showTVWall1(this.longitude, this.latitude, tvListJson);
      this.$refs.bottomMenu.showMeasure = false
      this.$refs.bottomMenu.showChild = false
      this.$refs.bottomMenu.showBanChild = false
      this.$refs.bottomMenu.showChangChild = false
    },
    closedEventDiaTool() {
      document.addEventListener("click", (e) => {
        let b = document.getElementById("eventMapToolOnly");
        let c = document.getElementById("eventMapToolOnlyButton");
        if (this.mapToolShow && !b.contains(e.target) && !c.contains(e.target)) {
          this.mapToolShow = false;
        }
      });

    },
    // 地图tool显隐
    mapToolCheckAllChange(val) {
      this.mapToolCheckItem = [];
      this.mapToolCheckItem = val ? this.mapToolCheck : [];
      // this.isIndeterminate = false;
      this.mapToolCheckChangeBH()
    },
    mapToolCheckChangeBH(){
      if (this.mapToolCheckItem.includes("地图标绘")) {
        this.mapToolShowBH= true
      } else {
        this.mapToolShowBH= false
      }
    },
    mapToolCheckChange(value) {
      let checkedCount = value.length;
      this.mapToolCheckAll = checkedCount === this.mapToolCheck.length;
      this.mapToolCheckChangeBH()
    },
    /************************************责任制-开始****************************************/
    addLine: function() { //添加负责人行数
      var newValue = {
        id: '', //主键
        userId: '', //用户主键
        dept: '', //部门名称
        depteventId: '', //事件部门关联责任人
        name: '', //姓名
        post: '', //岗位
        telphone: '' //手机号
      }
      //添加新的行数
      this.dutysystemTableData.push(newValue)
    },
    getNewDataByDate(eventCode) {
      const that = this
      console.log(eventCode)
      getNewDataByDate(eventCode).then(function(res) {
        that.windDirection = res.data.windDirection
        that.windSpeed = res.data.windSpeed
        setTimeout(() => {
          that.showheatPlotting()
        }, 2000)
      })
    },
    // 获取消防左侧菜单列表
    fireControlViewList() {
      this.resourcesList1 = [];
      let _this = this;
      fireControlViewList("xiaofang").then(function (res) {
        // _this.resourcesList = res.data
        //截取data.resourceTable字段中“_”分隔符最后一个作为关键字,重新拼接成前端需要的图标:class,格式sj-icon-xxxx,将其set回原数组
        res.data.forEach(function (data, index) {
          let obj = {};
          let icon =
            "sj" +
            "-" +
            "icon" +
            "-" +
            data.type.replaceAll("_", "-").replaceAll("@", "-");
          let resourceName = data.name.replaceAll("(个)", "");
          obj.resourceName = resourceName;
          obj.type = data.type;
          obj.count = data.num;
          obj.icon = icon;
          _this.resourcesList1.push(obj);
          console.log("icon_" + (index + 1) + "=", icon);
          //每个图标对应固定颜色
          _this.$set(_this.resourcesList1[index], "bg", getIconBg(icon));
        });
        _this.resourcesList1.push({
          resourceName: "摄像头",
          type: "sxt",
          count: "1",
          icon: "sj-icon-jkzx",
          bg: "#f5ad1b",
        });
      });
    },
    fireControlViewPoint(type) {
      let that = this;
      if (that.resourcesListCheck.indexOf(type) > -1) {
        that.resourcesListCheck.splice(that.resourcesListCheck.indexOf(type), 1)
        setTimeout(() => {
          that.$refs.supermapDialog1.clearMByType(type)
        }, 1000)
      } else {
        // 消防资源落点
        let param = {
          longitude: that.longitude,
          latitude: that.latitude,
          type: type,
          radius: that.radius
        }
        if (type != 'sxt') {
          fireControlViewPoint(param).then(res => {
            if (res.data != null && res.data.pointList.length > 0) {
              that.resourcesListCheck.push(type)
              var markersList = []
              for (let i = 0; i < res.data.pointList.length; i++) {
                let markersMap = {
                  lng: 124.59,
                  lat: 43.02,
                  icon: "marker",
                  bindPopupHtml: "",
                  click: "",
                  parameter: "",
                  keepBindPopup: false,
                  isAggregation: true,
                };
                markersMap.icon = "sj-icon-map-" + type.replaceAll("_", "-");
                markersMap.lng = res.data.pointList[i].longitude;
                markersMap.lat = res.data.pointList[i].latitude;
                markersMap.bindPopupHtml =
                  '<div class="map-tip">' +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>资源名称：" +
                  res.data.pointList[i].name +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>经纬度：" +
                  res.data.pointList[i].longitude +
                  "," +
                  res.data.pointList[i].latitude +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>名称：" +
                  (res.data.pointList[i].name?res.data.pointList[i].name:'无') +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>地址：" +
                  (res.data.pointList[i].address?res.data.pointList[i].address:'无') +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>联系人：" +
                  (res.data.pointList[i].contacts?res.data.pointList[i].contacts:'无') +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>电话：" +
                  (res.data.pointList[i].phone?res.data.pointList[i].phone:'无') +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>距离事件距离：" +
                  (res.data.pointList[i].distance?res.data.pointList[i].distance+'米':'无') +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "</div>";
                markersList.push(markersMap);
              }
              setTimeout(() => {
                that.$refs.supermapDialog1.setMarkersByType(markersList, type)
              }, 1000)
            }
          })
        } else {
          that.listResourceByWz(type);
        }
      }
    },
    showTVWall(channelCode, channelName) {
      let tvListJson = [{
        "switchTab": "2",
        "treeLabels": [{
          "id": null,
          "labelCode": "999",
          "labelName": "电视墙",
          "cameraType": null,
          "parentLabelCode": ""
        },
          {
            "id": "spcamera00010",
            "labelCode": channelCode,
            "labelName": channelName,
            "cameraType": "1",
            "parentLabelCode": "999"
          }
        ],
        "labelChannels": [{
          "labelCode": channelCode,
          "channelDates": [{
            "channelCode": channelCode,
            "channelName": channelName,
            "channelSn": null,
            "cameraType": "1",
            "online": "1",
            "cameraCode": "1"
          }]
        }]
      }]
      this.$refs.TVWall.showTVWall(tvListJson, [{
        "channelId": channelCode
      }]);
      this.$refs.bottomMenu.showMeasure = false;
      this.$refs.bottomMenu.showChild = false;
      this.$refs.bottomMenu.showBanChild = false;
      this.$refs.bottomMenu.showChangChild = false;
    },
    addSelection: function(userList) {
      for (let i in this.dutysystemTableData) {
        for (let j in userList) {
          if (this.dutysystemTableData[i].name == userList[j].name && this.dutysystemTableData[i].telphone ==
            userList[j].telphone) {
            userList.splice(j, 1);
          }
        }
      }
      this.dutysystemTableData = this.dutysystemTableData.concat(userList);
      this.showFindUserByDept = false;
    },

    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)
      })
    },
    finUserByDept: function() { //根据部门选择责任人
      this.showFindUserByDept = true;
    },
    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 = []
        }
      })
    },

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

        if (this.dutysystemTableData[i].id == null || this.dutysystemTableData[i].id == '') {
          this.dutysystemTableData[i].dept = this.dutysystemDeptName;
          this.dutysystemTableData[i].depteventId = this.depteventId;
        }
      }
      const param = {
        centereventTDutySystemList: this.dutysystemTableData,
        eventCode: this.eventCode,
        eventName: this.eventName
      }
      dutysystemAdd(param).then(res => {
        this.$message.success(`保存成功!`)
        this.dutysystemSelect(this.iconCurrentIndex, this.dutysystemDeptName, this.depteventId);
        this.closeResponsibilityDialog();
      })
    },
    /************************************责任制-结束****************************************/
    showEventdetailsdialog() {
      this.eventDialog = false;
      this.cancelEventShow()
      this.$emit('getFirespread', this.eventCode);
    },
    showheatPlotting() {
      this.$refs.supermapDialog1.showheatPlotting(this.latitude, this.longitude, this.windSpeed, this.windDirection)
    },
    showUpdateYjYuAn() {
      listYuAn().then(res => {
        //关联预案列表
        if (res.code == 200) {
          this.guanLianYuAnList = res.data
          this.showGuanLianYuAnConfirm = true
        }
      })
    },
    updateYjYuAn() {
      if (this.eventStatusValue == 'forest_event_status_1') {
        this.$message.error(`修改预案信息在签收后方可修改！`)
        return
      } else {
        let param = {
          eventCode: this.eventCode,
          reserve: this.sendGuanLianYuAn
        }
        updateYjYuAn(param).then(res => {
          //事件调整关联预案
          if (res.code == 200) {
            this.$message.success(`预案调整成功!`)
            this.refreshEventDialog(this.eventCode)
            this.sendGuanLianYuAn = null
            this.showGuanLianYuAnConfirm = false
          }
        })
      }
    },
    listResourceByWz(type) {
      let that=this;
      if (that.resourcesListCheck.indexOf(type) > -1) {
        that.resourcesListCheck.splice(that.resourcesListCheck.indexOf(type), 1)
        setTimeout(() => {
          that.$refs.supermapDialog1.clearMByType(type)
        }, 1000)
      } else {
        //搜索物资
        let param = {
          longitude: that.longitude,
          latitude: that.latitude,
          type: type,
          radius: that.radius
        }
        listResourceByWz(param).then(res => {
          if (res.data != null && res.data.length > 0) {
            that.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: true
              }
              if (type == 'qsk') {
                markersMap.icon = 'sj-icon-waterintake'
              } else if (type == 'sh') {
                markersMap.icon = 'sj-icon-watercrane'
              } else if (type == 'xfs') {
                markersMap.icon = 'sj-icon-firehydrant'
              } else if (type == 'qjd') {
                markersMap.icon = 'sj-icon-landing'
              } else if (type == 'jcz') {
                markersMap.icon = 'sj-icon-checkpoint'
              } else if (type == 'fhd') {
                markersMap.icon = 'sj-icon-fireteam'
              } else if (type == 'zdqy') {
                markersMap.icon = 'sj-icon-keyAreas'
              } else if (type == 'sxt') {
                if(res.data[i].cameraUse==1)
                {
                  if(res.data[i].workingStatus==0)
                  {
                    markersMap.icon='sj-icon-map-centerdata-slmonitor'
                    markersMap.click='preview'
                  }else if (res.data[i].workingStatus==1)
                  {
                    markersMap.icon='sj-icon-map-not-centerdata-slmonitor'
                    markersMap.click=''
                  }

                } else  if (res.data[i].cameraUse == 2){
                  if(res.data[i].workingStatus==0)
                  {
                    markersMap.icon = "camera";
                    markersMap.click='preview'
                  }else if (res.data[i].workingStatus==1)
                  {
                    markersMap.icon = "camera-not";
                    markersMap.click=''
                  }
                }  else if (res.data[i].cameraUse == 3) {
                  if(res.data[i].workingStatus==0)
                  {
                    markersMap.icon = 'sj-icon-map-centerdata-slmonitor-traffic'
                    markersMap.click='preview'
                  }else if (res.data[i].workingStatus==1)
                  {
                    markersMap.icon = 'sj-icon-map-not-centerdata-slmonitor-traffic'
                    markersMap.click=''
                  }

                }
                else if (res.data[i].cameraUse == 4) {
                  if(res.data[i].workingStatus==0)
                  {
                    markersMap.icon = 'sj-icon-map-centerdata-sand-quarry-camera'
                    markersMap.click='preview'
                  }else if (res.data[i].workingStatus==1)
                  {
                    markersMap.icon = 'sj-icon-map-not-centerdata-sand-quarry-camera'
                    markersMap.click=''
                  }

                }
                else if (res.data[i].cameraUse == 5) {
                  if (res.data[i].workingStatus == 0) {
                    markersMap.icon = 'sj-icon-map-centerdata-t-hydraulic-reservoir-camera'
                    markersMap.click = 'preview'
                  } else if (res.data[i].workingStatus == 1) {
                    markersMap.icon = 'sj-icon-map-not-centerdata-t-hydraulic-reservoir-camera'
                    markersMap.click = ''
                  }
                }
                if (res.data[i].cameraCode != null) {
                  // markersMap.click = 'preview'
                  // markersMap.parameter = res.data[i].cameraCode
                  markersMap.parameter = {code:res.data[i].cameraCode,
                    type:res.data[i].cameraFactory?res.data[i].cameraFactory:1,name:res.data[i].cameraName}
                }

              }
              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].cameraName + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '</div>'
              markersList.push(markersMap)
            }
            setTimeout(() => {
              that.$refs.supermapDialog1.setMarkersByType(markersList, type)
            }, 1000)
          }
        })
      }
    },
    // 返回图片列表
    assetTypeAnImage(filePath) {
      let imageList = []
      if (filePath != null && filePath.length > 0) {
        for (let i = 0; i < filePath.length; i++) {
          if (filePath[i].fileType == 'image') {
            imageList.push(filePath[i].fileUrl)
          }
        }
      }
      return imageList
    },
    clickFile(fileUrl, fileName, fileType) {
      if (fileType == 'image') {
        return
      } else if (fileType == 'video') {
        this.showTcPlayer = true
        setTimeout(() => {
          this.playVideo = fileUrl
        }, 500)
      } else {
        let a = document.createElement('a')
        a.download = fileName
        a.href = fileUrl
        a.target = '_blank'
        a.click()
      }
    },
    setValue(event) {
      //签收选择部门
      this.sendDeptName = event.label
      this.sendDeptId = event.value
    },
    cancelEventConfirm() {
      //关闭事件签收弹窗
      this.sendDeptId = null
      this.sendDeptName = null
      this.sendUserFegin = []
      this.sendEventType = null
      this.sendHuoZaiBanJing = 0
      this.sendGuanLianYuAn = null
      // this.longitude = null
      // this.latitude = null
      this.sendTaskTitle = null
      this.sendTaskSource = null
      this.sendTaskContent = null
      this.sendLianDongDept = []
      this.eventTypeList = [] //事件类型列表
      this.guanLianYuAnList = [] //关联预案列表
      this.deptOptions = [] //签收部门
      this.deptOptionsLiandong = [] //联动部门
      this.eventStatusButton = null //流程按钮标识
      this.eventConfirmTitle = null //流程按钮标识
      this.resourcesListCheck = []
      this.userFeginList = [] //联系人列表
    },
    cancelEventConfirm_send() {
      //清空表单数据
      this.sendDeptId = null
      this.sendDeptName = null
      this.sendUserFegin = []
      this.sendEventType = null
      this.sendHuoZaiBanJing = 0
      this.sendGuanLianYuAn = null
      this.sendTaskTitle = null
      this.sendTaskSource = null
      this.sendTaskContent = null
      this.sendLianDongDept = []
      this.eventTypeList = [] //事件类型列表
      this.guanLianYuAnList = [] //关联预案列表
      this.deptOptions = [] //签收部门
      this.deptOptionsLiandong = [] //联动部门
      this.userFeginList = [] //联系人列表
    },
    cancelEventConfirm_gd() {
      //关闭事件火险报告窗口
      this.resetTable1()
      this.resetTable2()
    },
    cancelEventConfirm_mp4() {
      //关闭视频窗口
      this.playVideo = ''
      this.$refs.TcPlayer.destroyed()
    },
    resetTable1() {
      this.table1 = {
        reportUnit: null,
        reportTimeY: null,
        reportTimeM: null,
        reportTimeD: null,
        forestFireLossTotal: null,
        fireLossTotal: null,
        forestArea: null,
        forestPrice: null,
        treesNumber: null,
        treesPrice: null,
        minorInjuriesNumber: null,
        minorInjuriesPrice: null,
        seriouslyInjuredNumber: null,
        seriouslyInjuredPrice: null,
        deathNumber: null,
        deathPrice: null,
        elseFireLossPrice: null,
        blazesPriceTotal: null,
        artificialDays: null,
        artificialPrice: null,
        vehicleNumber: null,
        carNumber: null,
        vehiclePrice: null,
        planeNumber: null,
        planePrice: null,
        elseBlazesPrice: null,
        note: null
      }
    },
    resetTable2() {
      this.table2 = {
        fireTime: null,
        foundTime: null,
        blazesTime: null,
        address: null,
        firePlace: null,
        foundType: null,
        longitudeD: null,
        longitudeM: null,
        longitudeS: null,
        latitudeD: null,
        latitudeM: null,
        latitudeS: null,
        fireSource: null,
        fireType: null,
        fireLevel: null,
        areaTotal: null,
        forestLossAreaTotal: null,
        originalForestArea: null,
        artificialForestArea: null,
        peopleTotal: null,
        blazesTeamNumber: null,
        policeNumber: null,
        armyNumber: null,
        crowdNumber: null,
        windExtinguisher: null,
        secondTool: null,
        waterGun: null,
        elseThings: null,
        forestComposition: null,
        forestToken: null,
        porosities: null,
        weather: null,
        temperature: null,
        fireInsuranceLevel: null,
        windLevel: null,
        windDirection: null,
        commandUnit: null,
        commandName: null,
        commandPosition: null,
        surveyUnit: null,
        surveyName: null,
        surveyPosition: null,
        accidentName: null,
        accidentSex: null,
        accidentAge: null,
        accidentPosition: null,
        accidentUnit: null,
        dealType: null,
        dealNumber: null,
        criminalDealNumber: null,
        accidentDealSituation: null,
        responsibilityDealSituation: null,
        leadershipDealSituation: null,
        townForm: null,
        townAudit: null,
        cityForm: null,
        cityAudit: null
      }
    },
    getUrl(urlList) {
      this.uploadAttachList = urlList
      this.attachExamine = []
      urlList.forEach(item => {
        var attachPath = {
          attachPath: item.name
        }
        this.attachExamine.push(attachPath)
      });
    },

//设置联动部门不可选择本部门
    recursiveChildren(arrayList,deptId) {
      arrayList.forEach((item, index) => {
        if(item.id==deptId){
          item.disabled="true";
          return
        }
        if(item.children){
          this.recursiveChildren(item.children,deptId)
        }
      });
    },
    /**
     * eventStatusValue 事件状态
     * isSend 是否办理
     * */
    async updateCentereventTEventcatalogueStatus(eventStatus, isSend) {
      this.eventStatusButton = eventStatus;
      let that = this;
      if (!isSend) {
        //事件弹窗
        if (eventStatus == "qs") {
          //签收
          that.eventConfirmTitle = "事件签收";
          let param = {
            parentId: that.eventType,
          };
          if (that.eventTypeXl != null) {
            that.sendEventType = that.eventTypeXl;
          } else {
            await listSJfl(param).then((res) => {
              //事件类型
              if (res.code == 200) {
                that.eventTypeList = res.data;
              }
            });
          }
          await listYuAn().then((res) => {
            //关联预案
            if (res.code == 200) {
              that.guanLianYuAnList = res.data;
            }
          });
          await selectByeventCode(that.eventCode).then((res) => {
            //签收部门
            if (res.code == 200) {
              that.deptOptions = res.data;
              that.deptNameitem = "签收部门";
            }
          });
          that.showEventConfirm = true;
        } else if (eventStatus == "qr") {
          //确认
          that.eventConfirmTitle = "事件确认";
        } else if (eventStatus == "wb") {
          //误报
          that.eventConfirmTitle = "事件误报";
          await selectByeventCode(that.eventCode).then((res) => {
            //签收部门
            if (res.code == 200) {
              that.deptOptions = res.data;
              that.deptNameitem = "签收部门";
            }
          });
          that.showEventConfirm = true;
        } else if (eventStatus == "cf") {
          //重复
          that.eventConfirmTitle = "事件重复";
          await selectByeventCode(that.eventCode).then((res) => {
            //签收部门
            if (res.code == 200) {
              that.deptOptions = res.data;
              that.deptNameitem = "签收部门";
            }
          });
          that.showEventConfirm = true;
        } else if (eventStatus == "ld") {
          //联动
          await selectByeventCode(that.eventCode).then((res) => {
            //签收部门
            if (res.code == 200) {
              that.deptOptions = res.data;
              that.deptNameitem = "发起部门";
            }
          });
          that.eventConfirmTitle = "事件联动";
          /** 查询部门树结构 */
          await deptTreeselect().then((response) => {
            let deptId=Cookies.get("deptId")
            that.recursiveChildren(response.data,deptId)
            that.deptOptionsLiandong = response.data;
          });
          that.showEventConfirm = true;
        } else if (eventStatus == "sh") {
          //审核
          that.eventConfirmTitle = "事件审核";
          that.showEventConfirm = true;
        } else if (eventStatus == "gd") {
          //归档填报
          that.showEventConfirm_gd = true;
        }
      } else {
        //事件提交后台
        if (eventStatus == "ld") {
          //事件处理流程--联动1
          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 eventState = "";
          listSJfl({
            parentId: that.eventType,
          }).then((res) => {
            if (res.code == 200) {
              for (let i in res.data) {
                if (res.data[i].id == that.eventTypeXl) {
                  eventState = res.data[i].eventTypeName;
                }
              }
              let param = {
                sendDeptId: Cookies.get("deptId"),
                sendDept: Cookies.get("deptName"),
                eventCode: that.eventCode,
                longitude: that.longitude,
                latitude: that.latitude,
                taskTitle: that.sendTaskTitle,
                taskSource: that.sendTaskSource,
                taskContent: that.sendTaskContent,
                taskDept: that.sendLianDongDept,
                eventAddress: that.address,
                eventState: eventState,
                eventName: that.eventName,
              };
              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") {
          if (that.eventTypeXl == 101) {
            let double =
              /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/; //数字和两位小数
            let number = /^[+]{0,1}(\d+)$/g; //正整数

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

          //事件处理流程--归档
          let param = {
            deptId: that.deptId,
            eventCode: that.eventCode,
            eventStatus: eventStatus,
            id: that.eventId,
            version: that.version,
            czlx: "",
            forestFireLoss: {
              eventId: that.eventCode,
              table1: that.table1,
            },
            fireInformation: {
              eventId: that.eventCode,
              table2: that.table2,
            },
            array: that.regionalFlagObj.array,
          };
          updateCentereventTEventcatalogueStatus(param).then((res) => {
            if (res.code == 200) {
              that.$message.success(`处理成功!`);
              that.refreshEvent(that.eventCode);
              that.cancelEventConfirm_send();
              that.showEventConfirm_gd = false;
              that.$emit("getEventList", that.calendarDay, 10, 1);
              that.$emit("getSupermap", that.calendarDay);
            } else if (res.code == 304) {
              console.log(that.eventCode);
              this.$message.warning(res.msg);
              this.showEventDialog(that.eventCode);
              //获取事件详情
            }
          });
        } else if (eventStatus == "shtg") {
          that.eventStatusButton = "sh";
          if (that.eventDescription == "" || that.eventDescription == null) {
            that.$message.error(`请填写审核意见!`);
            return;
          }
          if (that.attachExamine.length == 0 || that.attachExamine == null) {
            that.$message.error(`请上传审核图片！`);
            return;
          }
          //事件处理流程--审核通过
          let param = {
            id: that.eventId, //事件id
            eventCode: that.eventCode, //事件编号
            eventName: that.eventName, //事件名称
            isExamine: 1, //通过传1，不通过传0
            version: that.version,
            eventDescription: that.eventDescription, //审核意见
            attach: that.attachExamine,
          };
          eventExamine(param).then((res) => {
            if (res.code == 200) {
              that.$message.success(`处理成功!`);
              that.refreshEvent(that.eventCode);
              that.cancelEventConfirm_send();
              that.showEventConfirm = false;
            } else if (res.code == 304) {
              console.log(that.eventCode);
              this.$message.warning(res.msg);
              this.showEventDialog(that.eventCode);
              //获取事件详情
            }
            that.attachExamine = [];
            that.uploadAttachList = [];
            that.eventDescription = "";
          });
        } else if (eventStatus == "shbtg") {
          that.eventStatusButton = "sh";
          if (that.eventDescription == "" || that.eventDescription == null) {
            that.$message.error(`请填写审核意见!`);
            return;
          }
          if (that.attachExamine.length == 0 || that.attachExamine == null) {
            that.$message.error(`请上传审核图片！`);
            return;
          }
          //事件处理流程--审核不通过
          let param = {
            id: that.eventId, //事件id
            eventCode: that.eventCode, //事件编号
            eventName: that.eventName, //事件名称
            isExamine: 0, //通过传1，不通过传0
            version: that.version,
            eventDescription: that.eventDescription, //审核意见
            attach: that.attachExamine,
          };
          eventExamine(param).then((res) => {
            if (res.code == 200) {
              that.$message.success(`处理成功!`);
              that.refreshEvent(that.eventCode);
              that.cancelEventConfirm_send();
              that.showEventConfirm = false;
            } else if (res.code == 304) {
              console.log(that.eventCode);
              this.$message.warning(res.msg);
              this.showEventDialog(that.eventCode);
              //获取事件详情
            }
            that.attachExamine = [];
            that.uploadAttachList = [];
            that.eventDescription = "";
          });
        } else if (eventStatus == "cz") {
          eventHandling(that.eventId, that.eventCode).then((res) => {
            if (res.code == 200) {
              that.$message.success(`处理成功!`);
              that.refreshEvent(that.eventCode);
              that.cancelEventConfirm_send();
              that.showEventConfirm = false;
            }
          });
        } else {
          if (eventStatus == "qs") {
            if (
              that.sendDeptId == "" ||
              that.sendDeptId == null ||
              that.sendDeptName == "" ||
              that.sendDeptName == null
            ) {
              that.$message.error(`请选择部门!`);
              return;
            }
            if (eventStatus == "qs") {
              if (that.sendEventType == "" || that.sendEventType == null) {
                that.$message.error(`请选择事件类型!`);
                return;
              }
            }
          } else {
            that.sendDeptId = that.deptId;
          }
          //事件处理流程
          let param = {
            phones: that.sendUserFegin,
            eventCode: that.eventCode,
            deptId: that.sendDeptId,
            deptName: that.sendDeptName,
            eventStatus: eventStatus,
            eventType: that.sendEventType,
            id: that.eventId,
            czlx: "",
            version: that.version,
            cameraCode: that.cameraCode,
            fireRadius: that.sendHuoZaiBanJing,
            reserve: that.sendGuanLianYuAn,
            address: that.address,
          };
          updateCentereventTEventcatalogueStatus(param).then((res) => {
            if (res.code == 200) {
              that.$message.success(`处理成功!`);
              that.cancelEventConfirm_send();
              that.showEventConfirm = false;
              that.$emit("getEventList", that.calendarDay, 10, 1);
              that.$emit("getSupermap", that.calendarDay);
              if (eventStatus == "cf" || eventStatus == "wb") {
                this.eventDialog = false;
                return;
              }
              that.refreshEvent(that.eventCode);
            } else if (res.code == 304) {
              console.log(that.eventCode);
              this.$message.warning(res.msg);
              this.showEventDialog(that.eventCode);
              //获取事件详情
            }
          });
        }
      }
    },
    filterNode(value, data) {
      //树搜索
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },

    sendEventLog() {
      if (this.eventLog == '' || this.eventLog == null) {

        return;
      }
      //日志发送
      let param = {
        eventCode: this.eventCode,
        logContent: this.eventLog,
        operation: "bus_oper_type_2",
        operationType: "log_oper_type_1"
      }
      sendEventLog(param).then(res => {
        if (res.code == 200) {
          this.$message.success(`发送成功!`)
          this.eventLog = null
          this.refreshEventDialog(this.eventCode)
        }
      })
    },
    showEventLogUpload() {
      this.$refs.eventLogUpload.eventLogUpload(this.eventCode)
    },
    cancelEventShow() {
      this.mapToolShow=false
      this.mapToolCheckItem = [];
      this.mapToolCheckAll=false
      this.mapToolShowBH=false,
        this.dataStatus = null
      this.deptId = null
      console.log('关闭事件弹窗')
      this.eventLogList = []
    },
    showEventDialog(eventCode) {
      this.mapToolShow=false
      this.mapToolCheckItem = [];
      this.mapToolCheckAll=false
      this.mapToolShowBH=false,
        this.fireControlViewList();
      this.eventCode = eventCode;
      let that = this;
      //获取事件详情
      getEventDetail({
        eventCode: eventCode,
      }).then((res) => {
        let markersMapList = [];
        that.eventDialog = true;
        that.eventLogList = res.data.eventlog; //日志列表
        that.visuForestCloudYuAnBo = res.data.visuForestCloudYuAnBo; //应急预案
        that.address = res.data.catalogue.address;
        that.eventStatusValue = res.data.catalogue.eventStatusValue;
        that.eventType = res.data.catalogue.eventType;
        that.statusFlag = res.data.catalogue.statusFlag;
        that.dataStatus = res.data.catalogue.dataStatus;
        that.deptId = res.data.catalogue.deptId;
        that.eventId = res.data.catalogue.id;
        that.longitude = res.data.catalogue.longitude;
        that.latitude = res.data.catalogue.latitude;
        that.eventName = res.data.catalogue.eventName;
        that.version = res.data.catalogue.version;
        that.eventTypeXl = res.data.catalogue.eventTypeXl;
        that.isExamine = res.data.catalogue.isExamine;
        let markersMap = {
          lng: 124.59,
          lat: 43.02,
          icon: "marker",
          bindPopupHtml: "",
          click: "",
          parameter: "",
          keepBindPopup: false,
          isAggregation: true,
          radius: 0,
        };
        if (
          res.data.catalogue.eventStatusValue == "forest_event_status_1" &&
          res.data.catalogue.urgeCount == 0
        ) {
          markersMap.icon = "sj-icon-map-xinshangbao";
        }
        if (
          res.data.catalogue.eventStatusValue == "forest_event_status_1" &&
          res.data.catalogue.urgeCount > 0
        ) {
          markersMap.icon = "sj-icon-map-cuiban";
        } else if (
          res.data.catalogue.eventStatusValue == "forest_event_status_2"
        ) {
          markersMap.icon = "sj-icon-map-qianshou";
        } else if (
          res.data.catalogue.eventStatusValue == "forest_event_status_5"
        ) {
          markersMap.icon = "sj-icon-map-banjie";
        } else if (
          res.data.catalogue.eventStatusValue == "forest_event_status_6"
        ) {
          markersMap.icon = "sj-icon-map-guidang";
        } else if (
          res.data.catalogue.eventStatusValue == "forest_event_status_7"
        ) {
          markersMap.icon = "sj-icon-map-queren";
        }
        markersMap.lng = res.data.catalogue.longitude;
        markersMap.lat = res.data.catalogue.latitude;
        if (
          res.data.eventdetail != null &&
          res.data.eventdetail.length > 0 &&
          res.data.eventdetail[0].fireRadius != null &&
          res.data.eventdetail[0].fireRadius != "" &&
          res.data.eventdetail[0].fireRadius > 0
        ) {
          markersMap.radius = res.data.eventdetail[0].fireRadius;
        }
        markersMapList.push(markersMap);
        if (res.data.centermonitorTCamera != null) {
          that.cameraCode = res.data.centermonitorTCamera.id;
          if(res.data.centermonitorTCamera.longitude != null && res.data.centermonitorTCamera.latitude != null){
            that.centermonitorTCamera = res.data.centermonitorTCamera;
            let markersMap = {
              lng: 124.59,
              lat: 43.02,
              icon: "camera",
              bindPopupHtml: "",
              click: "preview",
              parameter: {
                code: res.data.centermonitorTCamera.cameraCode,
                type: res.data.centermonitorTCamera.cameraFactory,
                name: res.data.centermonitorTCamera.cameraName,
              },
              keepBindPopup: false,
              isAggregation: true,
              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;
            markersMapList.push(markersMap);
          }
        }
        setTimeout(() => {
          that.$refs.supermapDialog1.dynamicPlotting(); //弹出动态绘制窗口，防止截图位置改变
          that.$refs.supermapDialog1.dropLocation10(
            res.data.catalogue.latitude,
            res.data.catalogue.longitude
          );
          that.$refs.supermapDialog1.clearM(false);
          that.$refs.supermapDialog1.clearM(true);
          that.$refs.supermapDialog1.setMarkersRadius(markersMapList);
        }, 2000);
      });
    },
    refreshEvent(eventCode) {
      this.eventCode = eventCode;
      let that = this;
      //刷新--事件详情
      getEventDetail({
        eventCode: eventCode,
      }).then((res) => {
        let markersMapList = [];
        that.eventDialog = true;
        that.eventLogList = res.data.eventlog;
        that.visuForestCloudYuAnBo = res.data.visuForestCloudYuAnBo; //应急预案
        that.address = res.data.catalogue.address;
        that.eventStatusValue = res.data.catalogue.eventStatusValue;
        that.eventType = res.data.catalogue.eventType;
        that.statusFlag = res.data.catalogue.statusFlag;
        that.dataStatus = res.data.catalogue.dataStatus;
        that.deptId = res.data.catalogue.deptId;
        that.eventId = res.data.catalogue.id;
        that.latitude = res.data.catalogue.latitude;
        that.longitude = res.data.catalogue.longitude;
        that.eventName = res.data.catalogue.eventName;
        that.version = res.data.catalogue.version;
        that.eventTypeXl = res.data.catalogue.eventTypeXl;
        that.isExamine = res.data.catalogue.isExamine;
        let markersMap = {
          lng: 124.59,
          lat: 43.02,
          icon: "marker",
          bindPopupHtml: "",
          click: "",
          parameter: "",
          keepBindPopup: false,
          isAggregation: true,
          radius: 0,
        };
        if (
          res.data.catalogue.eventStatusValue == "forest_event_status_1" &&
          res.data.catalogue.urgeCount == 0
        ) {
          markersMap.icon = "sj-icon-map-xinshangbao";
        }
        if (
          res.data.catalogue.eventStatusValue == "forest_event_status_1" &&
          res.data.catalogue.urgeCount > 0
        ) {
          markersMap.icon = "sj-icon-map-cuiban";
        } else if (
          res.data.catalogue.eventStatusValue == "forest_event_status_2"
        ) {
          markersMap.icon = "sj-icon-map-qianshou";
        } else if (
          res.data.catalogue.eventStatusValue == "forest_event_status_5"
        ) {
          markersMap.icon = "sj-icon-map-banjie";
        } else if (
          res.data.catalogue.eventStatusValue == "forest_event_status_6"
        ) {
          markersMap.icon = "sj-icon-map-guidang";
        } else if (
          res.data.catalogue.eventStatusValue == "forest_event_status_7"
        ) {
          markersMap.icon = "sj-icon-map-queren";
        }
        markersMap.lng = res.data.catalogue.longitude;
        markersMap.lat = res.data.catalogue.latitude;
        if (
          res.data.eventdetail != null &&
          res.data.eventdetail.length > 0 &&
          res.data.eventdetail[0].fireRadius != null &&
          res.data.eventdetail[0].fireRadius != "" &&
          res.data.eventdetail[0].fireRadius > 0
        ) {
          markersMap.radius = res.data.eventdetail[0].fireRadius;
        }

        markersMapList.push(markersMap);
        if (res.data.centermonitorTCamera != null) {
          that.cameraCode = res.data.centermonitorTCamera.id;
          if(res.data.centermonitorTCamera.longitude != null && res.data.centermonitorTCamera.latitude != null){
            that.centermonitorTCamera = res.data.centermonitorTCamera;
            let markersMap = {
              lng: 124.59,
              lat: 43.02,
              icon: "camera",
              bindPopupHtml: "",
              click: "preview",
              parameter: {
                code: res.data.centermonitorTCamera.cameraCode,
                type: res.data.centermonitorTCamera.cameraFactory,
                name: res.data.centermonitorTCamera.cameraName,
              },
              keepBindPopup: false,
              isAggregation: true,
              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;
            markersMapList.push(markersMap);
          }
        }
        setTimeout(() => {
          that.$refs.supermapDialog1.clearM(false);
          that.$refs.supermapDialog1.clearM(true);
          that.$refs.supermapDialog1.setMarkersRadius(markersMapList);
          that.$refs.supermapDialog1.dropLocation10(
            res.data.catalogue.latitude,
            res.data.catalogue.longitude
          );
        }, 2000);
      });
    },
    refreshEventDialog(eventCode) {
      //刷新--事件日志12
      getEventDetail({
        eventCode: eventCode
      }).then(res => {
        this.eventLogList = res.data.eventlog
        this.visuForestCloudYuAnBo = res.data.visuForestCloudYuAnBo //应急预案
      })
    },
    regionalFlagAdd: function() { //火灾区域
      this.regionalFlagObj.array = []
      this.regionalFlagOpen = true
    },
    showAreaLatLng: function(latlng) { //获取火灾区域经纬度
      this.regionalFlagObj.array = latlng
      this.$modal.msgSuccess('获取坐标成功！')
    },
    /** ----------------------------------摄像头预览开始------------------------------------- */
    alertLogin: function() {
      this.$modal.msg('登录中....')
    },
    alertLoginSuccess: function() {
      this.$modal.msgSuccess('登录成功！')
    },
    alertLoginFailed: function() {
      this.$modal.msgError('登陆失败！')
    },
    alertReinstall: function() {
      this.$modal.msgWarning('请重新安装客户端')
    },
    cancelEventLocationShow() {
      if (this.oWebControl != null) {
        this.oWebControl.JS_HideWnd() // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
        this.oWebControl.JS_Disconnect().then(function() { // 断开与插件服务连接成功
          },
          function() { // 断开与插件服务连接失败
          })
      }
    },
    /** 预览按钮操作 */
    preview(cameraParam) {
      if (cameraParam.type == '1') {
        this.showTVWall(cameraParam.code, cameraParam.name)
        // 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: 0
        //       })
        //       this.ws.on('loginState', (res) => {
        //         this.isLogin = res
        //         console.log('---res-----', res)
        //         if (res) {
        //           this.alertLoginSuccess()
        //           this.activePanel = 'key2'
        //           this.realTimeVideoDialog(cameraParam.code)
        //         } else {
        //           this.alertLoginFailed()
        //         }
        //       })
        //     } else { // 连接客户端失败
        //       this.alertReinstall()
        //     }
        //   })
        // })
      } else if (cameraParam.type == '0') {
        let that = this
        that.cameraVisible = true
        getHaiKangVideoServer({
          cameraCode: cameraParam.code
        }).then(newResponse => {
          that.cameraTitle = '摄像头-' + newResponse.data.cameraName
          that.initPlugin(newResponse.data.appkey, newResponse.data.loginIp, newResponse.data.secret, newResponse
            .data.loginPort)
          setTimeout(function() {
            that.playhk(newResponse.data.channelCode)
          }, 5000)
        })
      }

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


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

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

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

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

        that.oWebControl.JS_RequestInterface({
          funcName: 'init',
          argument: JSON.stringify({
            appkey: appkey, //API网关提供的appkey
            secret: secret, //API网关提供的secret
            ip: ip, //API网关IP地址
            playMode: playMode, //播放模式（决定显示预览还是回放界面）
            port: port, //端口
            snapDir: snapDir, //抓图存储路径
            videoDir: videoDir, //紧急录像或录像剪辑存储路径
            layout: layout, //布局
            enableHTTPS: enableHTTPS, //是否启用HTTPS协议
            encryptedFields: encryptedFields, //加密字段
            showToolbar: showToolbar, //是否显示工具栏
            showSmart: showSmart, //是否显示智能信息
            buttonIDs: buttonIDs //自定义工具条按钮
          })
        }).then(function(oData) {
          that.oWebControl.JS_Resize(1020, 600) // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
        })
      })
    },
    //获取公钥
    getPubKey(callback) {
      let that = this
      that.oWebControl.JS_RequestInterface({
        funcName: 'getRSAPubKey',
        argument: JSON.stringify({
          keyLength: 1024
        })
      }).then(function(oData) {
        console.log(oData)
        if (oData.responseMsg.data) {
          that.pubKey = oData.responseMsg.data
          callback()
        }
      })
    },
    //RSA加密
    setEncrypt(value) {
      var encrypt = new JSEncrypt()
      encrypt.setPublicKey(this.pubKey)
      return encrypt.encrypt(value)
    },
    /** ----------------------------------视频会议开始------------------------------------- */
    sendMsg() { // 视频会议发送短信
      let reg_user = /^[\u4e00-\u9fa5]{2,4}$/; //2-4个中文字符正则
      let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //11位手机号码正则
      for (let i in this.dutysystemTableData) {
        if (!reg_user.test(this.dutysystemTableData[i].name)) {
          this.$message.error(`请输入正确姓名!`)
          return;
        }
        if (!reg_tel.test(this.dutysystemTableData[i].telphone)) {
          this.$message.error(`请输入正确手机号码!`)
          return;
        }

        if (this.dutysystemTableData[i].id == null || this.dutysystemTableData[i].id == '') {
          this.dutysystemTableData[i].dept = this.dutysystemDeptName;
          this.dutysystemTableData[i].depteventId = this.depteventId;
        }
      }
      const param = {
        centereventTDutySystemList: this.dutysystemTableData,
        eventCode: this.eventCode,
        eventName: this.eventName,
        eventId: this.eventId
      }
      sendMessage(param).then(res => {
        //this.$message.success(res.msg);
        this.dutysystemSelect(this.iconCurrentIndex, this.dutysystemDeptName, this.depteventId);
        this.showMeetingMsgDialog = false;
        this.joinMeeting();
      })
    },
    joinMeeting() {
      this.$message({
        message: '正在启动云会议客户端，请稍候...',
        type: 'success',
      });
      joinConferences(this.eventId, this.eventName + "的会议", Cookies.get("nickName")).then(res => {
        if (res.code == 200) {
          let conferenceID = res.data.info.conferenceID;
          let password = res.data.info.password;
          let nickName = res.data.nickName;
          let nonce = res.data.nonce;
          window.open(
            "cloudlink://welinksoftclient/h5page?page=LoginAndJoinConf&server_url=meeting.huaweicloud.com&port=8443&conf_id=" +
            conferenceID + "&enter_code=" + password + "&name=" + nickName +
            "&open_mic=true&open_camera=false&nonce=" + nonce);
        }
      })
    },
    Meeting() { //弹出发送会议短信弹窗
      let that = this;
      that.$alert(
        "如您已经安装请点击【确定】，如未安装可<a style='text-decoration:underline;color:blue;' href='http://172.18.1.37:15001/CLOUDMeeting_Win.exe'>点击此处</a>进行下载",
        '该功能需要使用云会议客户端', {
          confirmButtonText: '确定',
          dangerouslyUseHTMLString: true,
          callback: action => {
            let param = {
              eventCode: that.eventCode
            }
            centereventtdepteventList(param).then(res => {
              that.depteventList = res.data
              that.showMeetingMsgDialog = true
              that.initDutysystemTableData();
            })
          }
        });
    },
    /** ----------------------------------视频会议结束------------------------------------- */
    /** ----------------------------------海康摄像头预览结束------------------------------------- */
  }
}

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

<style lang="scss">
.sj-map-tool-checkbox-all {
  display: flex;
  align-items: center;
  margin-right: 1rem !important;

  .el-checkbox__input {
    line-height: 0;
  }

  .el-checkbox__label {
    font-size: 14px;
    color: white;
    padding-left: 5px;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #01d1eb;
  }
}
.sj-map-tool-checkbox {
  display: flex;
  .el-checkbox {
    margin-right: 1rem;
    display: flex;
    align-items: center;
    .el-checkbox__input {
      line-height: 0;
    }
  }
  .el-checkbox__label {
    font-size: 14px;
    color: white;
    padding-left: 5px;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #01d1eb;
  }
}
</style>
<style lang="scss" scoped>
@import "@/assets/styles/base.scss";

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

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

button {
  padding: 0.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 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: 0.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: 0.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: 0.5rem 2rem;
  }
}

.sj-map-tool-select {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 1000;
  display: flex;
  height: 30px;
  align-items: center;
}
.sj-map-tool-select-list {
  position: relative;
  padding: 0.3rem 1rem;
  border-radius: 1rem;
  background-color: #fff;
  z-index: 1000;
  background-image: linear-gradient(
      180deg,
      rgba(18, 71, 153, 1),
      rgba(4, 21, 30, 1)
  );
  box-shadow: 0 -0.2rem 0.5rem 0.3rem rgba(13, 192, 219, 0.09) inset;
  display: flex;
  align-items: center;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


</style>