Project_yhfu/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"></div>
        新上报
      </div>
      <div class="btm-left-tip">
        <div class="btm-left-block btm-left-state-c2"></div>
        催办
      </div>
      <div class="btm-left-tip">
        <div class="btm-left-block btm-left-state-c3"></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"></div>
        办结
      </div>
      <div class="btm-left-tip">
        <div class="btm-left-block btm-left-state-c6"></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-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">
        <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="selectTaskDtpts(item.taskId,item.eventCode,'jj')">拒绝
                </el-button>
                <el-button type="primary" @click="selectTaskDtpts(item.taskId,item.eventCode,'lq')">领取
                </el-button>
              </div>
            </div>
          </div>
        </div>
        <el-badge :value="taskCount" slot="reference">
          <el-button size="small" icon="el-icon-bank-card">任务</el-button>
        </el-badge>
      </el-popover>
      <el-popover placement="top" trigger="click">
        <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">{{ item.title }}</div>
                <div class="btm-r-pop-info-list-text">{{ item.content }}</div>
              </div>
            </div>
            <div class="btm-r-pop-info-btm">
              <el-link type="success" @click="selectMessageById(item.id)">标记已读</el-link>
            </div>
          </div>
        </div>
        <el-badge :value="messageCount" slot="reference">
          <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="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}">
              <!--:disabled="item.eventStatus=='未处理' ? false:true"-->
            </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%" append-to-body>
      <TcPlayer ref="TcPlayer" :playVideo="playVideo" :widthHeigt="[100,100]"></TcPlayer>
    </el-dialog>
  </div>
</template>

<script>
import {
  selectTaskBO,
  getEventDetail,
  selectTaskDtpts,
  receiveTask,
  refusedTask,
  selectMessageCount,
  selectMessageList,
  selectMessageById
} from '@/api/forest'
import {
  selectFarmByDeptId,linBanTreeselect,selectBanBylinBanTreesId,userDeptSelect
} from '@/api/vBottomMenu'
import supermapTaskDialog from '@/components/supermap' //超图
import TcPlayer from '@/components/TcPlayer' //视频预览
import Cookies from 'js-cookie'
import { selectConfigKey } from '@/api/system/config'

export default {
  components: {
    supermapTaskDialog,
    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,
      longitude: null,
      latitude: null,
      eventLogList: [], //事件详情日志
      eventDialog: 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, //林斑
      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:'',
      setIntervalWesocketPush: null,
      websockSid: {
        userId: ''
      },
    }
  },
  created() {
  },
  mounted() {
    this.websockSid.userId=Cookies.get("userId")
  },

  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)
    },
    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 message2=data.centertaskTTask
      if (null!=message)
      {
        console.log(message)
        this.messageList.push(message)
        this.messageCount++
      }else if (null!=message2)
      {
        this.taskList.push(message2)
        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')).then(response => {
        this.messageCount = response.data
      })
    },
    /** 获取消息列表 */
    selectMessageList() {
      selectMessageList(Cookies.get('userId')).then(response => {
        this.messageList = response.data
        this.messageCount = response.data.length
      })
      this.initWebSocket('MESSAGE_SOCKET','/messagePush/',this.websockSid.userId)
    },
    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() {
      console.log('关闭任务选择部门')
      this.eventCode = null
      this.deptOptions = []
      this.deptName = []
      this.centerTaskTaskDepts = []
    },
    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: false,
          radius: 0
        }

        if (res.data.catalogue.eventStatusValue == 'forest_event_status_1' && res.data.catalogue
          .urgeCount == 0) {
          markersMap.icon = 'sj-icon-map-xinshangbao'
        }
        if (res.data.catalogue.eventStatusValue == 'forest_event_status_1' && res.data.catalogue
          .urgeCount > 0) {
          markersMap.icon = 'sj-icon-map-cuiban'
        } else if (res.data.catalogue.eventStatusValue == 'forest_event_status_2') {
          markersMap.icon = 'sj-icon-map-qianshou'
        } else if (res.data.catalogue.eventStatusValue == 'forest_event_status_5') {
          markersMap.icon = 'sj-icon-map-banjie'
        } else if (res.data.catalogue.eventStatusValue == 'forest_event_status_6') {
          markersMap.icon = 'sj-icon-map-guidang'
        }
        markersMap.lng = res.data.catalogue.longitude
        markersMap.lat = res.data.catalogue.latitude
        if (res.data.eventdetail != null && res.data.eventdetail.length > 0 && res.data.eventdetail[0]
          .fireRadius != null && res.data.eventdetail[0].fireRadius != '' && res.data.eventdetail[0]
          .fireRadius > 0) {
          markersMap.radius = res.data.eventdetail[0].fireRadius
        }
        setTimeout(() => {
          // that.$refs.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)
      })
    },
    selectTaskList: async function() {
      //获取任务列表
      selectTaskBO().then(res => {
        this.taskList = res.data
        this.taskCount = res.data.length
      })
      this.initWebSocket('TASK_SOCKET','/taskPush/',this.websockSid.userId)
    },
    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)
    },
    choseLayerSwitching(url, isClear) {
      window.choseLayerSwitching(url, isClear)
    },
    choseLayerSwitchingList(urlList) { //选择图层(传递数组)
      window.choseLayerSwitchingList(urlList)
    },
    choseLayerSwitchingList_Data(urlList) { //选择图层(传递数组)
      window.choseLayerSwitchingList_Data(urlList)
    },
    forestban() {
      alert(111)
      window.forestban()
      console.log('林班')
    },
    forestchang() {
      alert(222)
      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 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(-21rem) !important;
    transform: translateX(-21rem) !important;
    transition: all 0.5s ease-in-out !important;

    .btm-legend {
      height: 2rem;
      text-align: center;
      color: $inBlue;
      padding: 0 .5rem;
      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;


      }

      .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-tb;
      }


    }

  }

  .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: .5rem;
      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;

      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;
  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 {
        }
      }
    }

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