visu_supervision/src/components/vBottomMenu.vue

<template>
  <div class="btm-box">
    <img class="light" src="../assets/images/integrated/btm-light.png"/>

    <div class="btm-left" :class="btmTipIndent">
      <div class="btm-left-tip">
        <div class="btm-left-block btm-left-state-c1"><i class="iconfont sj-icon-shangbao"></i></div>
        新上报
      </div>
      <div class="btm-left-tip">
        <div class="btm-left-block btm-left-state-c2"><i class="iconfont sj-icon-cuiban"></i></div>
        催办
      </div>
      <div class="btm-left-tip">
        <div class="btm-left-block btm-left-state-c7"><i class="iconfont sj-icon-queren"></i></div>
        确认
      </div>
      <div class="btm-left-tip">
        <div class="btm-left-block btm-left-state-c3"><i class="iconfont sj-icon-yiqianshou"></i></div>
        已签收
      </div>
      <!-- div class="btm-left-tip">
        <div class="btm-left-block btm-left-state-c4"></div>
        联动
      </div> -->
      <div class="btm-left-tip">
        <div class="btm-left-block btm-left-state-c5"><i class="iconfont sj-icon-banjie"></i></div>
        办结
      </div>
      <div class="btm-left-tip">
        <div class="btm-left-block btm-left-state-c6"><i class="iconfont sj-icon-guidang"></i></div>
        归档
      </div>
      <div class="btm-legend" @click="btmIndent">
        <span>图例</span>
        <i class="el-icon-caret-right" v-if="this.btmTipIndent !== 'btm-tip-to-right'"></i>
        <i class="el-icon-caret-left" v-if="this.btmTipIndent == 'btm-tip-to-right'"></i>
      </div>
    </div>
    <div class="bottom-menu-normal">
      <div v-for="(fastMenu,index) in fastMenu" :key="index" class="btm-m-con">
        <a><i :class="fastMenu.icon" @click.stop="showDialog(fastMenu.click)"></i><a
          @click.stop="showDialog(fastMenu.click)">{{ fastMenu.name }}</a>
          <div v-if="showChild && fastMenu.click == 'layerSwitching'" class="nav-child">
            <el-button type="primary"
                       @click.stop="choseLayerSwitching(null,true)"
                       class="nav-child-btn" plain>矢量图
            </el-button>
            <el-button type="primary"
                       @click.stop="choseLayerSwitching('http://121.36.228.94:8090/iserver/services/map-baishan/rest/maps/baishanyingxiang',true)"
                       class="nav-child-btn" plain>影像图
            </el-button>
            <!-- 	<el-button type="danger" icon="el-icon-close" style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"
                        @click.stop="closeChild"></el-button> -->
          </div>
          <div v-if="showMeasure && fastMenu.click == 'editableLayers'" class="nav-child">
            <el-button type="primary"
                       @click.stop="choseMeasuringDistance"
                       class="nav-child-btn" plain>测距
            </el-button>
            <el-button type="primary"
                       @click.stop="choseMeasuringArea"
                       class="nav-child-btn" plain>测面
            </el-button>
            <el-button type="primary"
                       @click.stop="choseMeasuringClear"
                       class="nav-child-btn" plain>清除
            </el-button>
            <!-- 	<el-button type="danger" icon="el-icon-close" style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"
                        @click.stop="closeChild"></el-button> -->
          </div>
          <!-- 林斑 -->
          <div v-show="showBanChild && fastMenu.click == 'forestban'" class="nav-child">
            <div class="forestban">
              <div class="forestban-con">
                <!--                <el-input-->
                <!--                  placeholder="输入关键字进行过滤"-->
                <!--                  v-model="filterbanText">-->
                <!--                </el-input>-->
                <el-tree :data="deptBanOptionsLiandong" ref="banDept" node-key="id" :check-strictly="true"
                         :filter-node-method="filterbanNode" @node-click="handlebanNodeClick" :accordion="true"
                         empty-text=""
                         :props="defaultProps"></el-tree>
              </div>
              <div class="forestban-right">
                <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="filterban"
                          @change="searchFilterban(filterchang)">
                </el-input>
                <el-checkbox-group v-model="banCheckList_Data">
                  <el-checkbox v-for="(item,index) in filterbanList" :label="item"
                               @change="handleCheckedCitiesChangeBan_Data">
                    {{ item.farmName }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <el-button type="danger" icon="el-icon-close"
                         style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"
                         @click.stop="closeBanChild"></el-button>
            </div>
          </div>
          <!-- 林场 -->
          <div v-show="showChangChild && fastMenu.click == 'forestchang'" class="nav-child">
            <div class="forestban">
              <div class="forestban-con">
                <!--                <el-input-->
                <!--                  placeholder="输入关键字进行过滤"-->
                <!--                  v-model="filterchangText">-->
                <!--                </el-input>-->
                <el-tree :data="deptChangOptionsLiandong" ref="changDept" node-key="id"
                         :check-strictly="true" :filter-node-method="filterchangNode"
                         @node-click="handlechangNodeClick" :accordion="true" empty-text="加载中，请稍候"
                         :props="defaultProps"></el-tree>
              </div>
              <div class="forestban-right">
                <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="filterchang"
                          @change="searchFilterchang(filterchang)">
                </el-input>
                <el-checkbox-group v-model="changCheckList" @change="handleCheckedCitiesChangeChang">
                  <el-checkbox v-for="(item,index) in filterchangList" :label="item.farmAddress">
                    {{ item.farmName }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <el-button type="danger" icon="el-icon-close"
                         style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"
                         @click.stop="closeChangChild"></el-button>
            </div>
          </div>
        </a>

      </div>
    </div>
    <div class="btm-right">
      <el-popover placement="top" trigger="click" :disabled="taskCount==0">
        <div class="btm-r-pop-info">
          <div class="btm-r-pop-info-box" v-for="(item,index) in taskList">
            <div class="btm-r-pop-info-tit">
              <h3>{{ item.taskSourceValue }}</h3>
            </div>
            <div class="btm-r-pop-info-con">
              <div class="btm-r-pop-info-list">
                <div class="btm-r-pop-info-list-name">标题</div>
                <div class="btm-r-pop-info-list-text">{{ item.taskTitle }}</div>
              </div>
              <div class="btm-r-pop-info-list">
                <div class="btm-r-pop-info-list-name">发起人</div>
                <div class="btm-r-pop-info-list-text">{{ item.sendPersonName }}</div>
              </div>
              <div class="btm-r-pop-info-list">
                <div class="btm-r-pop-info-list-name">发起时间</div>
                <div class="btm-r-pop-info-list-text">{{ item.taskSendTime }}</div>
              </div>
              <div class="btm-r-pop-info-list">
                <div class="btm-r-pop-info-list-name">关联事件</div>
                <div class="btm-r-pop-info-list-text">{{ item.eventName }}</div>
              </div>
              <div class="btm-r-pop-info-list">
                <div class="btm-r-pop-info-list-name">催办状态</div>
                <div class="btm-r-pop-info-list-text" style="color: red" v-if="item.isUrged==1">
                  任务催办中，请及时处理！！
                </div>
                <div class="btm-r-pop-info-list-text" v-else>正常</div>
              </div>
            </div>
            <div class="btm-r-pop-info-btm">
              <el-link type="success" @click="showEventDialog( item.eventCode )">查看详情</el-link>
              <div class="btm-r-pop-info-btm-btn">
                <el-button type="danger" @click="refusedTask(item.taskId,item.eventCode)">拒绝
                </el-button>
                <el-button type="primary" @click="receiveTask(item.taskId,item.eventCode)">领取
                </el-button>
              </div>
            </div>
          </div>
        </div>
        <el-badge :value="taskCount" slot="reference" :hidden="taskCount==0">
          <el-button size="small" icon="el-icon-bank-card">任务</el-button>
        </el-badge>
      </el-popover>
      <el-popover placement="top" trigger="click" :disabled="messageCount==0">
        <div class="btm-r-pop-info">
          <div class="btm-r-pop-info-box" v-for="(item,index) in messageList">
            <div class="btm-r-pop-info-con">
              <div class="btm-r-pop-info-list">
                <div class="btm-r-pop-info-list-name">消息时间</div>
                <div class="btm-r-pop-info-list-text">{{ item.createTime }}</div>
              </div>
              <div class="btm-r-pop-info-list">
                <div class="btm-r-pop-info-list-name">标题</div>
                <div class="btm-r-pop-info-list-text">{{ item.title }}</div>
              </div>
              <div class="btm-r-pop-info-list">
                <div class="btm-r-pop-info-list-name">消息类型</div>
                <div class="btm-r-pop-info-list-text" v-if="item.type ==1">部门消息</div>
                <div class="btm-r-pop-info-list-text" v-if="item.type ==2">用户消息</div>
              </div>
              <div class="btm-r-pop-info-list">
                <div class="btm-r-pop-info-list-name">内容</div>
                <div class="btm-r-pop-info-list-text" style="width:85%;">
                  <h4 class="line-h-1 w-100p" v-html="item.content">{{ item.content }}</h4>
                </div>
              </div>
            </div>
            <div class="btm-r-pop-info-btm">
              <el-link type="success" v-if="item.eventCode!=null&&item.type ==1" @click="showEventDialog_message(item.eventCode)">
                查看事件详情
              </el-link>
              <div class="btm-r-pop-info-btm-btn" v-else>
                <el-button type="primary"  @click="selectMessageById(item.id)">标记已读
                </el-button>
              </div>
            </div>
          </div>
        </div>
        <el-badge :value="messageCount" slot="reference" :hidden="messageCount==0">
          <el-button size="small" icon="el-icon-chat-line-round">消息</el-button>
        </el-badge>
      </el-popover>
      <!-- 警报铃 必须放在这,放在别处不好使 -->
      <div class="bell" v-if="eventWarn" @click="updateAlertFalse">
        <div class="dot"></div>
        <div class="pulse"></div>
        <div class="pulse-big"></div>
      </div>
      <!--<el-badge type="primary">-->
      <!--<el-button size="small" icon="el-icon-bell" @click="updateAlertFalse">警报</el-button>-->
      <!--</el-badge>-->
      <el-badge type="warning">
        <el-button size="small" icon="el-icon-refresh-right" @click="refresh">刷新</el-button>
      </el-badge>
    </div>
    <!-- 事件详情弹层 -->
    <el-dialog title="事件详情" :visible.sync="eventDialog" v-if="eventDialog" customClass="customWidth" append-to-body
               @close="cancelEventShow()">
      <div class="dia-event-info">
        <el-row>
          <!-- 左侧 -->
          <el-col :span="18" class="dia-left">
            <div ref="imageTofile" style="height: 75vh;">
              <!-- 应急预案 -->
              <div class="dia-left-top">
                <div class="dia-left-top-tit">应急预案</div>
                <div class="dia-left-top-carousel">
                  <el-carousel height="30px" direction="vertical" :interval="2000">
                    <el-carousel-item v-if="visuForestCloudYuAnBo!=null">
                      <a
                        :href="visuForestCloudYuAnBo.fileUrl">{{ visuForestCloudYuAnBo.reserveName }}</a>
                    </el-carousel-item>
                    <el-carousel-item v-else>
                      <a href="#">未选预案</a>
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </div>
              <!-- 应急预案end -->
              <!-- 地图 -->
              <supermapTaskDialog ref="supermapTaskDialog" style="position: absolute; top:0;left: 0;"
                                  :mapDiv="'taskDialogSuperMap'"
                                  :mapSite="{zoom:12,doubleClickZoom:false,dragging:false,scrollWheelZoom:false}"
                                  :codes="['9fa5']" :isSideBySide="false" :isdynamicPlotting="false"/>
              <!-- 地图end -->
            </div>
          </el-col>
          <!-- 左侧end -->
          <!-- 右侧 -->
          <el-col :span="6" class="dia-right">
            <div class="e-right">
              <div class="forthis1-1">
                <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']"
                                 style="padding-bottom:1rem ;">
                  <div class="i-list-con">
                    <div class="this-con">
                      <div class="z-info-list" style="margin-top: 0;">
                        <el-timeline>
                          <el-timeline-item color="#2bacf7" :timestamp="item.createTime"
                                            placement="top" v-for="(item,index) in eventLogList">
                            <el-card style="width: 40vh">
                              <div class="z-info-list-con">
                                <div class="user-and-time flex-d">
                                  <span>{{ item.createName }}</span>
                                  <span
                                    v-if="eventLogList.length - 1 == index&&address!=null&&address!=''"><i
                                    class="el-icon-location"></i>
																		{{ address }}</span>
                                  <span v-else></span>
                                </div>
                                <div class="z-info">
                                  <div class="this-con-list-info">
                                    {{ item.logContent }}
                                  </div>
                                  <div>
                                    <router-link to="#"
                                                 @click.native="clickFile(itemfile.fileUrl,itemfile.fileName,itemfile.fileType)"
                                                 v-for="(itemfile,indexfile) in item.fileVOs">
                                      <el-image :src="itemfile.fileUrl"
                                                v-if="itemfile.fileType=='image'"
                                                :preview-src-list="assetTypeAnImage(item.fileVOs)"
                                                style="width:3rem; height:3rem;margin: 2px;"
                                                :title="itemfile.fileName">
                                      </el-image>
                                      <img v-else-if="itemfile.fileType=='video'"
                                           style="width:3rem; height:3rem;margin: 2px;"
                                           :src="require('@/assets/fileTypeImage/mp4.png')"
                                           :title="itemfile.fileName">
                                      </img>
                                      <img v-else-if="itemfile.fileType=='word'"
                                           style="width:3rem; height:3rem;margin: 2px;"
                                           :src="require('@/assets/fileTypeImage/word.png')"
                                           :title="itemfile.fileName">
                                      </img>
                                      <img v-else-if="itemfile.fileType=='excel'"
                                           style="width:3rem; height:3rem;margin: 2px;"
                                           :src="require('@/assets/fileTypeImage/excel.png')"
                                           :title="itemfile.fileName">
                                      </img>
                                      <img v-else
                                           style="width:3rem; height:3rem;margin: 2px;"
                                           :src="require('@/assets/fileTypeImage/file.png')"
                                           :title="itemfile.fileName">
                                      </img>
                                    </router-link>
                                  </div>
                                </div>
                              </div>
                            </el-card>
                          </el-timeline-item>
                        </el-timeline>
                      </div>
                    </div>
                  </div>
                </dv-border-box-7>
              </div>
              <!--              <div class="forthis">-->
              <!--                <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">-->
              <!--                  <div class="i-list-con">-->
              <!--                    <div class="this-con h-25 no-padding">-->
              <!--                      <div class="z-info-list" style="margin-top: 0;">-->
              <!--                        <div class="z-info-btm-grp">-->
              <!--                          <div class="z-info-btm-grp-top">-->
              <!--                            <div class="z-info-btm-grp-left">-->
              <!--                              &lt;!&ndash;                                <el-button size="small" icon="el-icon-s-flag">责任制&ndash;&gt;-->
              <!--                              &lt;!&ndash;                                </el-button>&ndash;&gt;-->
              <!--                              <el-button size="small" icon="el-icon-upload" @click="showEventLogUpload()">上传-->
              <!--                              </el-button>-->
              <!--                              <el-button size="small" icon="el-icon-download" @click="toImage()">保存-->
              <!--                              </el-button>-->
              <!--                            </div>-->
              <!--                            <div class="z-info-btm-grp-right">-->
              <!--                              <el-button size="small" icon="el-icon-mic">会议-->
              <!--                              </el-button>-->
              <!--                            </div>-->
              <!--                          </div>-->
              <!--                        </div>-->
              <!--                      </div>-->
              <!--                    </div>-->
              <!--                  </div>-->
              <!--                </dv-border-box-7>-->
              <!--              </div>-->
            </div>

          </el-col>
          <!-- 左侧end -->
        </el-row>
      </div>
    </el-dialog>
    <el-dialog title="事件详情" :visible.sync="eventDialog_message" customClass="customWidth" v-if="eventDialog_message"
               @close="cancelEventShow()">
      <div class="dia-event-info">
        <el-row>
          <!-- 左侧 -->
          <el-col :span="18" class="dia-left">
            <div ref="imageTofile" style="height: 75vh;">
              <!-- 应急预案 -->
              <div class="dia-left-top">
                <div class="dia-left-top-tit">应急预案</div>
                <div class="dia-left-top-carousel">
                  <el-carousel height="30px" direction="vertical" :interval="2000">
                    <el-carousel-item v-if="visuForestCloudYuAnBo!=null">
                      <!-- <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-tooltip placement="top-start" effect="dark" popper-class="tooltipCustoms" :content="visuForestCloudYuAnBo.reserveName"
                                  :visible-arrow="visuForestCloudYuAnBo.reserveName.length>6">
                        <!-- <div slot="content" class="leader-info-container">
                          <div class="leader-info-list-con" v-show="visuForestCloudYuAnBo.reserveName.length>6">
                            <h4>{{ visuForestCloudYuAnBo.reserveName }}</h4>
                          </div>
                        </div> -->
                        <a
                          :href="visuForestCloudYuAnBo.fileUrl">{{
                            visuForestCloudYuAnBo.reserveName | ellipsisFont6
                          }}</a>
                      </el-tooltip>
                    </el-carousel-item>
                    <el-carousel-item v-else>
                      <a href="#">暂未关联预案</a>
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </div>
              <!-- 应急预案end -->
              <!-- 地图 -->
              <supermapDialogMessage ref="supermapDialogMessage" style="position: absolute; top:0;left: 0;"
                                     :mapDiv="'messageSuperMap'"
                                     :mapSite="{zoom:12,doubleClickZoom:false,dragging:false,scrollWheelZoom:false}"
                                     :codes="['9fa5']"
                                     :isSideBySide="false" :isdynamicPlotting="true"/>
              <!-- <supermapDialog ref="supermapDialog" -->
              <!-- @preview="preview"/> -->
              <!-- 地图end -->
            </div>
          </el-col>
          <!-- 左侧end -->
          <!-- 右侧 -->
          <el-col :span="6" class="dia-right">
            <div class="e-right">
              <div class="forthis1">
                <dv-border-box-7 backgroundColor="#040b1f" 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)"
                                                :z-index="10000"
                                                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">
                  <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-input">
                            <el-input type="textarea" v-model="eventLog" :autosize="{ minRows: 9, maxRows: 9}"
                                      placeholder="请输入反馈信息" maxlength="500">
                            </el-input>
                            <div class="z-info-btm-input-btn" v-if="eventStatusValue=='forest_event_status_1'">
                              <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'">
                              <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'">
                              <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" v-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>
    <el-dialog :title="eventConfirmTitle" :visible.sync="showEventConfirm" v-if="showEventConfirm" width="50%"
               style="top: 50px" @close="cancelEventConfirm()">
      <el-form label-width="80px">
        <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 class="sj-upload" ref="ImageUpload" :limit="10" :fileType="['jpg', 'png','jpeg']" :value="uploadAttachList"
                       @input="getUrl"></ImageUpload>
        </el-form-item>
        <el-button class="sj-icon-btn" icon="el-icon-check" size="mini" type="primary" v-if="eventStatusButton=='sh'"
                   @click="updateCentereventTEventcatalogueStatus('shtg',true)">通过
        </el-button>
        <el-button class="sj-icon-btn" icon="el-icon-circle-close" size="mini" type="primary" v-if="eventStatusButton=='sh'"
                   @click="updateCentereventTEventcatalogueStatus('shbtg',true)">不通过
        </el-button>
      </el-form>
    </el-dialog>
    <!-- 任务选择领取部门弹层 -->
    <!--<el-dialog title="选择部门" :visible.sync="showDeptConfirm" v-if="showDeptConfirm" width="30%" append-to-body-->
    <!--@close="cancelEventConfirm()">-->
    <!--<el-form label-width="80px">-->
    <!--<el-form-item label="选择部门">-->
    <!--<el-select v-model="deptName" multiple placeholder="请选择部门" class="m-r-1rem" @change="setValue">-->
    <!--<el-option v-for="item in deptOptions" :key="item.taskDeptId" :label="item.taskDeptName"-->
    <!--:value="{value:item.taskDeptId,label:item.taskDeptName}">-->
    <!--&lt;!&ndash;:disabled="item.eventStatus=='未处理' ? false:true"&ndash;&gt;-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--</el-form-item>-->
    <!--<el-button size="mini" type="primary" v-if="taskStatusButton=='lq'"-->
    <!--@click="receiveTask(taskId,eventCode)">领取-->
    <!--</el-button>-->
    <!--<el-button size="mini" type="primary" v-if="taskStatusButton=='jj'"-->
    <!--@click="refusedTask(taskId,eventCode)">拒绝-->
    <!--</el-button>-->
    <!--</el-form>-->
    <!--</el-dialog>-->
    <!-- 图片，视频预览 -->
    <el-dialog title="视频预览" :visible.sync="showTcPlayer" width="40%">
      <TcPlayer ref="TcPlayer" :playVideo="playVideo" :widthHeigt="[100,100]"></TcPlayer>
    </el-dialog>
  </div>
</template>

<script>
import {
  selectTaskBO,
  getEventDetail,
  selectTaskDtpts,
  receiveTask,
  refusedTask,
  selectMessageCount,
  selectMessageList,
  selectMessageById,
  listSJfl,
  listYuAn,
  selectByeventCode,
  sendTask,
  eventExamine,
  eventHandling, sendEventLog
} from '@/api/forest'
import {
  selectFarmByDeptId, linBanTreeselect, selectBanBylinBanTreesId, userDeptSelect
} from '@/api/vBottomMenu'
import supermapTaskDialog from '@/components/supermap' //超图
import supermapDialogMessage from '@/components/supermap' //超图
import TcPlayer from '@/components/TcPlayer' //视频预览
import Cookies from 'js-cookie'
import {selectConfigKey} from "@/api/system/config";
import {getIconBg} from "@/api/components/sookaMapIcon";
import {treeselectAll as deptTreeselect} from "@/api/system/dept";

export default {
  components: {
    supermapTaskDialog,
    supermapDialogMessage,
    TcPlayer,
  },
  watch: {
    filterbanText(val) {
      console.log(this.$refs)
      this.$refs.banDept.filter(val)
    },
    filterchangText(val) {
      console.log(this.$refs)
      this.$refs.changDept.filter(val)
    }
  },
  data() {
    return {
      playVideo: '', //视频预览地址
      showTcPlayer: false, //视频预览弹窗
      filterbanText: '',
      filterchangText: '',
      filterbanList: [],
      filterbanListAll: [],
      filterchangList: [],
      filterchangListAll: [],
      eventId: null,
      eventCode: null,
      eventName: null,
      eventLog: null,
      longitude: null,
      latitude: null,
      eventLogList: [], //事件详情日志
      eventDialog: false, //事件详情弹层
      eventDialog_message: false, //事件详情弹层_消息
      taskStatusButton: null, //任务按钮
      visuForestCloudYuAnBo: null,
      address: null, //事件上报地址

      taskId: null, //任务ID
      showDeptConfirm: false, //任务领取选择部门弹窗
      deptOptions: [], //任务领取部门列表
      centerTaskTaskDepts: [], //任务领取部门
      deptName: [], //任务领取部门

      taskCount: 0, //任务数量
      taskList: 0, //任务列表

      btmTipIndent: '', //图例收起弹出
      eventLocationVisible: false,
      showChild: false,
      showBanChild: false, //林斑
      showMeasure: false, //测量工具
      showChangChild: false, //林场
      fastMenu: [
        {
          name: '事件定位',
          icon: 'iconfont sj-icon-sjdw',
          click: 'eventLocation'
        },
        // {
        //   name: '图层切换',
        //   icon: 'iconfont sj-icon-tcqh',
        //   click: 'layerSwitching'
        // },
        {
          name: '测量工具',
          icon: 'iconfont sj-icon-clgj',
          click: 'editableLayers'
        },
        // {
        //   name: '林班',
        //   icon: 'iconfont sj-icon-lbzy',
        //   click: 'forestban'
        // },
        //
        // {
        //   name: '林场',
        //   icon: 'iconfont sj-icon-lczy',
        //   click: 'forestchang'
        // },
        {
          name: '电视墙',
          icon: 'el-icon-s-grid',
          click: 'TVWall'
        },
        // {
        //   name: '无人机',
        //   icon: 'iconfont sj-icon-landing',
        //   click: 'wrj'
        // }
      ],
      deptChangOptionsLiandong: [],//查询林场部门树结构
      deptBanOptionsLiandong: [],//查询林班层级树结构
      // deptOptionsLiandong_baishan: [
      //   {
      //     label: '板石头国有林场',
      //     id: 1,
      //     children: [
      //     ]
      //   }, {
      //     label: '五间房国有林场',
      //     id: 2,
      //     children: []
      //   }, {
      //     label: '三道沟国有林场',
      //     id: 3,
      //     children: []
      //   }, {
      //     label: '大镜沟国有林场',
      //     id: 4,
      //     children: []
      //   }, {
      //     label: '实验国有林场',
      //     id: 5,
      //     children: []
      //   }
      // ],

      defaultProps: {
        children: 'children',
        label: 'label'
      },
      banCheckList: [], //林班
      banCheckList_Data: [], //林班  带数据图层
      changCheckList: [], //林场
      filterban: '', //林班搜索
      filterchang: '', //林场搜索
      btmCurrent: '',

      eventWarn: false, //webSocket事件问题警报标记

      messageCount: 0, //消息数量
      messageList: 0,//消息列表

      websock: '',
      wsurl: '',
      postName: '',
      postNameDept: '/messageDeptPush/',
      setIntervalWesocketPush: null,
      websockSid: {
        userId: '',
        deptId: ''
      },
      /** *****************事件流程***************************/
      showEventConfirm: false, //事件签收弹窗
      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: [], //审核图片集合
      /** *****************事件流程***************************/
      weosocket: false,
    }
  },
  created() {
  },
  mounted() {
    this.websockSid.userId = Cookies.get("userId")
    this.websockSid.deptId = Cookies.get("deptId")
  },
  destroyed() { //离开页面关闭Socket连接
    if (this.websock) {
      clearInterval(this.setIntervalWesocketPush)
      this.websock.close()
      this.weosocket = false
      this.websock = null
    }
  },

  methods: {
    deptTreeselect() {
      /** 查询林场部门树结构 */
      userDeptSelect().then(response => {
        this.deptChangOptionsLiandong = response.data
      })
    },
    initWebSocket(wsurl, postName, userId) {
      this.postName = postName
      this.wsurl = wsurl
      selectConfigKey(wsurl).then(res => {
        //初始化weosocket
        //const wsuri = 'ws://127.0.0.1:10003/eventPush/' + userId + '/' + eventTypeDl + '/' + eventType
        const wsuri = res.data + postName + userId
        // const wsuri = 'ws://172.28.20.82:10012/taskPush/'+userId
        this.websock = new WebSocket(wsuri)
        //console.log('建立websocket连接' + wsuri)
        this.websock.onopen = this.websocketonopen
        this.websock.onmessage = this.websocketonmessage
        this.websock.onerror = this.websocketonerror
      })
    },

    websocketonopen() { //连接建立之后执行send方法发送数据
      console.log('websocket连接成功')
      this.weosocket = true
      this.sendPing()
    },
    websocketonerror() { //连接建立失败重连
      this.initWebSocket(this.wsurl, this.postName, this.websockSid.userId)
      this.initWebSocket(this.wsurl, this.postNameDept, this.websockSid.deptId)
    },
    websocketonmessage(e) { //数据接收
      console.log('接收数据', e.data)
      // let data = "{\"fromId\":\"farming\"}";
      // 处理收到的消息
      this.handleWebSoceketEvent(e.data)
    },
    handleWebSoceketEvent(val) {
      let that = this
      let data = JSON.parse(val)
      console.log('数据数据数据数据', data)
      /**
       * that.markersList.filter( item => data.eventCode == item.parameter).length == 0 如果地图中不存在当前事件则添加
       * eventPush: 事件列表消息
       * */
      let message = data.centermessageTPushrecord
      let message_dept = data.centermessageTPushrecord_dept
      let task = data.centertaskTTask
      if (null != message) {
        console.log('消息排序',message)
        this.messageList.unshift(message)
        this.messageCount++
      }if (null != message_dept) {
        console.log(message_dept)
        this.messageList.unshift(message_dept)
        this.messageCount++
      } else if (null != task) {
        task.taskId = task.id
        this.taskList.unshift(task)
        this.taskCount++
      }


      // if (data.tag == "eventPush" && that.markersList.filter( item => data.eventCode == item.parameter).length == 0) {
      //   getEventPush({eventCode: data.eventCode}).then((res) => {
      //     if (res.data != undefined) {
      //       //插入到第一条
      //       this.eventList.unshift(res.data)
      //       // 插入后删除最后一条 保证列表中为10条数据
      //       if (this.eventList.length > 9)
      //         this.eventList.splice(10, 1)
      //       // 将收到的数据在地图上添加
      //       this.getWebSocketEvent(res.data)
      //     }
      //   })
      // }

      console.log(data)
    },


    websocketsend(Data) { //数据发送
      this.websock.send(Data)
    },
    websocketclose(e) { //关闭
      console.log('断开连接', e)
      // clearInterval(this.setIntervalWesocketPush)
      this.weosocket = false
    },
    /**发送心跳
     * @param {number} time 心跳间隔毫秒 默认5000
     * @param {string} ping 心跳名称 默认字符串ping
     */
    sendPing(time = 60000, ping = {
      'fromId': 'farming'
    }) {
      clearInterval(this.setIntervalWesocketPush)
      this.setIntervalWesocketPush = setInterval(() => {
        if (this.weosocket) {
          this.websock.send(JSON.stringify(ping))
        } else {
          // this.initWebSocket()
        }
      }, time)
    },
    linBanTreeselect() {
      /** 查询林班层级树结构 */
      linBanTreeselect().then(response => {
        this.deptBanOptionsLiandong = response.data
      })
    },
    selectMessageById(id) {
      selectMessageById(id).then(response => {
        /** 获取消息列表 */
        this.selectMessageList()
      })
    },
    /** 获取消息个数 */
    selectMessageCount() {
      selectMessageCount(Cookies.get('userId'),Cookies.get('deptId')).then(response => {
        this.messageCount = response.data
      })
    },
    /** 获取消息列表 */
    selectMessageList() {
      selectMessageList(Cookies.get('userId'), Cookies.get('deptId')).then(response => {
        this.messageList = response.data
        this.messageCount = response.data.length
      })
      this.initWebSocket('MESSAGE_SOCKET', '/messagePush/', this.websockSid.userId)
      this.initWebSocket('MESSAGE_SOCKET', '/messageDeptPush/', this.websockSid.deptId)

    },
    filterbanNode(value, data) {
      //树搜索
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    filterchangNode(value, data) {
      //树搜索
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handlechangNodeClick(node, data, value) {
      //获取林场列表
      this.filterchang = ''
      selectFarmByDeptId({
        deptId: node.id
      }).then(res => {
        this.filterchangList = res.data
        this.filterchangListAll = res.data
      })
    },
    handlebanNodeClick(node, data, value) {
      //获取林班列表
      this.filterban = ''
      selectBanBylinBanTreesId(node.id).then(res => {
        this.filterbanList = res.data
        this.filterbanListAll = res.data
      })
      // if(node.id==1){
      //   this.filterbanList=[
      //     {
      //       farmAddress: 'http://121.36.228.94:8090/iserver/services/map-baishan/rest/maps/BanShiTouGuoYouLinChang',
      //       farmName: '板石街道',
      //       datasetNames: ['bs:banshijiedao'],
      //       name: 'banshijiedao@bs'
      //     },
      //     {
      //       farmAddress: 'http://121.36.228.94:8090/iserver/services/map-baishan/rest/maps/BanShiTouGuoYouLinChang',
      //       farmName: '河口街道',
      //       datasetNames: ['bs:hekoujiedao'],
      //       name: 'hekoujiedao@bs'
      //     },
      //     {
      //       farmAddress: 'http://121.36.228.94:8090/iserver/services/map-baishan/rest/maps/BanShiTouGuoYouLinChang',
      //       farmName: '七道江镇',
      //       datasetNames: ['bs:qidaojiangzhen'],
      //       name: 'qidaojiangzhen@bs'
      //     },
      //   ]
      // }else if (node.id==2){
      //   this.filterbanList=[
      //     {
      //       farmAddress: 'http://121.36.228.94:8090/iserver/services/map-baishan/rest/maps/WuJianFangGuoYouLinChang',
      //       farmName: '六道江镇',
      //       datasetNames: ['bs:WuJianFangGuoYouLinChang'],
      //       name: 'WuJianFangGuoYouLinChang@bs'
      //     },
      //   ]
      // }else if (node.id==3){
      //   this.filterbanList=[
      //     {
      //       farmAddress: 'http://121.36.228.94:8090/iserver/services/map-baishan/rest/maps/SanDaoGouGuoYouLinChang',
      //       farmName: '三道沟镇',
      //       datasetNames: ['bs:SanDaoGouGuoYouLinChang'],
      //       name: 'SanDaoGouGuoYouLinChang@bs'
      //     },
      //   ]
      // }else if (node.id==4){
      //   this.filterbanList=[
      //     {
      //       farmAddress: 'http://121.36.228.94:8090/iserver/services/map-baishan/rest/maps/DaJingGouGuoYouLinChang',
      //       farmName: '红土崖镇',
      //       datasetNames: ['bs:DaJingGouGuoYouLinChang'],
      //       name: 'DaJingGouGuoYouLinChang@bs'
      //     },
      //   ]
      // }else if (node.id==5){
      //   this.filterbanList=[
      //     {
      //       farmAddress: 'http://121.36.228.94:8090/iserver/services/map-baishan/rest/maps/ShiYanGuoYouLinChang',
      //       farmName: '大阳岔镇',
      //       datasetNames: ['bs:ShiYanGuoYouLinChang'],
      //       name: 'ShiYanGuoYouLinChang@bs'
      //     }
      //   ]
      // }
    },
    // 返回图片列表
    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.centerTaskTaskDepts = []
      //签收选择部门
      if (event != null && event.length > 0) {
        for (let i = 0; i < event.length; i++) {
          if (event[i].label != undefined && event[i].value != undefined) {
            this.centerTaskTaskDepts.push({
              taskDeptId: event[i].value,
              taskDeptName: event[i].label
            })
          }
        }
      }
    },
    receiveTask(taskId, eventCode) {
      let param = {
        taskId: taskId,
        eventCode: eventCode,
        // centerTaskTaskDepts: this.centerTaskTaskDepts
      }
      receiveTask(param).then(res => {
        //任务领取
        if (res.code == 200) {
          this.$message.success(`任务领取成功!`)
          this.deptOptions = []
          this.deptName = []
          this.centerTaskTaskDepts = []
          //刷新任务列表
          this.selectTaskList()
          this.showDeptConfirm = false
        }
      })
    },
    refusedTask(taskId, eventCode) {
      let param = {
        taskId: taskId,
        eventCode: eventCode,
        // centerTaskTaskDepts: this.centerTaskTaskDepts
      }
      refusedTask(param).then(res => {
        //任务拒绝
        if (res.code == 200) {
          this.$message.success(`任务拒绝成功!`)
          this.deptOptions = []
          this.deptName = []
          this.centerTaskTaskDepts = []
          //刷新任务列表
          this.selectTaskList()
          this.showDeptConfirm = false
        }
      })
    },
    selectTaskDtpts(taskId, eventCode, state) {
      this.taskId = taskId
      this.eventCode = eventCode
      selectTaskDtpts({
        taskId: taskId
      }).then(res => {
        //任务领取部门列表
        if (res.code == 200) {
          this.deptOptions = res.data
          this.taskStatusButton = state
          this.showDeptConfirm = true
        }
      })
    },
    cancelEventShow() {
      console.log('关闭事件弹窗')
      this.eventCode = null
      this.eventLogList = []
    },
    cancelEventConfirm() {
      //关闭事件签收弹窗
      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.eventStatusButton = null //流程按钮标识
      this.eventConfirmTitle = null //流程按钮标识
      this.resourcesListCheck = []
      this.userFeginList = [] //联系人列表
      this.eventDescription = null//审核意见
      this.uploadAttachList = [] //审核上传图片回显集合
      this.attachExamine = [] //审核图片集合
    },
    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 = [] //联系人列表
      this.eventDescription = null //审核意见
      this.uploadAttachList = [] //审核上传图片回显集合
      this.attachExamine = [] //审核图片集合
    },
    showEventDialog(eventCode) {
      this.eventCode = eventCode
      let that = this
      //获取事件详情
      getEventDetail({
        eventCode: eventCode
      }).then(res => {
        this.eventDialog = true
        this.eventLogList = res.data.eventlog
        this.visuForestCloudYuAnBo = res.data.visuForestCloudYuAnBo //应急预案
        this.address = res.data.catalogue.address
        this.eventType = res.data.catalogue.eventType
        this.eventId = res.data.catalogue.id
        this.longitude = res.data.catalogue.longitude
        this.latitude = res.data.catalogue.latitude
        let markersMap = {
          lng: 124.59,
          lat: 43.02,
          icon: 'marker',
          bindPopupHtml: '',
          click: '',
          parameter: '',
          keepBindPopup: false,
          isAggregation: 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
        }
        setTimeout(() => {
          // that.$refs.supermapTaskDialog.dynamicPlotting()//弹出动态绘制窗口，防止截图位置改变
          that.$refs.supermapTaskDialog.clearM(false)
          that.$refs.supermapTaskDialog.setMarkersRadius([markersMap])
          that.$refs.supermapTaskDialog.dropLocation(res.data.catalogue.latitude, res.data
            .catalogue.longitude)
        }, 1000)
      })
    },
    showEventDialog_message(eventCode) {
      this.eventCode = eventCode
      let that = this
      //获取事件详情
      getEventDetail({
        eventCode: eventCode
      }).then(res => {
        let markersMapList = [];
        that.eventDialog_message = 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;
          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.supermapDialogMessage.dynamicPlotting() //弹出动态绘制窗口，防止截图位置改变
          that.$refs.supermapDialogMessage.dropLocation10(res.data.catalogue.latitude, res.data.catalogue.longitude)
          that.$refs.supermapDialogMessage.clearM(false)
          that.$refs.supermapDialogMessage.clearM(true)
          that.$refs.supermapDialogMessage.setMarkersRadius(markersMapList)
        }, 2000)
      })
    },
    getUrl(urlList) {
      this.uploadAttachList = urlList
      this.attachExamine = []
      urlList.forEach(item => {
        var attachPath = {
          attachPath: item.name
        }
        this.attachExamine.push(attachPath)
      });
    },
    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)
        }
      })
    },
    /**
     * eventStatusValue 事件状态
     * isSend 是否办理
     * */
    async updateCentereventTEventcatalogueStatus(eventStatus, isSend) {
      this.eventStatusButton = eventStatus
      let that = this
      if (!isSend) { //事件弹窗
        if (eventStatus == 'sh') { //审核
          that.eventConfirmTitle = '事件审核'
          that.showEventConfirm = true
        }
      } 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.selectMessageList()
              that.cancelEventConfirm_send()
              that.showEventConfirm = false
            } else if (res.code == 304) {
              console.log(that.eventCode)
              this.$message.warning(res.msg)
              this.showEventDialog_message(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 true;
          }
          if (that.attachExamine.length == 0 || that.attachExamine == null) {
            that.$message.error(`请上传审核图片！`)
            return true;
          }
          //事件处理流程--审核不通过
          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.selectMessageList()
              that.cancelEventConfirm_send()
              that.showEventConfirm = false
            } else if (res.code == 304) {
              console.log(that.eventCode)
              this.$message.warning(res.msg)
              this.showEventDialog_message(that.eventCode)
              //获取事件详情
            }
            that.attachExamine = []
            that.uploadAttachList = []
            that.eventDescription = ""
          })
        }
      }
    },
    refreshEvent(eventCode) {
      this.eventCode = eventCode
      let that = this
      //刷新--事件详情
      getEventDetail({
        eventCode: eventCode
      }).then(res => {
        let markersMapList = [];
        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) {
          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.supermapDialogMessage.clearM(false)
          that.$refs.supermapDialogMessage.clearM(true)
          that.$refs.supermapDialogMessage.setMarkersRadius(markersMapList)
          that.$refs.supermapDialogMessage.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 //应急预案
      })
    },
    selectTaskList: async function () {
      //获取任务列表
      selectTaskBO().then(res => {
        this.taskList = res.data
        this.taskCount = res.data.length
      })
      this.initWebSocket('TASK_SOCKET', '/taskPush/', this.websockSid.deptId)
    },
    handleCheckedCitiesChangeBan(value) {
      this.choseLayerSwitchingList(this.banCheckList)
    },
    handleCheckedCitiesChangeBan_Data(value) {
      if (this.banCheckList_Data.length > 1) {
        this.banCheckList_Data.splice(0, 1)
      }
      this.choseLayerSwitchingList_Data(this.banCheckList_Data)
    },
    handleCheckedCitiesChangeChang(value) {
      this.choseLayerSwitchingList(this.changCheckList)
    },
    refresh() {
      window.location.reload()
    },
    showDialog(click) {
      window.showDialog(click)
    },
    // 测量距离
    choseMeasuringDistance() {
      this.$parent.$refs.supermap.choseMeasuringDistance()
    },
    // 测量面积
    choseMeasuringArea() {
      this.$parent.$refs.supermap.choseMeasuringArea()
    },
    // 测量清除
    choseMeasuringClear() {
      this.$parent.$refs.supermap.choseMeasuringAreaAll()
    },
    choseLayerSwitching(url, isClear) {
      window.choseLayerSwitching(url, isClear)
    },
    choseLayerSwitchingList(urlList) { //选择图层(传递数组)
      window.choseLayerSwitchingList(urlList)
    },
    choseLayerSwitchingList_Data(urlList) { //选择图层(传递数组)
      window.choseLayerSwitchingList_Data(urlList)
    },
    forestban() {
      window.forestban()
      console.log('林班')
    },
    forestchang() {
      window.forestchang()
      console.log('林场')
    },
    closeBanChild() {
      this.banCheckList = []
      this.showBanChild = false
    },
    closeChangChild() {
      this.changCheckList = []
      this.showChangChild = false
    },
    //图例收起弹出
    btmIndent() {
      if (this.btmTipIndent == '') {
        this.btmTipIndent = 'btm-tip-to-right'
      } else if (this.btmTipIndent == 'btm-tip-to-right') {
        this.btmTipIndent = ''
      }
    },
    searchFilterchang(filterchang) {
      //林场列表搜索
      let searchFilterchangnew = []
      if (filterchang != null && filterchang != '') {
        for (var i = 0; i < this.filterchangListAll.length; i++) {
          if (this.filterchangListAll[i].farmName.indexOf(filterchang) > -1) {
            searchFilterchangnew.push(this.filterchangListAll[i])
          }
        }
        this.filterchangList = searchFilterchangnew
      } else {
        this.filterchangList = this.filterchangListAll
      }
    },
    searchFilterban(filterban) {
      //林场列表搜索
      let searchFilterbannew = []
      if (filterban != null && filterban != '') {
        for (var i = 0; i < this.filterbanListAll.length; i++) {
          if (this.filterbanListAll[i].farmName.indexOf(filterban) > -1) {
            searchFilterbannew.push(this.filterbanListAll[i])
          }
        }
        this.filterbanList = searchFilterbannew
      } else {
        this.filterbanList = this.filterbanListAll
      }
    },

    //标记警报
    updateAlert() {
      this.eventWarn = true
    },
    updateAlertFalse() {
      this.eventWarn = false
      this.$emit('stopAudio')
    }
  }
}
</script>

<style  lang="scss">
  .tooltipCustoms{
    z-index: 9999 !important;
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
@import '@/assets/styles/base.scss';

.dotClass {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
  margin: -5px;
}

.redClass {
  background-color: red;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
}

.btm-box {
  width: 100%;
  height: auto;
  background: linear-gradient($btmMemu);
  position: absolute;
  z-index: 999;
  bottom: 0;
  height: 2.5rem;
  display: flex;
  align-items: center;


  z-index: 9999;

  .light {
    position: absolute;
    top: -.5rem;
  }

  .btm-left {
    position: absolute;
    font-size: .7rem;
    height: 2rem;
    line-height: 2rem;
    border: 1px $searchBorder;
    border-left: none;
    color: $inBlue;
    display: flex;
    -webkit-transform: translateX(-24rem) !important;
    transform: translateX(-24rem) !important;
    transition: all 0.5s ease-in-out !important;

    .btm-legend {
      height: 2rem;
      text-align: center;
      color: $inBlue;
      padding: 0 .5rem;
      padding-left: 1.2rem;
      cursor: pointer;

    }

    .btm-legend:hover {
      background-color: $tipHover;
      color: $white;
    }

    .btm-left-tip {
      display: flex;
      align-items: center;
      margin: 0 .5rem;

      .btm-left-block {
        width: 1rem;
        height: 1rem;
        margin-right: .3rem;
        border-radius: .2rem;
        i{
          font-size: 10px;
          color: #fff;
          line-height: 1rem;
          display: block;
          margin: auto;
          text-align: center;
        }

      }

      .btm-left-state-c1 {
        background-color: $eventStateColor-xsb;
      }

      .btm-left-state-c2 {
        background-color: $eventStateColor-cb;
      }

      .btm-left-state-c3 {
        background-color: $eventStateColor-yqs;
      }

      .btm-left-state-c4 {
        background-color: $eventStateColor-ld;
      }

      .btm-left-state-c5 {
        background-color: $eventStateColor-bj;
      }

      .btm-left-state-c6 {
        background-color: $eventStateColor-gd;
      }

      .btm-left-state-c7 {
        background-color: $eventStateColor-queren;
      }


    }

  }

  .btm-tip-to-right {
    -webkit-transform: translateX(0) !important;
    transform: translateX(0) !important;
    transition: all 0.5s ease-in-out !important;
  }

  .bottom-menu-normal {
    max-width: 70%;
    padding: 0 3rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 999;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    // background: url(../assets/images/integrated/btm-menu.png) center no-repeat;
    // background-size: cover;

    .btm-m-con {
      position: relative;
      color: $inBlue;
      font-size: .78rem;
      padding: .6rem 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-transform: translateY(0);
      transform: translateY(0);
      transition: all 0.2s ease-in-out;
      cursor: pointer;
      white-space: nowrap;
      >a{
        display: flex;
        justify-content: center;
        align-items: center;
      }

      i {
        font-size: 1rem;
        color: $inBlue;
        text-shadow: 0 0 10px rgba($color: $inBlue, $alpha: .6);
        margin-right: 0.2rem;
      }

      .nav-child {
        text-shadow: none !important;
        position: absolute;
        bottom: 3rem;
        border: 1px solid saddlebrown;
        padding: .5rem;
        -moz-border-radius-topleft: 0;
        -moz-border-radius-bottomright: 0;
        background-color: $barBgc;
        box-shadow: $barShadow;
        border: 1px $barBorder;
        left: 50%;
        transform: translateX(-50%);
        color: $inBlue;

        .nav-child-btn {
          padding: .2rem;
        }

        .forestban {
          display: flex;

          .forestban-con {
            width: 20rem;
            height: 20rem;
            overflow-y: scroll;
            border: 1px solid rgba(51, 70, 127, 0.7);
          }

          .forestban-right {
            width: 10rem;
            height: 20rem;
            overflow-y: scroll;
            padding: 0 1rem;

            .el-checkbox-group {
              display: flex;
              flex-direction: column;

              label {
                padding: .4rem 0;
              }

              .el-checkbox {
                color: $white;
              }
            }
          }
        }

      }
    }

    .btm-m-con:hover,
    .on {
      text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
      -webkit-transform: translateX(0.2rem);
      transform: translateX(0.2rem);
      transition: all 0.2s ease-in-out;

      .nav-child {
        text-shadow: none !important;
      }

      i {
        color: $inBlueHover;
        text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
      }
    }

  }

  .btm-right {
    position: absolute;
    font-size: .7rem;
    height: 2rem;
    display: flex;
    right: 1rem;
    align-items: center;

    .el-badge {
      display: flex !important;
      margin-left: 1.5rem;

      button {
        padding: 0 .3rem;
        height: 1.5rem;
        background-color: #112543;
        color: $inBlue;
        border: 1px $searchBorder;
      }

    }

    .el-badge:hover {
      -webkit-transform: translateX(0.1rem);
      transform: translateX(0.1rem);
      transition: all 0.2s ease-in-out;

      button {
        text-shadow: 0 0 15px rgba($color: $inBlueHover, $alpha: 1.0);
      }

    }
  }

}

.btm-r-pop-info {
  display: flex;
  width: 35rem;
  height: 85vh;
  flex-direction: column;
  max-height: 85vh;
  min-height: fit-content;
  overflow-y: scroll;
  padding: 1rem;

  .btm-r-pop-info-box:hover {
    box-shadow: $shadowListHover;
    color: $inBlue;
    border: 1px $countBorder;
  }

  .btm-r-pop-info-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: $deepBG;
    padding: .5rem;
    border-radius: .5rem;
    color: $inBlue;
    border: 1px $searchBorder;
    margin-bottom: 1rem;

    .btm-r-pop-info-tit {
      display: flex;
      padding: .5rem;

      h3 {
        font-weight: bolder;
      }

    }

    .btm-r-pop-info-con {
      padding: .5rem;
      display: flex;
      flex-direction: column;
      border-top: 1px $searchBorder;
      border-bottom: 1px $searchBorder;

      .btm-r-pop-info-list {
        display: flex;
        padding: .3rem 0;

        .btm-r-pop-info-list-name {
          width: 3.6rem;
          text-align: right;
          margin-right: 1rem;
        }

        .btm-r-pop-info-list-text {
          width: 85%;
        }
      }
    }

    .btm-r-pop-info-btm {
      padding: .5rem;
      display: flex;
      justify-content: space-between;

      .btm-r-pop-info-btm-btn {
        button {
          padding: .5rem;
        }
      }
    }
  }


}

//警铃
.fire-tip {
  text-align: center;
  width: 100%;
  font-size: 44px;
  color: #ff0000;
  text-shadow: 0 0 1px #ffffff;
}

.fire-address {
  text-align: center;
  width: 100%;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 44px;
}

.fire-handle {
  display: block;
  text-align: center;
  background: #00BFF0;
  color: #ffffff;
  border-radius: 20px;
  font-size: 14px;
  width: 80px;
  height: 40px;
  line-height: 40px;
  margin: 24px auto;
  text-decoration: none
}

.fire-handle:hover {
  background: #06a2ca;
}

.bell {
  position: absolute;
  right: 10px;
  bottom: -20px;
  width: 100%;
  height: 320px;
  z-index: 999;
}

.bell canvas {
  display: block;
  position: absolute;
  left: 0;
  top: -9px;
}

/* 保持大小不变的小圆圈  */
.dot {
  position: absolute;
  width: 96px;
  height: 96px;
  left: 160px;
  top: 160px;
  background: url('../assets/images/bell.gif') no-repeat;
  // background: url(.) no-repeat;
  background-size: 100%;
  z-index: 200;
}

/* 产生动画（向外扩散变大）的圆圈  */
.pulse,
.pulse-big {
  position: absolute;
  width: 420px;
  height: 420px;
  border: 2px solid #EF2D02;
  background: rgba(239, 45, 2, 0.8);
  border-radius: 50%;
  z-index: 100;
  opacity: 0;
}

.pulse {
  background: rgba(239, 45, 2, 0.6) !important;
  -webkit-animation: warn 0.9s ease-out;
  -moz-animation: warn 0.9s ease-out;
  animation: warn 0.9s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  box-shadow: 1px 1px 30px #EF2D02;
}

.pulse-big {
  background: rgba(239, 45, 2, 0.6) !important;
  -webkit-animation: warn1 0.9s ease-out;
  -moz-animation: warn1 0.9s ease-out;
  animation: warn1 0.9s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  box-shadow: 1px 1px 30px #EF2D02;
}

@keyframes warn {
  0% {
    -moz-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }

  100% {
    -moz-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes warn1 {
  0% {
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }

  100% {
    -o-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0;
  }
}

</style>