visu_supervision/src/views/forest.vue

<!--可视化公共模板 林业-->
<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <!-- 左侧 -->
      <div class="leftbar" ref="left" style="height: 82%;">
        <!-- 通知公告 -->
        <Notification></Notification>

        <!-- 公司列表 -->
        <div class="third_contain">
          <!-- 三级搜索框 -->
          <el-input v-model="queryParams.enterpriseName" class="thirdInputModel"  placeholder="按企业名称搜索 " style="color:white" @change="enterpriseList">
          </el-input>
          <div style="height: 4%;"></div>
          <div class="sp_sbg">
            <div
              style="width: 100%;height: 9%;display: flex;"
              v-for="(e,index) in companyList"
              :key="index"
             class="sp_sbg_div"
             :class=" deviceBtn == index ? 'on': 'onno'"
            >
              <el-button
                style="width: 100%;"
                :style="deviceBtn == index ? 'color:#38CCEA' : 'color:#fff'"
                :class=" deviceBtn == index ? 'highlightedBtn': 'notHighlightedBtn'"
                @click="getDeviceList(e,index)">
                <el-tooltip :content="e.enterpriseName" placement="top" v-if="(e.enterpriseName!=null||e.enterpriseName!='')&&e.enterpriseName.length>8">
                  <span style="position: relative;left: -18%;">
                  {{ e.enterpriseName.substring(0,8) }}...
                </span>
                </el-tooltip>
                <span style="position: relative;left: -18%;" v-else>
                  {{ e.enterpriseName }}
                </span>
              </el-button>
              <div
                class="thirdDevice_icon thirdHighlightedBtn"
                @click="thirdDeviceHashighLighted(e,index)"
                >
              </div>
            </div>
          </div>
          <!--分页-->
          <div class="paging">
            <el-button type="button" @click="enterpriseList(10,queryParams.pageNum-1)">上一页
            </el-button>
            <span>第{{ queryParams.pageNum }}页</span>
            <el-button type="button" :disabled="nextbutton"
                      @click="enterpriseList(10,queryParams.pageNum+1)">下一页
            </el-button>
          </div>
        </div>
      </div>
      <!-- 地图 -->
      <!--<supermap ref="supermap" style="width: 100%;height: 100vh;" class="indexSupermapClass" :mapDiv="'forestMap'"-->
      <!--:dynamicPlotting="false"-->
      <!--:mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"-->
      <!--@showEventDialog="showEventDialog"></supermap>-->
      <supermap ref="supermap" @previewBefore="previewBefore" :showLayer="true">
      </supermap>
      <div class="sj-layer-switch">
        <div style="position: relative;left:23%; display: flex;">
          <el-popover placement="bottom" v-model="visible_dw" title="定位" trigger="manual" popper-class="sj-layer-pop">
            <span class="tk-close el-icon-close" style="right: 0.5rem;top: 0.5rem;" @click="getLocation(1)"></span>
            <el-button type="primary" size="mini"
                       style="width:100%; float: right;cursor: pointer;padding: 7px 15px;font-size: 12px;border-radius: 3px"
                       @click="lonAndLatQueryCamera">查询附近摄像头
            </el-button>
            <a class="leader-tcqh" slot="reference" @click="getLocation(1)">
              <img src="../assets/images/leader-tcbg7.png"/>
              <p style="color:#fff">定位</p>
            </a>
          </el-popover>
        </div>
      </div>

      <!-- 右侧 -->
      <div class="rightbar rightbar-index" ref="right" style="height: 81%;">
        <div class="right-item1">
          <!-- 天气 -->
          <div class="forthis">
            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)">
              <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
              <div class="i-list-con small-bottom-margin h-18">
                <el-row :gutter="20" v-if="todatWeather">
                  <el-col :span="9">
                    <div class="weather-img">
                      <img v-if="weatherinformationWeather==1" src="../assets/images/integrated/weather/qing-1.png">
                      <img v-if="weatherinformationWeather==2" src="../assets/images/integrated/weather/duoyun-2.png">
                      <img v-if="weatherinformationWeather==3" src="../assets/images/integrated/weather/yin-3.png">
                      <img v-if="weatherinformationWeather==4" src="../assets/images/integrated/weather/zhenyu-4.png">
                      <img v-if="weatherinformationWeather==5"
                        src="../assets/images/integrated/weather/leizhenyu-5.png">
                      <img v-if="weatherinformationWeather==6"
                        src="../assets/images/integrated/weather/leizhenyubingbao-6.png">
                      <img v-if="weatherinformationWeather==7" src="../assets/images/integrated/weather/yujiaxue-7.png">
                      <img v-if="weatherinformationWeather==8" src="../assets/images/integrated/weather/xiaoyu-8.png">
                      <img v-if="weatherinformationWeather==9||weatherinformationWeather==22"
                        src="../assets/images/integrated/weather/zhongyu-9.png">
                      <img v-if="weatherinformationWeather==10||weatherinformationWeather==23"
                        src="../assets/images/integrated/weather/dayu-10.png">
                      <img v-if="weatherinformationWeather==11||weatherinformationWeather==24"
                        src="../assets/images/integrated/weather/baoyu-11.png">
                      <img v-if="weatherinformationWeather==12||weatherinformationWeather==25"
                        src="../assets/images/integrated/weather/dabaoyu-12.png">
                      <img v-if="weatherinformationWeather==13||weatherinformationWeather==26"
                        src="../assets/images/integrated/weather/tedabaoyu-13.png">
                      <img v-if="weatherinformationWeather==14"
                        src="../assets/images/integrated/weather/zhenxue-14.png">
                      <img v-if="weatherinformationWeather==15"
                        src="../assets/images/integrated/weather/xiaoxue-15.png">
                      <img v-if="weatherinformationWeather==16||weatherinformationWeather==27"
                        src="../assets/images/integrated/weather/zhongxue-16.png">
                      <img v-if="weatherinformationWeather==17||weatherinformationWeather==28"
                        src="../assets/images/integrated/weather/daxue-17.png">
                      <img v-if="weatherinformationWeather==18||weatherinformationWeather==29"
                        src="../assets/images/integrated/weather/baoxue-18.png">
                      <img v-if="weatherinformationWeather==19" src="../assets/images/integrated/weather/wu-19.png">
                      <img v-if="weatherinformationWeather==20" src="../assets/images/integrated/weather/dongyu-20.png">
                      <img v-if="weatherinformationWeather==21"
                        src="../assets/images/integrated/weather/shachenbao-21.png">
                      <img v-if="weatherinformationWeather==30" src="../assets/images/integrated/weather/fuchen-30.png">
                      <img v-if="weatherinformationWeather==31"
                        src="../assets/images/integrated/weather/yangsha-31.png">
                      <img v-if="weatherinformationWeather==32"
                        src="../assets/images/integrated/weather/qiangshachenbao-32.png">
                      <span v-if="weatherinformationWeather==1">晴</span>
                      <span v-if="weatherinformationWeather==2">多云</span>
                      <span v-if="weatherinformationWeather==3">阴</span>
                      <span v-if="weatherinformationWeather==4">阵雨</span>
                      <span v-if="weatherinformationWeather==5">雷阵雨</span>
                      <span v-if="weatherinformationWeather==6">雷阵雨伴有冰雹</span>
                      <span v-if="weatherinformationWeather==7">雨夹雪</span>
                      <span v-if="weatherinformationWeather==8">小雨</span>
                      <span v-if="weatherinformationWeather==9">中雨</span>
                      <span v-if="weatherinformationWeather==10">大雨</span>
                      <span v-if="weatherinformationWeather==11">暴雨</span>
                      <span v-if="weatherinformationWeather==12">大暴雨</span>
                      <span v-if="weatherinformationWeather==13">特大暴雨</span>
                      <span v-if="weatherinformationWeather==14">阵雪</span>
                      <span v-if="weatherinformationWeather==15">小雪</span>
                      <span v-if="weatherinformationWeather==16">中雪</span>
                      <span v-if="weatherinformationWeather==17">大雪</span>
                      <span v-if="weatherinformationWeather==18">暴雪</span>
                      <span v-if="weatherinformationWeather==19">雾</span>
                      <span v-if="weatherinformationWeather==20">冻雨</span>
                      <span v-if="weatherinformationWeather==21">沙尘暴</span>
                      <span v-if="weatherinformationWeather==22">小雨—中雨</span>
                      <span v-if="weatherinformationWeather==23">中雨—大雨</span>
                      <span v-if="weatherinformationWeather==24">大雨—暴雨</span>
                      <span v-if="weatherinformationWeather==25">暴雨—大暴雨</span>
                      <span v-if="weatherinformationWeather==26">大暴雨—特大暴雨</span>
                      <span v-if="weatherinformationWeather==27">小雪—中雪</span>
                      <span v-if="weatherinformationWeather==28">中雪—大雪</span>
                      <span v-if="weatherinformationWeather==29">大雪—暴雪</span>
                      <span v-if="weatherinformationWeather==30">浮尘</span>
                      <span v-if="weatherinformationWeather==31">扬沙</span>
                      <span v-if="weatherinformationWeather==32">强沙尘暴</span>
                    </div>
                  </el-col>
                  <el-col :span="15">
                    <div class="weather-info">
                      <ul>
                        <li>风力：{{ weatherinformationPower }}级</li>
                        <li>低温：{{ weatherinformationLow }}℃</li>
                        <li v-if="weatherinformationDirection==1">风向：东风</li>
                        <li v-if="weatherinformationDirection==2">风向：东南风</li>
                        <li v-if="weatherinformationDirection==3">风向：南风</li>
                        <li v-if="weatherinformationDirection==4">风向：西南风</li>
                        <li v-if="weatherinformationDirection==5">风向：西风</li>
                        <li v-if="weatherinformationDirection==6">风向：西北风</li>
                        <li v-if="weatherinformationDirection==7">风向：北风</li>
                        <li v-if="weatherinformationDirection==8">风向：东北风</li>
                        <li>高温：{{ weatherinformationHigh }}℃</li>
                        <li>火险：{{ weatherinformationLevelValue }}
                        </li>
                        <li>湿度：{{ weatherinformationTemperature }}</li>
                      </ul>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="20" v-else>
                  <el-col :span="24">
                    <div class="weather-img">
                      暂无天气信息！
                    </div>
                  </el-col>
                </el-row>
                <div class="firestate" v-if="todatWeather">
                  <div
                    :class="weatherinformationLevel=='forest_weatherinformation_level_1'? 'state-block1 state-on':'state-block1'">
                  </div>
                  <div
                    :class="weatherinformationLevel=='forest_weatherinformation_level_2'? 'state-block2 state-on':'state-block2'">
                  </div>
                  <div
                    :class="weatherinformationLevel=='forest_weatherinformation_level_3'? 'state-block3 state-on':'state-block3'">
                  </div>
                  <div
                    :class="weatherinformationLevel=='forest_weatherinformation_level_4'? 'state-block4 state-on':'state-block4'">
                  </div>
                  <div
                    :class="weatherinformationLevel=='forest_weatherinformation_level_5'? 'state-block5 state-on':'state-block5'">
                  </div>
                </div>
              </div>
            </dv-border-box-13>
          </div>
          <!-- 设备列表 -->
          <div class="container">
            <div class="topBar">设备列表</div>
            <!-- 输入框 -->
            <el-input v-model="input" class="inputModel" placeholder="请输入要查询的设备名称 " clearable style="color:white" @change="search" >
            </el-input>
            <!-- 菜单 -->
            <div class="mainContainer">
              <!-- 列表 -->
              <div class="listItem" v-for="(e,idx) in cameraListSearch" :key="idx" @click="dropLocation(e.latitude, e.longitude, e.cameraCode)">
                  <img class="itemPic"
                    v-bind:src="e.cameraImg == null ? require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png'):e.cameraImg" >
                  <div class="itemArea" >
                      <h4>{{ e.cameraName }}</h4>
                  </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 企业信息列表 -->
        <div class="container1">
          <div class="topBar">企业信息</div>
          <!-- 输入框 -->
          <el-input v-model="regulatoryinformationQueryParams.infoTitle" class="inputModel" placeholder="请输入要查询的企业信息 " clearable style="color:white" @change="search" >
          </el-input>
          <!-- 菜单 -->
          <div class="mainContainer">
            <!-- 列表 -->
            <div class="listItem" v-for="(e,idx) in regulatoryinformation" :key="idx" @click="showCompanyDialog(e)">
                <div class="itemArea">
                    <h4>{{ e.infoTitle }}</h4>
                </div>
            </div>
          </div>
          
        </div>

        <!--分页-->
        <div class="paging comPaging">
          <el-button type="button" @click="getSelectRegulatoryinformationByEnterpriseId(10,regulatoryinformationQueryParams.pageNum-1)">上一页
          </el-button>
          <span style="position: relative;bottom: 10%;">第{{ regulatoryinformationQueryParams.pageNum }}页</span>
          <el-button type="button" :disabled="companyInfoNextbutton"
                    @click="getSelectRegulatoryinformationByEnterpriseId(10,regulatoryinformationQueryParams.pageNum+1)">下一页
          </el-button>
        </div>
      </div>
      <vBottomMenu ref="bottomMenu" @stopAudio="stopAudio"></vBottomMenu>
    </div>
    <audio id="resource" ref="up" :src="audioSrc" controls style="display: none;"></audio>

    <eventLocation ref="eventLocation"></eventLocation>
    <TVWall ref="TVWall"></TVWall>
    <TVWalls ref="TVWalls"></TVWalls>
    <wrj ref="wrj"></wrj>
    <CompanyProjectDialog ref="companyProjectDialog"></CompanyProjectDialog>
    <DeviceDialog
      :localMark="localMark"
      @toTvWall='toTvWall'
      @toTvWall_cgq='toTvWall_cgq'
      @jump='jump'
      ref="deviceDialog"
    />
  </div>
</template>

<script>
  import dateChoose from '@/views/date.vue' //日历
  /** ----------------------------------weosocket开始------------------------------------- */
  import Cookies from 'js-cookie'
  /** ----------------------------------weosocket结束------------------------------------- */

  import {
    getTodayEvents,
    getEventPush,
    getDeptEventCount,
    getWeather,
    getEventList,
    getEventByEventType,
    getEventByReportorOrder,
    getExposureStage,
    selectByMenuId,
    initByCameras,
    enterpriseList,
    enterpriseById,
    selectRegulatoryinformationByEnterpriseId,
    getRegulatoryinformation
  } from '@/api/forest';
  import {
    getMonitorDeviceAndDataList,
    selectDeviceType,
    selectCameraByDeptId,
    getSensorListByDeptId,
    getDlblistBydeptId,
    selectKeyAreaList,
    getRegionalFlag,
    getCamerasByDeptId,
    selectByCameraId,
    selectByDeviceId,
    selectByBroadcastId, selectRecorderByDeptId
  } from "@/api/monitor";
  import {
    getNearEvent
  } from '@/api/event'
  import Notification from '@/components/CloudPic_Notification' //通知
  // import ExceedEvent from '@/components/CloudPic_ExceedEvent' //超期事件
  import EventList from '@/components/CloudPic_EventList' //事件列表
  import ReportRanking from '@/components/CloudPic_ReportRanking' //上报排行
  import supermap from '@/components/supermap-2.5d' //超图
  // import supermapNotProcessed from '@/components/supermap' //超图
  // import supermapProcessed from '@/components/supermap' //超图
  import vheader from '@/components/v-header.vue' //一体化共用头部
  import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
  import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
  import TVWall from '@/components/TVWall.vue' //电视墙弹窗
  import TVWalls from "@/components/TVWalls.vue"; //电视墙弹窗
  import wrj from '@/components/wrj.vue' //无人机
  import eventdetailsdialog from '@/views/eventdetailsdialog.vue' //事件详情弹窗
  import firespread from '@/views/firespread.vue' //事件详情弹窗
  import DeviceDialog from '@/components/DeviceDialog';
  import chart from './from/dvCapsuleChart.vue'
  import {getUserProfile} from "@/api/system/user";
  import CompanyProjectDialog from '@/components/companyProjectDialog'

  /** ----------------------------------摄像头预览开始------------------------------------- */
  import {
    getDahuaVideoServer
  } from '@/api/dahua/dahua'
  import DHWs from '@/dahua/lib/DHWs'
  import Firespread from "./firespread";

  /** ----------------------------------摄像头预览结束------------------------------------- */

  import {
    selectConfigKey
  } from "@/api/system/config";
  let echarts = require('echarts')
  export default {
    components: {
      Firespread,
      chart,
      supermap,
      // supermapNotProcessed,
      // supermapProcessed,
      vheader,
      vBottomMenu,
      eventLocation,
      TVWall,
      TVWalls,
      wrj,
      dateChoose,
      eventdetailsdialog,
      firespread,
      Notification,   // 左侧通知公告栏
      // ExceedEvent,    // 超期事件栏
      EventList,      // 事件列表
      ReportRanking,  // 上报排行
      CompanyProjectDialog,
      DeviceDialog
    },
    created() {
      this.selectByMenuId()
      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
      window.showDialog = this.showDialog
      window.choseLayerSwitching = this.choseLayerSwitching
      window.choseLayerSwitchingList = this.choseLayerSwitchingList
      window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
      const DHWsInstance = DHWs.getInstance();
      this.ws = DHWsInstance;
    },
    mounted() {
      console.log('图层对象',window.webglExampleConfig)
      console.log('媒体对象',navigator)
      // 初始化地图数据
      this.getSuperMapUrl();
      setTimeout(() => {
        this.enterpriseList();
        this.getWeather(this.getCurrentDataStr())
      }, 2000)
      this.bottomMenuList() //获取底部公共组件消息和任务
      setTimeout(() => {
        this.title = '四平市态势感知平台'
      }, 1000)
    },
    data() {
      return {
        canSelectDate:true,//日历点击是否可用
        nextbutton:false,
        //警报MP3文件
        audioSrc: require('@/assets/jingbao.mp3'),
        calendarDay: this.getCurrentDataStr(),
        noticeContent: '', //通知公告
        //左侧获取事件信息统计
        totalStr: '000000',
        totalAllEvent: 0,
        aiTotal: '',
        newReport: '',
        otherTotal: '',
        readyFinish: '',
        readySure: '',
        total: '',
        aiTotalPre: '',
        newReportPre: '',
        otherTotalPre: '',
        readyFinishPre: '',
        readySurePre: '',
        currentPageNum:true,
        //左侧部门事件数量
        forestFarm: [],
        //右侧天气
        todatWeather: false,
        weatherinformationDirection: '',
        weatherinformationHigh: '',
        weatherinformationLevel: '',
        weatherinformationLevelValue: '', //火险登记中文
        weatherinformationLow: '',
        weatherinformationPower: '',
        weatherinformationTemperature: '',
        weatherinformationTime: '',
        weatherinformationWeather: '',
        //右侧曝光台
        exposureStageList: [],
        //右侧事件列表
        eventList: [],
        pageSize: 10,
        pageNum: 1,
        eventTypeIdDl: [],
        eventTypeId: [],
        eventListnew: [],
        eventListAll: [],
        eventSearch: '', //事件列表搜索
        listCurrentIndex1: '',
        // ----------------------------------事件分类柱状----------------------------------------
        eventKind: {},
        showEventKind: false,
        // ----------------------------------上报排行----------------------------------------
        reportList: {
          data: []
        },
        /** ----------------------------------weosocket开始------------------------------------- */
        weosocket: false,
        websock: '',
        setIntervalWesocketPush: null,
        websockSid: {
          userId: '',
          eventTypeDl: '',
          eventType: '',
        },
        /** ----------------------------------weosocket结束------------------------------------- */
        /** ----------------------------------摄像头预览开始------------------------------------- */
        activePanel: 'key1',
        isLogin: false,
        cameraParams: [],
        ws: null,
        /** ----------------------------------摄像头预览结束------------------------------------- */
        markersList: [], //点位列表
        cameraList: [] ,//摄像头列表
        title:'',
        eventDlType:[],
        eventXlType:[],

        /** ----------------------------------定位功能-----------------------------------------*/
        visible_dw: false,
        positioning: {
          lon: "",
          lat: ""
        },
        /** ----------------------------------定位功能-----------------------------------------*/
        thirdInput:'',                // 输入框label(三级)
        cameraMarkersList:[],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          enterpriseName: null
        },
        totalAllCompany:0,
        companyList:[],               // 企业列表
        cameraListSearch:[],
        regulatoryinformation:[],
        deviceBtn:null,

        regulatoryinformationQueryParams: {
          pageNum: 1,
          pageSize: 10,
          infoTitle: null,
          enterpriseId: null,
        },

        companyInfoNextbutton:false
      }
    },
    /** ----------------------------------weosocket开始------------------------------------- */
    metaInfo () {
      return {
        title:this.title,
        meta:[{
          charset: "utf-8"
        },
          {
            name: "viewport",
            content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
          }]
      }
    },
    /** ----------------------------------weosocket结束------------------------------------- */
    methods: {
      // 获取企业信息列表
      getSelectRegulatoryinformationByEnterpriseId(pageSize, pageNum) {
        if (pageNum < 1) {
          this.$modal.msg('当前已是第一页')
          return
        } else if (pageNum > this.totalAllEvent / 10 + 1) {
          this.$modal.msg('当前已是最后一页')
          return
        }
        this.regulatoryinformationQueryParams.pageSize = pageSize
        this.regulatoryinformationQueryParams.pageNum = pageNum

        selectRegulatoryinformationByEnterpriseId(this.regulatoryinformationQueryParams).then(res => {
          if (res.rows !== null && res.rows.length !== 0 && res.rows.length == 10) {
            this.companyInfoNextbutton = false
          } else {
            this.companyInfoNextbutton = true
          }
          this.regulatoryinformation = res.rows
        })
      },
      showCompanyDialog(e){
        getRegulatoryinformation(e.id).then(res => {
            // 处理图片路径
            let attachPaths
            if(res.data.attachPaths){
              attachPaths = res.data.attachPaths.split(",")
            }
            // 处理附件路径
            let fileUrl
            if(res.data.fileUrl){
              fileUrl = res.data.fileUrl.split(",")
              fileUrl.forEach((e,idx) => {
                fileUrl[idx] = e.split("+")
              })
            }
            console.log('fileUrl',fileUrl)
            let detailInfo = {
              title:res.data.infoTitle || '',
              unit:res.data.infoTitle || '',
              content:res.data.infoContent || '',
              attachPaths,
              fileUrl,
              videos:[],
              others:[]
            }
            this.$refs.companyProjectDialog.open(detailInfo)
        })
      },
      /**
       * 企业列表接口
       */
      enterpriseList(pageSize, pageNum=1){
        if (pageNum < 1) {
          this.$modal.msg('当前已是第一页')
          return
        } else if(pageNum > this.totalAllCompany/10+1){
          this.$modal.msg('当前已是最后一页')
          return;
        }
        this.queryParams.pageSize = pageSize;
        this.queryParams.pageNum = pageNum;
        enterpriseList(this.queryParams).then(res => {
          this.companyList = res.rows
          this.totalAllCompany = res.total
        })
      },
      // 查询收藏列表
      getCompanyList(pageSize, pageNum) {
      },
      //三级列表选择（获取列表）
      getDeviceList(e,idx){
        this.deviceBtn=idx
        let that = this;
        enterpriseById(e.id).then(res => {
          that.cameraListSearch = res.data.cameras
          for (let i = 0; i < res.data.cameras.length; i++) {
            let markersMap = {
              lng: 124.59,
              lat: 43.02,
              icon: "camera",
              bindPopupHtml: "",
              click: "previewBefore",
              parameter: "",
              name: i,
              keepBindPopup: false,
              isAggregation: false,
            };
            markersMap.parameter = {
              code: res.data.cameras[i].cameraCode,
              name: res.data.cameras[i].cameraName,
              type: res.data.cameras[i].cameraType
            }

            markersMap.lng = res.data.cameras[i].longitude;
            markersMap.lat = res.data.cameras[i].latitude;
            markersMap.icon = "camera";
            markersMap.click = 'previewBefore'
            markersMap.bindPopupHtml = "";
            that.cameraMarkersList.push(markersMap);
          }
          setTimeout(() => {
            that.$refs.supermap.clearM();
            that.$refs.supermap.setMarkers(that.cameraMarkersList);
          }, 3000);
        })
        that.regulatoryinformationQueryParams = {
          pageNum: 1,
          pageSize: 10,
          infoTitle: null,
          enterpriseId: e.id,
        },
        selectRegulatoryinformationByEnterpriseId(that.regulatoryinformationQueryParams).then(res => {
          that.regulatoryinformation = res.rows
        })
      },
      previewBefore(cameraParam) {
        selectByCameraId(cameraParam.code).then(res => {
          this.$refs.deviceDialog.update(res.data, 'SHE')
        })
        this.$refs.deviceDialog.open(cameraParam)
        return
        this.currentCameraParam = cameraParam
      },
      getLocation(event) {
        this.visible_dw = !this.visible_dw
        if (!this.visible_dw) {
          this.positioning.lon = ''
          this.positioning.lat = ''
          this.$refs.supermap.clearDW()
        }
        this.$refs.supermap.setIsObtainLaAndLon(this.visible_dw)
      },
      lonAndLatQueryCamera() {
        if (this.positioning.lon == '' || this.positioning.lon * 1 < -180 || this.positioning.lon * 1 > 180) {
          this.$message.warning('经度整数部分为大于-180小于180范围,小数部分为0到15位!')
          return
        }
        if (this.positioning.lat == '' || this.positioning.lat * 1 < -90 || this.positioning.lat * 1 > 90) {
          this.$message.warning('纬度整数部分为大于-90小于90范围,小数部分为0到15位!')
          return
        }
        this.$refs.supermap.lonAndLatPlacement(this.positioning.lon, this.positioning.lat)
        const params = Object.assign({})
        params.longitude = this.positioning.lon;
        params.latitude = this.positioning.lat;
        params.type = '21'
        initByCameras(params).then(res => {
          if (res.data != null && res.data.length != 0) {
            this.$refs.TVWall.showTVWall1(this.positioning.lon, this.positioning.lat, res.data);
          } else {
            this.$message.warning('周边无摄像头信息！')
          }
        })
      },
      setPositioning(longitude, latitude) {
        let that = this
        that.positioning.lon = longitude
        that.positioning.lat = latitude
      },
      showDefaultImg(){
        let img = event.srcElement;
        img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF0AAABACAYAAAB4OXuGAAAE2UlEQVR4nO2b2XbaSBCGS2hhByEwCXaSizxArucJ5v1fYG5mJnbGrGIVYlHO30RYYkmM7e4Sk/7O0YVt3JL+Lv1dVS2ML3/8GZFGKTktt3q06Axo0RnQojOgRWdAi86AFp0BLToDWnQGLLmnNLJ5179EbpEuRXTDMKjV+UxG7nofpGA+ofHgm5SxpaiSy5lXLTgolKrSxpajjHGttqIGyZ6+Y+r3aLvdZOF+f0qhWCWnUJJ+HiWiLxdT2qxXKk71Kiw7Tw7JF12njAxkQnRkO6blUM5U8uCxw3qXtlOgcq1JTqG4z+m3mw0F8zHNJgOKttssaPTmsIlerLhUdW+Ofp8zTSpVG5QvVmjU+6p0LUieS+aEs9iLUyifFDyJadnktm6F9agimPm0mPm0Wi6kFUbEFemHgq9XS1EBwtOL5RoZxi4W4PN4IuaToZLriqKIJsNH6edRLjp8HFEcEwZzGvXu9/2OYDamRvvjPsKRO6sSXRXKRUf0JtkJ+tRgQtSHwUx4uvi87ZwbSsK12VRv3pJl2zQbD8QhA/WefmDR0YmOHh5z1aBXtBPcEReJrEoWykXfrNLZSKnipn5GtOWL5afPr0Ml11X3Oj8El49ye1mFC9pu1vtCCDbitu5ouZiQkTOpVGnsF1L60UKQDRZ2FT2XGJbsBQ2wmvd+/zNu+NRNY3Lm05HUaylW6iJDUglLno708FeLFLqSyGpkFimY6Krbljb+Odgq0tm4T+swoHK9Kbp7MVhEl/MJTcd9EemygH/Dx5Pg3CqKMdbeyzKYiQP+bpo2RdFWLJyH2QsWVnj9ehXSdNx7dfRjZwuZSnJ3C2sNxi+W668a+zlkoq2HiD4X1fDc2ALsfFEcfv/+xT0ZRHK92UkVaBjL7z1Qqea98A4uI9P99HLNO/Jc2AIqVoj/EqqNd6n/xVODSVS5s5VZ0SvuzdkCBfbQaN1dbAWlqne04ewPHoStqCSTote8d0dFE1oDKQsyDKo22mJyngPqgUo9PYmTUVf0flSTqa0a+G3N66QqUoB2K7p/WHDdZocsp7D/GybHshwRsecWWMvJp+oCMebUp4XkGuAcmYl00fto3R0JjoZY3G5FpA+7/4o8Pwnyba/9MbU4xuwmKt2XR3RPRvJbuOfIhOg7j/5AzsHiiMoVRxKkk9hgQJ6fBN1Lr/2JnPxTZQuhsRGS3HuFf+Op4IRddAjSaH8QFpBkPPzvp310VLR+/yGV0+NpcW9uRZpJYm14nyq8kKEgU+Hee2X1dERn4+Yu/RZAFJE/+PasRhc+M3z8h+qtWzL3YxgizURmkxRcjNt/yMT7N2yRjsUQEZ4UHBUp+i2XdBax6TF8/JtWYZAe3z5+crD3mQVYREdxgjwbXh4jGlzdrxQuL0/h8NrG6MQCGzOfDM7+jQMW0WuNdqrvgawEoh1G6yXEC+zhwounZur3XzyuDJg8/Sl9g8dC8M0bdRSx+CJDQf6+Xoc0O5iELMAiOiISLV3YwnTUffO+B6pXHFmFRXTYCPz7d0W/tcuAFp0BLToDSjwdbdVr+PqLZf2P3nup1FsqTnM1yLEXhtfirgkposNKrv1bFDLbBlLsBSV59/4v/TX1M0j2dG0zp9ApIwNadAa06Axo0RnQojOgRWdAi86AFp0BLbpqiOg74YbqU8Iw/dEAAAAASUVORK5CYII=";
      },
      //初始化地图数据
      getSuperMapUrl(){
        getUserProfile().then(response => {
          let mapDeptId=response.mapDeptId
          let num = 0;
          if (mapDeptId == "365") {
            num = 0;
          } else if (mapDeptId == "369") {
            num = 1;
          } else if (mapDeptId == "371") {
            num = 2;
          } else if (mapDeptId == "373") {
            num = 3;
          } else if (mapDeptId == "372") {
            num = 4;
          } else if (mapDeptId == "370") {
            num = 5;
          }
          this.$refs.supermap.removeAllviewer(mapDeptId, -1);
        });
      },
      dropLocation(lat, lng, eventCode) {
        this.$refs.supermap.dropLocation(lat, lng)
      },
      getFirespread(eventCode) {
        this.$refs.eventdetailsdialog.showEventDialog(eventCode);
        this.$refs.eventdetailsdialog.fireControlViewList()
      },
      getCurrentDataStr() {
        let date = new Date()
        let y = date.getFullYear()
        let m = date.getMonth() + 1
        m = m < 10 ? '0' + m : m
        let d = date.getDate()
        d = d < 10 ? '0' + d : d
        return y + '-' + m + '-' + d
      },

      fatherMethod(dianshiqiang, longitude, latitude, item) {
        this.$refs.TVWalls.showTVWall(
          dianshiqiang, {
            longitude: longitude,
            latitude: latitude,
          },
          item
        );
      },
      getWeather(day) {
        let that = this
        //右侧获取天气信息
        getWeather({
          day: day
        }).then(res => {
          if (res.code == 200) {
            if (0==res.data.length) {
              this.todatWeather = false
            } else {
              this.todatWeather = true
              this.weatherinformationDirection = res.data[0].weatherinformationDirection
              this.weatherinformationHigh = res.data[0].weatherinformationHigh
              this.weatherinformationLevel = res.data[0].weatherinformationLevel
              this.weatherinformationLevelValue = res.data[0].weatherinformationLevelValue
              this.weatherinformationLow = res.data[0].weatherinformationLow
              this.weatherinformationPower = res.data[0].weatherinformationPower
              this.weatherinformationTemperature = res.data[0].weatherinformationTemperature
              this.weatherinformationTime = res.data[0].weatherinformationTime
              this.weatherinformationWeather = res.data[0].weatherinformationWeather
            }
          } else {
            this.todatWeather = false
          }
        })
      },
      getSupermap(day, loading) {
        let that = this
        getNearEvent('', '', day, loading, that.eventTypeIdDl, that.eventTypeId).then(res => {
          that.markersList = [];
          if (res.data != null && res.data.length > 0) {
            for (let i = 0; i < res.data.length; i++) {
              let markersMap = {
                lng: 124.59,
                lat: 43.02,
                icon: 'marker',
                bindPopupHtml: '',
                click: '',
                parameter: '',
                keepBindPopup: false,
                isAggregation: true
              }
              // if (res.data.length > 200) {
              //   markersMap.isAggregation = true
              // }
              if (res.data[i].eventStatusValue == 'forest_event_status_1' && res.data[i].urgeCount == 0) {
                markersMap.click = 'showEventDialog'
                markersMap.icon = 'sj-icon-map-xinshangbao'
              }
              if (res.data[i].eventStatusValue == 'forest_event_status_1' && res.data[i].urgeCount > 0) {
                markersMap.click = 'showEventDialog'
                markersMap.icon = 'sj-icon-map-cuiban'
              } else if (res.data[i].eventStatusValue == 'forest_event_status_2') {
                markersMap.click = 'showEventDialog'
                markersMap.icon = 'sj-icon-map-qianshou'
                markersMap.isAggregation = false
              } else if (res.data[i].eventStatusValue == 'forest_event_status_5') {
                markersMap.click = 'showEventDialog'
                markersMap.icon = 'sj-icon-map-banjie'
                markersMap.isAggregation = false
              } else if (res.data[i].eventStatusValue == 'forest_event_status_6') {
                markersMap.click = 'showEventDialog'
                markersMap.icon = 'sj-icon-map-guidang'
              } else if (res.data[i].eventStatusValue == 'forest_event_status_7') {
                markersMap.click = 'showEventDialog'
                markersMap.icon = 'sj-icon-map-queren'
              }
              markersMap.parameter = res.data[i].eventCode
              markersMap.lng = res.data[i].longitude
              markersMap.lat = res.data[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                // '<span>' +
                // '                  <div class="d-l-con">' +
                // '                  <div class="d-l-l-text">' +
                // '                  <h4>经纬度：' + res.data[i].longitude + ',' + res.data[i].latitude + '</h4>' +
                // '                </div>' +
                // '                </div>' +
                // '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>事件名称：' + res.data[i].eventName + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>事件时间：' + res.data[i].createTime + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>';
              if (res.data[i].pictureType == 'image' && res.data[i].picturePath != null && res.data[i]
                .picturePath != '') {
                markersMap.bindPopupHtml += '<span>' +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  '<img src="' + res.data[i].picturePath + '" style="width: 150px;height: 100px"/>' +
                  '                </div>' +
                  '                </div>' +
                  '                </span>'
              }
              markersMap.bindPopupHtml += '</div>'
              that.markersList.push(markersMap)
            }
            setTimeout(() => {
              that.$refs.supermap.clearM()
              that.$refs.supermap.setMarkers(that.markersList)
            }, 3000)
          } else {
            setTimeout(() => {
              that.$refs.supermap.clearM()
            }, 3000)
          }
          this.canSelectDate = true
        })
      },

      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
      bottomMenuList() {
        this.$refs.bottomMenu.selectTaskList() //获取任务列表
        this.$refs.bottomMenu.selectMessageList() //获取消息列表
        this.$refs.bottomMenu.linBanTreeselect() //查询林班层级树结构
        this.$refs.bottomMenu.deptTreeselect() //查询林场部门树结构
      },
      showDialog(click) {
        console.log(click)
        if (click == 'eventLocation') {
          this.$refs.eventLocation.showEventLocation()
          this.$refs.supermap.isEditableLayers = false
          this.$refs.bottomMenu.showChild = false
          this.$refs.bottomMenu.showBanChild = false
          this.$refs.bottomMenu.showMeasure = false
          this.$refs.bottomMenu.showChangChild = false
        } else if (click == 'editableLayers') {
          this.$refs.bottomMenu.showChild = false
          this.$refs.bottomMenu.showBanChild = false
          this.$refs.bottomMenu.showChangChild = false
          if (!this.$refs.bottomMenu.showMeasure) {
            this.$refs.bottomMenu.showMeasure = true
          } else {
            this.$refs.bottomMenu.showMeasure = false
          }
        } else if (click == 'layerSwitching') {
          this.$refs.supermap.isEditableLayers = false
          this.$refs.bottomMenu.showBanChild = false
          this.$refs.bottomMenu.showMeasure = false
          this.$refs.bottomMenu.showChangChild = false
          if (!this.$refs.bottomMenu.showChild) {
            this.$refs.bottomMenu.showChild = true
          } else {
            this.$refs.bottomMenu.showChild = false
          }
        } else if (click == 'TVWall') {
          console.log("this.$refs.TVWall=", this.$refs.TVWall)
          this.$refs.TVWall.showTVWall();
          this.$refs.supermap.isEditableLayers = false
          this.$refs.bottomMenu.showChild = false
          this.$refs.bottomMenu.showMeasure = false
          this.$refs.bottomMenu.showBanChild = false
          this.$refs.bottomMenu.showChangChild = false
        } else if (click == 'wrj') {
          this.$refs.wrj.showWrj();
          this.$refs.supermap.isEditableLayers = false
          this.$refs.bottomMenu.showChild = false
          this.$refs.bottomMenu.showBanChild = false
          this.$refs.bottomMenu.showMeasure = false
          this.$refs.bottomMenu.showChangChild = false
        } else if (click == 'forestban') {
          this.$refs.supermap.isEditableLayers = false
          this.$refs.bottomMenu.showChild = false
          this.$refs.bottomMenu.showChangChild = false
          this.$refs.bottomMenu.showMeasure = false
          if (!this.$refs.bottomMenu.showBanChild) {
            this.$refs.bottomMenu.showBanChild = true
          } else {
            this.$refs.bottomMenu.showBanChild = false
          }
        } else if (click == 'forestchang') {
          this.$refs.supermap.isEditableLayers = false
          this.$refs.bottomMenu.showBanChild = false
          this.$refs.bottomMenu.showMeasure = false
          this.$refs.bottomMenu.showChild = false
          if (!this.$refs.bottomMenu.showChangChild) {
            this.$refs.bottomMenu.showChangChild = true
          } else {
            this.$refs.bottomMenu.showChangChild = false
          }
        }
      },
      //选择图层
      choseLayerSwitching(url, isClear) {
        this.$refs.supermap.layerSwitching(url, isClear)
      },
      //选择图层(传递数组)
      choseLayerSwitchingList(urlList) {
        this.$refs.supermap.layerSwitchingList(urlList)
      },
      //选择图层(传递数组)  带数据
      choseLayerSwitchingList_Data(urlList) {
        this.$refs.supermap.layerSwitchingList_Data(urlList)
      },
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
    },
    watch:{
      'regulatoryinformationQueryParams.infoTitle':function(val){
        this.getSelectRegulatoryinformationByEnterpriseId(this.regulatoryinformationQueryParams.pageSize, this.regulatoryinformationQueryParams.pageNum, val)
      },
      'queryParams.enterpriseName':function(val){
        this.enterpriseList(this.queryParams.pageSize, this.queryParams.pageNum, val)
      },
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '@/assets/styles/base.scss';

  .highlightedBtn{
    background: url('~@/assets/images/video-plaza/highLightBtn.png') 0 0 no-repeat; /* 高亮背景 */
    background-size: cover;
  }
  .notHighlightedBtn{
    background: none;
  }

  .third_contain{
    overflow: hidden;
    overflow-y: scroll;
    width: 99%;
    height: 100%;
    padding-left:10px;
    ::v-deep .el-button{
      width: 70px;
      height: 100%;
      margin-left: 0 !important;
      >span{
        display: inline-block;
        width: 100%;
        text-align: center;
      }
      >span >span{
        left: 0 !important;
        display: inline-block;
        width: 100%;
        text-align: center;
      }
    }
    ::v-deep .el-button:not(:nth-child(1)){
    }
    .thirdDevice_icon{
      width: 10%;
      margin: 1.7% 15px 0 2%;
      height: 70%;
      cursor: pointer;
    }
  }

  .paging {
    height: 4%;
    padding: 0rem .3rem;
    display: flex;
    justify-content: center;
    align-content: center;

    span {
      color: #2bacf7;
      display: flex;
      align-items: center;
      padding: 0 1rem;
    }

    button {
      width: 70px;
      padding: 0 0.3rem;
      height: 1.5rem;
      background-color: #112543;
      color: #2bacf7;
      border: 1px solid #33467f;
    }

    button:hover {
      padding: 0 0.3rem;
      height: 1.5rem;
      background-color: #112543;
      color: #0ff7c5;
      border: 1px solid #1d657f;
    }
  }
  .comPaging{
    position: absolute;
    bottom: 0%;
    right: 5%;
  }

  .thirdInputModel{
    margin-top: 10px;
    // margin-left: 8%;
    // width: 95%;
  }
  .sp_sbg{
    overflow: hidden;
    overflow-y: scroll;
    width: 100%;
    height: 80%;
    .sp_sbg_div{
      background-color: rgb(35, 76, 172,0.2);
      margin: 5px 0px;
      border-radius: 5px;

      .el-button{
        background: none;
        outline: 0px;
        border: 0px;
      }
    }

    .sp_sbg_div.on{
      background-color: rgb(35, 76, 172,0.4);
      .el-button{
        span{
          color: #01FBFE!important;
          text-shadow: 0px 0px 3px #01FBFE;
        }
      }
    }

  }
  .sip_img{
    opacity: 0.8;
  }
  .sip_imgon{
    opacity: 1;
    box-shadow: 0px 5px 5px #0b3555;
  }
  .thirdHighlightedBtn{
    background: url('~@/assets/images/video-plaza/camera1_on.png') 0 0 no-repeat; /* 高亮背景 */
    background-size: 100% 100%;
  }
  .thirdDevice_icon{
    width: 10%;
    margin: 1.7% 15px 0 2%;
    height: 70%;
    cursor: pointer;
  }

  .container{
    width:98%;
    height:70%;
    position: relative;
    left: 1%;
    z-index: 20;
	  background: url('~@/assets/images/video-plaza/bg-sl.png') 0 0 no-repeat; /* 高亮背景 */
	  border-bottom: 1px solid #1b497d;
	  border-right: 1px solid #1b497d;
  }

  .container1{
    width:48%;
    height:95%;
    position: relative;
    left: 1%;
    z-index: 20;
	  background: url('~@/assets/images/video-plaza/bg-sl.png') 0 0 no-repeat; /* 高亮背景 */
	  border-bottom: 1px solid #1b497d;
	  border-right: 1px solid #1b497d;
    .listItem{
      cursor: pointer;
    }
  }

  .topBar{
    position: absolute;
    top: 0;
    z-index: 99;
    width: 100%;
    height: 4%;
    text-indent: 23px;
    line-height: 1.1;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    background: url('~@/assets/images/video-plaza/rightBar.png') 0 0 no-repeat
  }

  .mainContainer{
    overflow: hidden scroll;
    position: absolute;
    width: 90%;
    height: 80%;
    margin:  7% auto auto 5%;
  }
  .listItem{
    display: flex;
    justify-content: space-around;
    height: 9%;
    width: 100%;
    margin: 0 auto;
  }
  .listItem:not(:nth-child(1)){
    margin-top: 6%;
  }
  .itemPic{
    width: 24%;
    height: 100%;
  }
  .itemArea{
    font-size: 15px;
    white-space: nowrap;
    width: 73%;
    overflow: hidden;
    text-overflow: ellipsis;
    margin:auto auto auto 2%;
    color: #fff;
  }
  .itemArea:hover {
    white-space: normal;
    overflow: visible;
  }
  .itemArea >h3{
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .itemArea >span{
    font-size: 16px;
  }

  .inputModel{
    width: 100%;
    margin-top: 14%;
    padding: 0 5%;
  }
  ::v-deep .el-input__inner{
   background-color: #0e3271ba ;
      box-shadow: inset 0 0 10px 2px #1b497d;
      border: 1px solid #205b8b;
    color: white;
  }
</style>

<style lang="scss">
  @import '@/assets/styles/base.scss';

  .el-table__cell{
    cursor: pointer;
  }
  .is-leaf{
    cursor: default; // 更多标题指针默认
  }
  .is-dark{
    display: none !important;
  }


  .bottomRight {

    .el-table .el-table__header-wrapper th,
    .el-table .el-table__fixed-header-wrapper th {
      background-color: $searchBG;

    }

    .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
      border-bottom: 1px $tableBorder;
    }

    .el-table--border,
    .el-table--border::after {
      border: 1px $tableBorder;
      background-color: $searchBG
    }

    .el-table--border {
      .el-table--group {
        border: 1px $tableBorder;
      }

      .el-table__cell {
        border-right: 1px $tableBorder;
        ;
      }

    }

    .el-table::before {
      background: $searchBG;
    }

    .el-table {
      background: $searchBG;
      color: $inBlue;

      thead {}

      tr {
        background: $searchBG;
      }

      td {
        text-align: center;
      }

      .el-table__header-wrapper {
        th {
          color: $inBlue;
          font-size: .8rem;
        }
      }

      thead.is-group {
        .el-table__cell {
          text-align: center;
          background: $searchBG;
          border-bottom: 1px $tableBorder;
          border-right: 1px $tableBorder;
          padding: 0;
          font-weight: normal;
        }
      }
    }

    .el-table__empty-block {
      min-height: auto;
    }

    .el-table__empty-text {
      line-height: 30px;
    }

    .el-table__header {
      width: auto !important
    }

    .el-table__empty-block {
      width: auto !important
    }

    .el-table__body-wrapper {
      .el-table__body {
        width: auto !important
      }
    }

    .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
      background-color: #0f3655;
    }
  }
  .sj-layer-switch {
    width: 100%;
    position: fixed;
    bottom: 4rem;
    display: flex;
    // left: 21%;
    z-index: 10;
    justify-content: space-between;
  }
  .leader-tcqh {
    width: fit-content;
    height: fit-content;
    text-align: center;
    color: #fff !important;
    font-size: 0.6rem;
    margin-right: 1rem;
    display: flex;
    flex-direction: column;

    img {
      margin-bottom: 3px;
    }
    p {
      font-size: 16px;
    }
  }
  .leader-tcqh img {
    width: 50px;
    margin: 0 auto;
  }
  .leader-tcqh:hover {
    color: #fff !important;
  }
  .tk-close {
    width: 1.3rem;
    height: 1.3rem;
    color: #346ebc;
    font-size: 1.3rem;
    position: absolute;
    right: 0.8rem;
    top: 0.8rem;
    cursor: pointer;
  }
</style>