tz-onest-system/system_ui/src/views/leader-index备份.vue

<!-- 领导首页 -->
<template>
  <div class="sj-container">
    <!--头部 开始-->
    <div class="header">
      <div class="head-left">
        <img src="../assets/images/leader-logo1.png" style="cursor: pointer" @click="toHome" />
        <el-select v-model="place" size="small" placeholder="请选择" class="select" :popper-append-to-body="false"
          @focus="out" disabled>
          <el-option v-for="item in placeList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="dept" :disabled="userDeptId != 365" size="small" placeholder="请选择" class="select2"
          :popper-append-to-body="false" @focus="out" @change="getByDeptId">
          <el-option v-for="item in deptList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="head-center" @click="titleClick">
        <span>{{ headerTitle }}</span>
      </div>
      <div class="head-right">
        <div class="head-time">
          <!-- 风向 -->
          <span><i class="head-fx"></i>
            <span style="margin-right: 0" v-if="!weatherinformationDirection">风向</span>
            <span style="margin-right: 0" v-if="weatherinformationDirection == 1">东风</span>
            <span style="margin-right: 0" v-if="weatherinformationDirection == 2">东南风</span>
            <span style="margin-right: 0" v-if="weatherinformationDirection == 3">南风</span>
            <span style="margin-right: 0" v-if="weatherinformationDirection == 4">西南风</span>
            <span style="margin-right: 0" v-if="weatherinformationDirection == 5">西风</span>
            <span style="margin-right: 0" v-if="weatherinformationDirection == 6">西北风</span>
            <span style="margin-right: 0" v-if="weatherinformationDirection == 7">西北风</span>
            <span style="margin-right: 0" v-if="weatherinformationDirection == 8">西北风</span>
          </span>
          <!-- 风速 -->
          <span><i class="head-fs"></i>{{ weatherinformationPower}}<u>m/s</u></span>

          <span><i class="head-jsl"></i>{{ weatherinformationTemperature}}<u>%</u></span>
          <span><i class="head-wd"></i>{{ weatherinformationLow }}-{{weatherinformationHigh}}<u>℃</u></span>
          <span class="timer"> {{ nowTime }}</span>
          <VfastMenu></VfastMenu>
        </div>
      </div>
    </div>
    <!--头部 结束-->
    <!--地图  开始-->
    <div class="map">
      <supermap ref="supermap" style="width: 100%; height: 100vh" @fatherMethod="fatherMethod" @preview="preview"
        @showEventDialog="showEventDialog" @jump="jump" @sewageOutletClick="sewageOutletClick"
        @sewageOutletClickfarming="sewageOutletClickfarming" @setPositioning="setPositioning"></supermap>
    </div>
    <!--地图  结束-->

    <!--左侧 开始-->
    <div class="con-left" ref="leftBar">
      <!-- 首页初始左模块开始 -->
      <div class="side-show-container" v-show="sideShowHome">
        <!-- 实时关注 -->
        <div class="con1 con-div" :style="{
            border: this.showModal ? '1px solid #00ffde !important' : '',
          }" @click="fn1()" id="box1">
          <div class="con-tit">
            <a><i></i><b>实时关注</b></a>
            <span><i class="tit_fire"></i>防火季</span>
          </div>
          <div class="cont ssgz">
            <div class="cont-top1 cont-top">
              <img src="../assets/images/leader-icon5.png" />
              <p>
                火情发生<b>{{ interestTotal }}</b>起
              </p>
              <a>分析报告</a>
            </div>
            <div class="conChart1" id="conChart1"></div>
          </div>
          <dv-decoration-3 class="head-di" :color="['#02a3e9']" />
        </div>
        <!-- 事件统计 -->
        <div class="con3 con-div" :style="{
            border: this.showModa3 ? '1px solid #00ffde !important' : '',
          }" @click="fn3()" id="box3">
          <div class="con-tit">
            <a><i></i><b>事件统计</b></a>
          </div>
          <div class="cont sstj2 cont-np">
            <div class="cont-top2 cont-top">
              <span>待处理<b>{{ eventStatistics.untreatedNum }}</b></span>
              <span>总数<b>{{ eventStatistics.totalNum }}</b></span>
              <span>已处理<b>{{ eventStatistics.processedNum }}</b></span>
            </div>
            <div class="conChart3" id="conChart3"></div>
          </div>
          <dv-decoration-3 class="head-di" :color="['#02a3e9']" />
        </div>
        <!-- 一网通办 -->
        <div class="con6 con-div" :style="{
            border: this.showModa4 ? '1px solid #00ffde !important' : '',
          }" @click="fn4()" id="box4">
          <div class="con-tit">
            <a><i></i><b>一网通办</b></a>
          </div>
          <div class="cont ywtb">
            <div class="cont-top4 cont-top">
              <div class="cont-row">
                <div class="c-left">
                  <p>
                    前日大厅办件总数<b>{{
                      networkprocessingData.previousDayHallProcessingTotalNumber
                    }}</b>
                  </p>
                  <p>
                    今日大厅办件总数<b>{{
                      networkprocessingData.hallProcessingTotalNumber
                    }}</b>
                  </p>
                </div>
                <div class="c-right">
                  <i class="ss" v-if="networkprocessingData.upDown >= 0"></i>
                  <i class="xj" v-else></i>
                  <div class="c-txt">
                    <p>昨日同比</p>
                    <b>{{ Math.abs(networkprocessingData.upDown) }}%</b>
                  </div>
                </div>
              </div>
              <div class="cont-com">
                <div class="con-txt">
                  <h5>
                    <b>{{
                      networkprocessingData.legalPersonProcessingNumber
                    }}</b>
                    <p>年度法人办件数</p>
                  </h5>
                  <h5>
                    <b>{{
                      networkprocessingData.legalPersonCompletionNumber
                    }}</b>
                    <p>年度法人办结数</p>
                  </h5>
                  <h5>
                    <h6>
                      年度办结率
                      {{ networkprocessingData.legalPersonCompletionRate }}
                    </h6>
                  </h5>
                </div>
                <div class="con-txt">
                  <h5>
                    <b>{{
                      networkprocessingData.naturalPersonProcessingNumber
                    }}</b>
                    <p>年度自然人办件数</p>
                  </h5>
                  <h5>
                    <b>{{
                      networkprocessingData.naturalPersonCompletionNumber
                    }}</b>
                    <p>年度自然人办结数</p>
                  </h5>
                  <h5>
                    <h6>
                      年度办结率
                      {{ networkprocessingData.naturalPersonCompletionRate }}
                    </h6>
                  </h5>
                </div>
              </div>
            </div>
          </div>
          <dv-decoration-3 class="head-di" :color="['#02a3e9']" />
        </div>
      </div>
      <!-- 首页初始左模块结束 -->
      <!-- 视联网模块左侧树开始 -->
      <camerabar ref="cameraBar" @selectCameraByDeptId="selectCameraByDeptId" v-if="sideShowCamera" :deptId="dept">
      </camerabar>
      <!-- 视联网模块左侧树结束 -->
      <!-- 物联网模块左侧树开始 -->
      <monitorbar ref="monitorBar" @getMonitorList="getMonitorList" v-if="sideShowMonitor" :deptId="dept"></monitorbar>
      <!-- 物联网模块左侧树结束 -->
    </div>
    <!--左侧 结束-->
    <!-- 展开收起 开始-->
    <expendbutton @expandClick="expandClick" :expandValue="expandValue" ref="exb">
    </expendbutton>
    <!-- 展开收起 结束-->
    <!--右侧 开始-->
    <div class="con-right" ref="rightBar">
      <!-- 首页初始右模块开始 -->
      <div class="side-show-container" v-show="sideShowHome">
        <!-- 重点工程 -->
        <div class="con4 con-div" :style="{
            border: this.showModal6 ? '1px solid #00ffde !important' : '',
          }" id="box6">
          <div class="con-tit">
            <a><i></i><b>重点工程</b><span @click="fn6()">更多</span></a>
          </div>
          <div class="cont zdgc cont-np">
            <!-- <el-carousel :interval="5000" arrow="always" height="13rem"> -->
            <el-carousel :autoplay="false" arrow="always" height="13rem">
              <el-carousel-item v-for="(it, key) in imgList.length" :key="key">
                <div class="imgBox">
                  <el-tooltip placement="left" v-for="(item, index) in imgList[key]" :key="index" popper-class="js-tps"
                    :content="item.projectName">
                    <div slot="content" class="leader-info-container">
                      <div class="leader-info-list-con" v-if="item.projectName.length > 8">
                        <h4>{{ item.projectName }}</h4>
                      </div>
                    </div>
                    <!-- <div slot="content">{{item.name}}</div> -->
                    <span @click="fn5(item, 1)">
                      {{ item.projectName | ellipsisFont8 }}
                    </span>
                  </el-tooltip>
                  <img src="../assets/images/leader-logo3.png" class="leader-logo" />
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
          <dv-decoration-3 class="head-di" :color="['#02a3e9']" />
        </div>
        <!-- 四长统计 -->
        <div class="con2 con-div" :style="{
            border: this.showModa2 ? '1px solid #00ffde !important' : '',
          }" @click="fn2()" id="box2">
          <div class="con-tit">
            <a><i></i><b>四长概况</b></a>
          </div>
          <div class="cont sstj">
            <div class="cont-top1 cont-top">
              <img src="../assets/images/leader-icon9.png" />
              <p>
                四长总人数<b>{{ fourLengthStatistics.TotalNumberofPeople }}</b>人
              </p>
              <a>结构分析</a>
            </div>
            <div class="conChart2" id="fourLeaders"></div>
          </div>
          <dv-decoration-3 class="head-di" :color="['#02a3e9']" />
        </div>
        <!-- 重点区域 -->
        <div class="con5 con-div" :style="{
            border: this.showModal7 ? '1px solid #00ffde !important' : '',
          }" id="box7">
          <div class="con-tit">
            <a><i></i><b>重点区域</b><span @click="fn7()">更多</span></a>
          </div>
          <div class="cont zdqy">
            <el-tabs v-model="rActiveName" @tab-click="tabHandleClick">
              <el-tab-pane :label="item.areaName" v-for="(item, index) in keyAreasList" :key="index">
                <div class="con-list">
                  <div class="tabList" v-for="(ite, index) in item.areaList">
                    <a>
                      <el-tooltip class="item" effect="dark" :content="ite.areaName" placement="top">
                        <span>{{truncatedText(ite.areaName)}}</span>
                      </el-tooltip>
                      <u @click="fn5(ite, 2)">查看</u>
                    </a>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <dv-decoration-3 class="head-di" :color="['#02a3e9']" />
        </div>
      </div>
      <!-- 首页初始右模块结束 -->
      <!-- 视联网模块右侧列表开始 -->
      <cameralist ref="cameraList" @dropLocation="dropLocation" @rightDeptName="rightDeptName" v-if="sideShowCamera"
        :visuForestCloudCameraBOListSearch="
          this.visuForestCloudCameraBOListSearch
        " :visuForestCloudCameraBOList="this.visuForestCloudCameraBOList"></cameralist>
      <!-- 视联网模块右侧列表结束 -->
      <!-- 视联网模块右侧列表开始 -->
      <monitorlist ref="monitorList" @dropLocation="dropLocation" @leftDeptName="leftDeptName" v-if="sideShowMonitor"
        :visuForestCloudMonitorBOListSearch="
          this.visuForestCloudMonitorBOListSearch
        " :visuForestCloudMonitorBOList="this.visuForestCloudMonitorBOList"></monitorlist>
      <!-- 视联网模块右侧列表结束 -->
    </div>
    <!--右侧 结束-->
    <!--底部 开始-->
    <div class="footer">
      <div class="foot-btn">
        <el-popover placement="top-start" :disabled="!sideShowCamera" v-model="visible_slw" title="摄像头类型"
          trigger="hover" popper-class="sj-layer-pop" ref="sideShowCamera">
          <el-checkbox-group v-model="cameraUseCheckList" @change="selectCameraByDeptIds(deptId)"
            style="height: 100px; overflow-y: scroll">
            <el-checkbox v-for="(item, index) in cameraUseList" :label="item.dictValue"
              :key="item.dictValue">{{ item.dictLabel }}
            </el-checkbox>
          </el-checkbox-group>
          <a class="btn1 btn" slot="reference" @click="selectDeviceType" :class="btnGetFocus1 ? 'on' : ''">
            <span><img src="../assets/images/leader-foot1.png" /><u></u><i></i></span>
            <i>视联网</i>
          </a>
        </el-popover>
        <el-popover placement="top-start" :disabled="!sideShowMonitor" v-model="visible_wlw" title="物联网类型"
          trigger="hover" popper-class="sj-layer-pop" ref="sideShowMonitor">
          <el-checkbox-group v-model="sensorCheckList" @change="getMonitorDeviceAndDataList()"
            style="height: 200px; overflow-y: scroll">
            <el-checkbox v-for="(item, index) in sensorList" :label="item.dictLabel"
              :key="item.dictLabel">{{ item.dictLabel }}
            </el-checkbox>
          </el-checkbox-group>
          <a class="btn2 btn" slot="reference" @click="getMonitorDeviceAndData()" :class="btnGetFocus2 ? 'on' : ''">
            <span><img src="../assets/images/leader-foot2.png" /><u></u><i></i></span>
            <i>物联网</i>
          </a>
        </el-popover>
        <el-popover placement="top-start" :disabled="!btnGetFocus3" v-model="visible_ygb" title="云广播类型" trigger="hover"
          popper-class="sj-layer-pop" ref="btnGetFocus3">
          <el-checkbox-group v-model="broadcastUseCheckList" @change="getDlblistBydeptIds()"
            style="height: 100px; overflow-y: scroll">
            <el-checkbox v-for="(item, index) in broadcastUseList" :label="item.dictValue"
              :key="item.dictValue">{{ item.dictLabel }}
            </el-checkbox>
          </el-checkbox-group>
          <a class="btn3 btn" slot="reference" @click="getDlblistBydeptId()" :class="btnGetFocus3 ? 'on' : ''">
            <span><img src="../assets/images/leader-foot3.png" /><u></u><i></i></span>
            <i>云广播</i>
          </a>
        </el-popover>
        <a class="btn4 btn" @click="showTVWall" :class="btnGetFocus4 ? 'on' : ''">
          <span><img src="../assets/images/leader-foot4.png" /><u></u><i></i></span>
          <i>云指挥</i>
        </a>
      </div>
    </div>
    <!--底部 结束-->
    <!--AI 机器人 开始-->
    <a class="leader-ai" @click="showDownloadList('2')">
      <img src="../assets/images/leader-ai.png" />
    </a>
    <!--AI 机器人 结束-->
    <!--图层切换 开始-->
    <div class="sj-layer-switch" ref="sjLayerSwith">
      <el-popover placement="top" title="专题" width="50" trigger="click" @show="hideClick" popper-class="sj-layer-pop">
        <el-checkbox-group v-model="layerCheckList" @change="layerCheck">
          <!--          <el-checkbox label="buildingModel" name="buildingModel"-->
          <!--            v-if="dept == '365' || dept == '373'">倾斜实景</el-checkbox>-->
          <el-checkbox label="lindi" name="lindi">林地专题</el-checkbox>
          <el-checkbox label="shuixi" ame="shuixi">水系专题</el-checkbox>
          <el-checkbox label="road" ame="road">路网专题</el-checkbox>
          <el-checkbox label="nongtian" ame="nongtian">农田专题</el-checkbox>
        </el-checkbox-group>
        <a class="leader-tcqh" slot="reference">
          <img src="../assets/images/leader-tcbg.png" />
          <p>专题</p>
        </a>
      </el-popover>
      <!--图层切换 结束-->
      <!--资源切换 开始-->
      <el-popover placement="top" title="资源" trigger="click" v-model="visible_zy" @show="hideClick"
        popper-class="sj-layer-pop">
        <div style="margin-bottom: 15px; display: flex">
          <el-select v-model="resourcesType" size="small" style="width: 140px" placeholder="请选择资源分类"
            popper-class="sj-select" :popper-append-t0o-body="false">
            <el-option v-for="dict in dict.type.camera_system" :key="dict.value" :label="dict.label" :value="dict.value"
              @click.native="getResourceType(dict.value)"></el-option>
          </el-select>

          <el-button type="primary" icon="el-icon-delete" size="normal" @click="colseClick()"
            style="margin-left: 10px; height: 32px; padding: 9px 20px">清除
          </el-button>
        </div>
        <el-checkbox-group v-model="resourcesCheckList" @change="getResourcePoint"
          style="height: 200px; overflow-y: scroll">
          <el-checkbox v-for="(item, index) in resourcesList" :label="item.type" :key="item.type">{{ item.name }}
          </el-checkbox>
        </el-checkbox-group>
        <a class="leader-tcqh" slot="reference" @click="resourcesClick" @close="resourcesClose">
          <img src="../assets/images/leader-tcbg2.png" />
          <p>资源</p>
        </a>
      </el-popover>
      <!--图层切换 结束-->
      <!--图层切换 开始-->
      <!-- <el-popover placement="top-start" title="人员" trigger="manual" @show="selectPersonnelTypeList()" v-model="pvisible" -->
      <el-popover placement="top-start" v-model="visible_tc" title="人员" trigger="click"
        @show="selectPersonnelTypeList()" popper-class="sj-layer-pop">
        <div class="gctj-tk no-icon">
          <div class="pop tbtj-row">
            <div class="ssgz-row" style="width: 100%">
              <div class="tk-con"></div>
              <div style="display: flex">
                <div class="cont-top1" style="margin-right: 15px">
                  <el-select v-model="personnelVisualizationModel" size="small" placeholder="请选择可视化类型" filterable
                    class="select" :popper-append-to-body="false" @change="selectPersonnelTypeList">
                    <el-option v-for="dict in dict.type.camera_system" :key="dict.value" :label="dict.label"
                      :value="dict.value"></el-option>
                  </el-select>
                </div>
                <div class="cont-top1" style="margin-right: 15px">
                  <el-select v-model="personneType" size="small" placeholder="请选择人员类型" filterable class="select"
                    :popper-append-to-body="false" @change="selectPersonneList">
                    <el-option v-for="dict in personneTypeList" :key="dict.jobValue" :label="dict.job"
                      :value="dict.jobValue"></el-option>
                  </el-select>
                </div>
                <div class="cont-top1" style="margin-right: 15px">
                  <el-select v-model="personne" size="small" placeholder="请选择人员" filterable class="select"
                    :popper-append-to-body="false" @change="selectPersonneTaskList">
                    <el-option v-for="dict in personneList" :key="dict.userId" :label="dict.nickName"
                      :value="dict.userId"></el-option>
                  </el-select>
                </div>

                <div class="cont-top1" style="margin-right: 15px">
                  <el-select v-model="personneTask" size="small" placeholder="请选择巡查任务" filterable class="select"
                    :popper-append-to-body="false" @change="search">
                    <el-option v-for="dict in personneTaskList" :key="dict.id" :label="dict.taskName" :value="dict.id"
                      @click.native="getTaskTrajectory(dict)"></el-option>
                  </el-select>
                </div>
                <div>
                  <el-button type="primary" icon="el-icon-delete" size="normal" @click="resettings()"
                    style="margin-right: 15px; height: 32px; padding: 9px 20px">清除轨迹
                  </el-button>
                </div>
              </div>
              <el-table :data="personneTaskTrajectoryList" height="250" border style="width: 100%; margin-top: 0.5rem">
                <el-table-column label="开始时间" align="center" prop="beginTime" />
                <el-table-column label="结束时间" align="center" prop="endTime">
                </el-table-column>
                <el-table-column label="查询轨迹" align="center" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="getTrack(scope.row.id)">
                      查询轨迹
                      <!--                      <i class="iconfont sj-icon-jkzx icon-sxt"></i>-->
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <pagination id="pagination1" v-show="total > 0" :total="total" :page.sync="queryParams1.pageNum"
                :limit.sync="queryParams1.pageSize" @pagination="getKeyProjects1" popper-class="sj-pagination" />
            </div>
          </div>
          <div class="ssgz-tkcom"></div>
        </div>
        <!-- <a class="leader-tcqh" slot="reference" @click="pvisible=!pvisible"> -->
        <a class="leader-tcqh" slot="reference">
          <img src="../assets/images/leader-tcbg3.png" />
          <p>人员</p>
        </a>
      </el-popover>

      <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-input placeholder="请输入经度" style="width: 200px;" v-model="positioning.lon" clearable></el-input><br><br>
        纬度: <el-input placeholder="请输入纬度" style="width: 200px;" v-model="positioning.lat" clearable></el-input><br><br>
        <el-button type="primary" size="mini" style="width:100%; float: right;cursor: pointer;"
          @click="lonAndLatQueryCamera">查询附近摄像头</el-button>
        <a class="leader-tcqh" slot="reference" @click="getLocation(1)">
          <img src="../assets/images/leader-tcbg4.png" />
          <p>定位</p>
        </a>
      </el-popover>
      <el-popover placement="bottom" v-if="dept == '365' || dept == '373'" title="实景" trigger="manual"
        popper-class="sj-layer-pop">
        <a class="leader-tcqh" slot="reference" @click="openLiveAction()">
          <img src="../assets/images/leader-tcbg5.png" />
          <p>实景</p>
        </a>
      </el-popover>
      <!--图层切换 结束-->
    </div>

    <!--实时关注弹框 开始-->
    <div id="leader-tkbg" v-show="showModal">
      <span @click="showModal = false" class="tk-close el-icon-close"></span>
      <div class="pop ssgz-tk">
        <div class="ssgz-tkcom">
          <div class="ssgz-row">
            <div class="tk-con">
              <p class="tk-tit">起火原因统计(年度)</p>
              <div id="tkCharts1"></div>
            </div>
            <div class="tk-con">
              <p class="tk-tit">起火场所统计(年度)</p>
              <div id="tkCharts3"></div>
            </div>
          </div>
          <div class="ssgz-row2">
            <div class="tk-con">
              <p class="tk-tit">当前防火季火灾损失统计(年度)</p>
              <div class="tk-top">
                <p>
                  <img src="../assets/images/leader-tk3.png" /><span>火灾损失总价值</span><u>{{ lossCount }}万元</u>
                </p>
                <p>
                  <img src="../assets/images/leader-tk2.png" /><span>扑火费用总支出</span><u>{{ blazesCount }}万元</u>
                </p>
              </div>
              <div id="tkCharts2"></div>
            </div>
            <div class="tk-con">
              <p class="tk-tit">防火季火灾发生情况(年度)</p>
              <div id="tkCharts4"></div>
            </div>
          </div>
        </div>
        <div class="ssgz-tkcom"></div>
      </div>
    </div>
    <!--实时关注弹框 结束-->
    <!--四长统计弹框 开始-->
    <div id="leader-tkbg2" v-show="showModa2">
      <span @click="showModa2 = false" class="tk-close el-icon-close"></span>
      <div class="pop sztj-tk">
        <div class="sztj-row">
          <div class="sztj-div1">
            <p class="tk-tit">四长结构</p>
            <el-tabs v-model="szActiveName" @tab-click="szHandleClick" style="margin-top: 1rem">
              <el-tab-pane label="林长" name="lin">
                <div class="cont-top1 cont-top">
                  <el-input v-model="linName" placeholder="请输入部门名称" prefix-icon="el-icon-search"
                    style="line-height: 2rem; margin-top: 15px" />
                </div>
                <div class="sztj-1-con">
                  <el-tree :data="data" :props="defaultProps" accordion node-key="id" ref="treeLin"
                    :default-expanded-keys="expandedKeys" :filter-node-method="filterNode"
                    @node-click="handleNodeClick">
                    <template slot-scope="{ node, data }">
                      <el-tooltip effect="dark" :content="data.title" placement="right" popper-class="js-tps"
                        :visible-arrow="false">
                        <div slot="content" class="leader-info-container">
                          <div class="leader-info-list-con" v-for="(item, index) in data.title" :key="index">
                            <h4>职务：{{ item.position }}</h4>
                            <h4>姓名：{{ item.name }}</h4>
                            <h4 v-if="item.phone != undefined">
                              电话：{{ item.phone }}
                            </h4>
                          </div>
                        </div>
                        <span class="leader-info-container-right">{{
                          node.label
                        }}</span>
                      </el-tooltip>
                    </template>
                  </el-tree>
                </div>
              </el-tab-pane>
              <el-tab-pane label="田长" name="tian">
                <div class="cont-top1 cont-top">
                  <el-input v-model="tianName" placeholder="请输入部门名称" prefix-icon="el-icon-search"
                    style="line-height: 2rem; margin-top: 15px" />
                </div>
                <div class="sztj-1-con">
                  <el-tree :data="data" :props="defaultProps" accordion node-key="id"
                    :default-expanded-keys="expandedKeys" ref="treeTian" :filter-node-method="filterNode"
                    @node-click="handleNodeClick">
                    <template slot-scope="{ node, data }">
                      <el-tooltip effect="dark" :content="data.title" placement="right" popper-class="js-tps"
                        :visible-arrow="false">
                        <div slot="content" class="leader-info-container">
                          <div class="leader-info-list-con" v-for="(item, index) in data.title" :key="index">
                            <h4>职务：{{ item.position }}</h4>
                            <h4>姓名：{{ item.name }}</h4>
                            <h4 v-if="item.phone != undefined">
                              电话：{{ item.phone }}
                            </h4>
                          </div>
                        </div>
                        <span class="leader-info-container-right">{{
                          node.label
                        }}</span>
                      </el-tooltip>
                    </template>
                  </el-tree>
                </div>
              </el-tab-pane>
              <el-tab-pane label="路长" name="lu">
                <div class="cont-top1 cont-top">
                  <el-input v-model="luName" placeholder="请输入部门名称" prefix-icon="el-icon-search"
                    style="line-height: 2rem; margin-top: 15px" />
                </div>
                <div class="sztj-1-con">
                  <el-tree :data="data" :props="defaultProps" :default-expanded-keys="expandedKeys" accordion
                    node-key="id" ref="treeLu" :filter-node-method="filterNode" @node-click="handleNodeClick">
                    <template slot-scope="{ node, data }">
                      <el-tooltip effect="dark" placement="right" popper-class="js-tps" :visible-arrow="false">
                        <div slot="content" class="leader-info-container">
                          <div class="leader-info-list-con" v-for="(item, index) in data.title" :key="index">
                            <h4>职务：{{ item.position }}</h4>
                            <h4>姓名：{{ item.name }}</h4>
                            <h4 v-if="item.phone != undefined">
                              电话：{{ item.phone }}
                            </h4>
                          </div>
                        </div>
                        <span class="leader-info-container-right">{{
                          node.label
                        }}</span>
                      </el-tooltip>
                    </template>
                  </el-tree>
                </div>
              </el-tab-pane>
              <el-tab-pane label="河长" name="he">
                <div class="cont-top1 cont-top">
                  <el-input v-model="heName" placeholder="请输入部门名称" prefix-icon="el-icon-search"
                    style="line-height: 2rem; margin-top: 15px" />
                </div>
                <div class="sztj-1-con">
                  <el-tree :data="data" :props="defaultProps" :default-expanded-keys="expandedKeys" accordion
                    node-key="id" ref="treeHe" :filter-node-method="filterNode" @node-click="handleNodeClick">
                    <template slot-scope="{ node, data }">
                      <el-tooltip effect="dark" placement="right" popper-class="js-tps" :visible-arrow="false">
                        <div slot="content" class="leader-info-container">
                          <div class="leader-info-list-con" v-for="(item, index) in data.title" :key="index">
                            <h4>职务：{{ item.position }}</h4>
                            <h4>姓名：{{ item.name }}</h4>
                            <h4 v-if="item.phone != undefined">
                              电话：{{ item.phone }}
                            </h4>
                          </div>
                        </div>
                        <span class="leader-info-container-right">{{
                          node.label
                        }}</span>
                      </el-tooltip>
                    </template>
                  </el-tree>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="sztj-div3">
            <p class="tk-tit">巡护计划完成度</p>
            <div id="szCharts2"></div>
          </div>
          <div class="sztj-div3">
            <p class="tk-tit">事件任务完成度</p>
            <div id="szCharts3"></div>
          </div>
          <div class="sztj-div2">
            <p class="tk-tit">结构分析</p>
            <div id="szCharts1"></div>
          </div>
        </div>
      </div>
    </div>
    <!--四长统计弹框 结束-->
    <!--事件统计弹框 开始-->
    <div id="leader-tkbg3" v-show="showModa3">
      <p class="tk-tit" style="
          margin-bottom: 1rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
        ">
        事件详情(年度)
<!--        <el-date-picker ref="datePickRef" v-model="queryTime" clearable type="datetimerange"-->
<!--          value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"-->
<!--          end-placeholder="结束日期" :validate-event="true" class="sj-data-picker-input" popper-class="sj-data-picker" />-->
<!--        <el-button type="primary" icon="el-icon-printer" size="normal" @click="getEventReport()" style="-->
<!--            height: 32px;-->
<!--            padding: 9px 20px;-->
<!--            position: relative;-->
<!--            right: 2rem;-->
<!--          ">生成报告-->
<!--        </el-button>-->
      </p>
      <span @click="showModa3 = false" class="tk-close el-icon-close"></span>
      <div class="sjtj-tk">
        <div class="pop sstj-row">
          <div class="sstj-div" id="sjCharts1"></div>
          <div class="sstj-div" id="sjCharts2"></div>
        </div>
      </div>
    </div>
    <!--事件统计弹框 结束-->
    <!--一网通办弹框 开始-->
    <div id="leader-tbbg4" v-show="showModa4">
      <span @click="showModa4 = false" class="tk-close el-icon-close"></span>
      <div class="tbtj-tk">
        <div class="pop tbtj-row">
          <div class="tbtj-div1">
            <p class="tk-tit">部门办结统计Top5</p>
            <div id="tbCharts1"></div>
          </div>
          <div class="tbtj-div2">
            <p class="tk-tit">好差评统计</p>
            <div id="tbCharts2"></div>
          </div>
        </div>
      </div>
    </div>
    <!--一网通办弹框 结束-->
    <!--重点工程弹框 开始-->
    <div id="leader-tbbg5" v-show="showModa5">
      <span @click="showModa5 = false" class="tk-close el-icon-close"></span>
      <div class="gctj-tk">
        <div class="pop gctj-row">
          <div class="gctj-div1">
            <p class="tk-tit">重点工程实时监控</p>
            <div class="gctj-jk">
              <img :src="introductionToKeyProjectsImg" />
            </div>
          </div>
          <div class="gctj-div2">
            <h5>{{ introductionToKeyProjectsTitle }}</h5>
            <p>{{ introductionToKeyProjects }}</p>
          </div>
        </div>
      </div>
    </div>
    <!--重点工程弹框 结束-->
    <!--重点工程弹窗 开始-->
    <div id="leader-tkbg6" v-show="showModal6">
      <span @click="showModal6 = false" class="tk-close el-icon-close"></span>
      <div class="gctj-tk">
        <div class="pop tbtj-row">
          <div class="ssgz-row" style="width: 100%">
            <div class="tk-con"></div>
            <div style="display: flex">
              <div class="cont-top1" style="margin-right: 15px">
                <el-input v-model="queryParams1.params.projectName" placeholder="请输入工程名称" prefix-icon="el-icon-search"
                  style="line-height: 2rem" />
              </div>
              <div class="cont-top1" style="margin-right: 15px">
                <el-select v-model="queryParams1.params.territoriality" size="small" placeholder="请选择属地辖区" class="select"
                  :popper-append-to-body="false">
                  <el-option v-for="dict in projectTypeList" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </div>
              <div class="cont-top1" style="margin-right: 15px">
                <el-input v-model="queryParams1.params.park" placeholder="请输入所属开发区" prefix-icon="el-icon-search"
                          style="line-height: 2rem" />
              </div>
              <div>
                <el-button type="primary" icon="el-icon-search" size="normal" @click="getKeyProjects1()"
                  style="margin-right: 15px; height: 32px; padding: 9px 20px">搜索
                </el-button>
              </div>
              <div>
                <el-button icon="el-icon-refresh" size="normal" @click="resetting(1)"
                  style="height: 32px; padding: 9px 20px">重置
                </el-button>
              </div>
            </div>
            <el-table :data="imgLists" height="250" border style="width: 100%; margin-top: 0.5rem">
              <el-table-column label="工程名称" align="center" prop="projectName" />
              <el-table-column label="属地辖区" align="center" prop="territoriality" />
              <el-table-column label="所属开发区" align="center" prop="park" />
              <el-table-column label="查看摄像头" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="fn5(scope.row, 1)"><i
                      class="iconfont sj-icon-jkzx icon-sxt"></i></el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination id="pagination1" v-show="total > 0" :total="total" :page.sync="queryParams1.pageNum"
              :limit.sync="queryParams1.pageSize" @pagination="getKeyProjects1" popper-class="sj-pagination" />
          </div>
        </div>
        <div class="ssgz-tkcom"></div>
      </div>
    </div>
    <!--重点工程弹窗 结束-->
    <!--重点区域弹窗 开始-->
    <div id="leader-tkbg7" v-show="showModal7">
      <span @click="showModal7 = false" class="tk-close el-icon-close"></span>
      <div class="zdqy-tk">
        <div class="pop tbtj-row">
          <div class="ssgz-row" style="width: 100%">
            <div class="tk-con"></div>
            <div style="display: flex">
              <div class="cont-top1" style="margin-right: 15px">
                <el-input v-model="queryParams.params.areaName" placeholder="请输入区域名称" prefix-icon="el-icon-search"
                  style="line-height: 2rem" />
              </div>
              <div class="cont-top1" style="margin-right: 15px">
                <el-select v-model="queryParams.params.projectLevel" size="small" placeholder="请选择区域级别" class="select"
                  :popper-append-to-body="false">
                  <el-option v-for="dict in dict.type.centerdata_project_level" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </div>
              <div>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getImportAreaList1()"
                  style="margin-right: 15px; height: 32px; padding: 9px 20px">搜索
                </el-button>
              </div>
              <div>
                <el-button icon="el-icon-refresh" size="mini" @click="resetting(2)"
                  style="height: 32px; padding: 9px 20px">重置
                </el-button>
              </div>
            </div>
            <el-table :data="keyAreasListList" height="250" border style="width: 100%; margin-top: 0.5rem">
              <el-table-column label="区域名称" align="center" prop="areaName" />
              <el-table-column label="区域级别" align="center" prop="projectLevel">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.centerdata_project_level" :value="scope.row.projectLevel" />
                </template>
              </el-table-column>
              <el-table-column label="查看摄像头" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="fn5(scope.row, 2)"><i
                      class="iconfont sj-icon-jkzx icon-sxt"></i></el-button>
                </template>
              </el-table-column>
            </el-table>

            <pagination v-show="total1 > 0" :total="total1" :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize" @pagination="getImportAreaList1" popper-class="sj-pagination" />
          </div>
        </div>
        <div class="ssgz-tkcom"></div>
      </div>
    </div>
    <!--重点区域弹窗 结束-->
    <!--电视墙 无右侧 开始-->
    <TVWallNoRight ref="TVWallNoRight"></TVWallNoRight>
    <TVWall ref="TVWall"></TVWall>
    <!--电视墙 结束-->
    <!--下载附件 开始-->
    <el-dialog title="文件下载" :visible.sync="isShowDownloadList" customClass="black-dialog" v-if="isShowDownloadList"
      width="35%" @close="cancelShowDownloadList()">
      <el-form>
        <div class="bottom">
          <div ref="wrapper">
            <el-form-item>
              <el-input v-model="fileNameS" style="width: 85%"
                onkeydown="if (event.keyCode===13){return false;}"></el-input>
              <el-button type="primary" icon="el-icon-search" @click="showDownloadList('1')">搜索
              </el-button>
            </el-form-item>
            <el-table :data="downloadList" style="width: 100%;height: 53vh;overflow-y: auto">
              <el-table-column prop="name" label="附件名称">
                <template slot-scope="scope">
                  {{ scope.row.fileName }}
                </template>
              </el-table-column>
              <el-table-column prop="bookbuytime" label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" icon="el-icon-download" @click="download(scope.row.path)">下载
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-form>
    </el-dialog>
    <!--下载附件 结束-->
    <eventdetailsdialog ref="eventdetailsdialog"></eventdetailsdialog>
    <TVWalls ref="TVWalls"></TVWalls>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import supermap from '@/components/supermap-2.5d' //超图
import TVWall from '@/views/tvwall/TVWall.vue' //电视墙弹窗
import TVWalls from '@/views/tvwall/TVWalls.vue' //电视墙弹窗
import TVWallNoRight from '@/views/tvwall/TVWall-no-right.vue' //电视墙弹窗
import eventdetailsdialog from '@/views/eventdetailsdialog.vue' //事件详情弹窗
import monitorbar from '@/components/leaderIndex/monitorbar.vue' // 视联网bar组件
import camerabar from '@/components/leaderIndex/camerabar.vue' // 视联网bar组件
import monitorlist from '@/components/leaderIndex/monitorlist.vue' // 视联网左侧组件
import cameralist from '@/components/leaderIndex/cameralist.vue' // 视联网左侧组件
import VfastMenu from '@/components/v-fastmenu.vue' // 头部右侧菜单
import expendbutton from '@/components/expendbutton' //左右收起展开
/** ----------------------------------摄像头预览开始------------------------------------- */
import { getTVWallList } from '@/api/dahua/dahua'
import DHWs from '@/dahua/lib/DHWs'

/** ----------------------------------摄像头预览结束------------------------------------- */
import {
  allAtOnce,
  fourLengthOverTree,
  fourLengthOverview,
  fourLengthOverviewOther,
  getAnalysisReport,
  getCamerasByDeptId,
  getDeptEventCount,
  getDlblistBydeptId,
  getEventPoint,
  getEventStatistics,
  getEventStatisticsOther,
  getImportAreaList,
  getImportAreaListOne,
  getKeyProjects,
  getKeyProjectsOne,
  getSensorListByDeptId,
  getWeather,
  initByArea,
  initByProject,
  rotation,
  searchAllYouWant
} from '@/api/system/commandCenter'
import { getMonitorDeviceAndDataList, selectCameraByDeptId } from '@/api/monitor'
import { selectConfigKey } from '@/api/system/config'
import {
  getResourceagriculture,
  getResourceemergency,
  getResourceenvironment,
  getResourcefire,
  getResourceres,
  getResourcesCounttraffic,
  getResourcewater
} from '@/api/system/datacenter'
import {
  fireControlViewList,
  fireControlViewPointPost,
  getEnvironmentLeader,
  getEnvironmentRy,
  getFirecontrolLeader,
  getFirecontrolRy,
  getForestLeader,
  getForestryRy,
  getPlanList,
  getResourceDetail,
  getResourcesRy,
  getRresourcesRyListByJob,
  getTaskList,
  getTrack,
  getTrafficRy,
  getTrafficRyListByJob,
  getWaterRy,
  getWaterRyListByJob,
  initByCameras,
  notCoverPlaces
} from '@/api/leadex-index'
import Cookies from 'js-cookie'
import { getDicts } from '@/api/system/dict/data'

export default {
    components: {
      supermap,
      TVWall,
      TVWalls,
      TVWallNoRight,
      eventdetailsdialog,
      camerabar,
      monitorlist,
      monitorbar,
      VfastMenu,
      expendbutton,
      cameralist,
    },
    watch: {
      heName(val) {
        this.$refs.treeHe.filter(val);
      },
      luName(val) {
        this.$refs.treeLu.filter(val);
      },
      linName(val) {
        this.$refs.treeLin.filter(val);
      },
      tianName(val) {
        this.$refs.treeTian.filter(val);
      },
    },
    metaInfo() {
      return {
        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"
          }
        ]
      }
    },
    created() {
      this.getheaderTitle;
      this.currentTime();
      this.out1();
      this.out2();
      this.out3();
      this.out4();
      this.out6();
      this.out7();
      this.dept = Cookies.get("deptId");
      this.deptId = Cookies.get("deptId");
      this.userDeptId = Cookies.get("deptId");
      let isDept = this.deptList.filter((item) => item.value == this.dept).length;
      if (isDept == 0) {
        this.$router.push("/newpage");
      }

      /** ----------------------------------摄像头预览开始------------------------------------- */
      const DHWsInstance = DHWs.getInstance();
      this.ws = DHWsInstance;
      window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
      /** ----------------------------------摄像头预览结束------------------------------------- */
    },
    dicts: ["centerdata_project_level", "forest_lin_level", "camera_system"],
    beforeDestroy() {
      clearInterval(this.cgqTimer); //关闭
    },
    data() {
      return {
        resourcesTypeList: [{
            'id': 1,
            'name': 'linye'
          },
          {
            'id': 2,
            'name': 'nongye'
          },
          {
            'id': 3,
            'name': 'shuili'
          },
          {
            'id': 4,
            'name': 'huanbao'
          },
          {
            'id': 5,
            'name': 'yingji'
          },
          {
            'id': 6,
            'name': 'jiaotong'
          },
          {
            'id': 7,
            'name': 'ziyuan'
          },
          {
            'id': 8,
            'name': 'xiaofang'
          }

        ],
        userDeptId: "",
        deptId: "",
        //展开收起
        expandValue: false,
        //按钮选中
        btnGetFocus1: false,
        btnGetFocus2: false,
        btnGetFocus3: false,
        btnGetFocus4: false,
        personnelVisualizationModel: "1",
        personnelVisualizationList: [],
        personneType: "",
        personneTypeList: [],
        personne: "",
        personneList: [],
        cgqTimer: null,
        personneTask: "",
        personneTaskList: [],
        personneTaskTrajectoryList: [],
        localPersonnelVisualizationModel: "",
        //图层checkbox
        layerCheckList: [],
        resourcesList: [],
        pvisible: false,
        markersList: [],
        resourcesType: "1",
        resourcesCheckList: [],
        personList: [],
        headerTitle: "",
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          deptId: null,
          params: {
            areaName: null,
            projectLevel: null,
          },
        },
        queryParams1: {
          pageNum: 1,
          pageSize: 10,
          deptId: null,
          params: {
            projectName: null,
            territoriality: null,
            park: null,
          },
        },
        titlename: "",
        // 四长虚拟结构
        leaderData: [],
        // 下载操作手册列表弹出层
        isShowDownloadList: false,
        // 下载列表
        downloadList: [],
        // 四长概况
        overview: [100, 50, 50, 50],
        // 四长概况比例
        overviewPercentCount: 0,
        // tab默认
        rActiveName: 0,
        // 当前时间
        nowTime: "", //现在时间
        projectName: "",
        projectLevel: null,
        placeList: [{
          value: "365",
          label: "四平市",
        }, ],
        deptList: [{
            value: "365",
            label: "所有县（市）区",
          }, // 365_四平市
          {
            value: "369",
            label: "双辽市",
          }, // 369_双辽市
          {
            value: "371",
            label: "梨树县",
          }, // 371_梨树县
          {
            value: "373",
            label: "铁西区",
          }, // 373_铁西区
          {
            value: "372",
            label: "铁东区",
          }, // 372_铁东区
          {
            value: "370",
            label: "伊通县",
          }, // 370_伊通县
        ],
        place: "365",
        dept: "365",

        // 重点工程
        imgList: [],
        projectTypeList:[
          {value: "市本级",label: "市本级"},
          {value: "铁西区",label: "铁西区"},
          {value: "铁东区",label: "铁东区"},
          {value: "梨树县",label: "梨树县"},
          {value: "双辽市",label: "双辽市"},
          {value: "伊通县",label: "伊通县"},
        ],
        imgLists: [],
        leftVal: 0, // 轮播图盒子的偏移值
        flag: true, // 用来节流防止重复点击
        start: null, // 自动执行下一张定的时器
        imgWidth: 500, // 在这里填写你需要的图片宽度
        ition: 0.8, // 设置轮播图过度时间
        imgShow: 0, // 表示当前显示的图片索引
        weatherinformationLow: 0,
        weatherinformationHigh: 0,
        weatherinformationTemperature: 0,
        weatherinformationPower: 0,
        weatherinformationDirection: 0,

        // 重点区域
        keyAreasList: [],
        keyAreasLists: [],
        keyAreasListList: [],
        num: 0,
        visible_tc: false,
        visible_dw: false,
        visible_slw: false,
        visible_wlw: false,
        visible_ygb: false,
        visible_zy: false,
        // 实时关注弹框
        showModal: false,
        // 四长统计弹框
        showModa2: false,
        // 事件统计弹框
        showModa3: false,
        // 一网通办弹框
        showModa4: false,
        // 重点工程弹框
        showModa5: false,
        showModal6: false,
        showModal7: false,
        // 四长统计tab
        szActiveName: "lin",
        heName: "",
        linName: "",
        luName: "",
        tianName: "",
        // 四长统计 tree
        data: [],
        defaultProps: {
          children: "children",
          label: "label",
        },
        // 实时关注数据
        interestList: [],
        // 实时关注事件总数
        interestTotal: 0,
        // 实时关注 - 当前防火季火灾损失统计
        fireLossStatistics: [],
        // 实时关注 - 起火原因统计
        statisticsCausesFire: [],
        // 实时关注 - 起火场所统计
        statisticsFireSites: [],
        // 实时关注 - 防火季火灾发生情况
        fireSituation: [],

        // 事件统计-事件详情
        eventDetails1: [],
        eventDetails2: [],

        visuForestCloudMonitorBOListSearch: [],
        visuForestCloudMonitorBOList: [],
        // 重点工程简介
        introductionToKeyProjectsTitle: "",
        introductionToKeyProjects: "",
        introductionToKeyProjectsImg: "",

        // 四长概况计划完成度
        fourLengthPlan: [100, 100, 100, 100],
        // 四长统计
        fourLengthStatistics: {
          TotalNumberofPeople: 0,
          list: [{
              num: 0,
              title: "河长责任里程",
            },
            {
              num: 0,
              title: "林长责任里程",
            },
            {
              num: 0,
              title: "路长责任里程",
            },
            {
              num: 0,
              title: "田长责任里程",
            },
          ],
        },
        total1: 0,
        // 四长统计趋势图
        fourLengthTask: [{
            name: "河长",
            value: 0,
          },
          {
            name: "林长",
            value: 0,
          },
          {
            name: "路长",
            value: 0,
          },
          {
            name: "田长",
            value: 0,
          },
        ],
        // 事件统计
        eventStatistics: {
          untreatedNum: 0,
          totalNum: 0,
          processedNum: 0,
          eventList: [],
        },
        total: 0,
        // 一网通办
        networkprocessingData: {},

        /** ----------------------------------摄像头预览开始------------------------------------- */
        //大华
        activePanel: "key1",
        areaName: null,
        isLogin: false,
        cameraParams: [],
        ws: null,
        //海康
        cameraTitle: "",
        cameraVisible: false,
        initCount: 0,
        pubKey: "",
        oWebControl: null,
        /** ----------------------------------摄像头预览结束------------------------------------- */
        lossCount: 0,
        blazesCount: 0,
        fileNameS: "",
        positioning: {
          lon: "",
          lat: ""
        },
        /** ----------------------------------左右侧隐藏------------------------------------- */

        // 首页边栏显隐
        sideShowHome: true,
        // 互联网显隐
        sideShowCamera: false,
        sideShowMonitor: false,
        expandedKeys: [],
        cameraUseList: [],
        broadcastUseList: [],
        broadcastUseCheckList: [],
        cameraUseCheckList: [],
        sensorList: [],
        sensorCheckList: [],
        queryTime: [],
        farmingList: [
          "centerdata_t_farm_agricultural_cooperatives",
          "centerdata_t_farm_botany_protect_info",
          "centerdata_t_farm_enterprise@1",
          "centerdata_t_farm_enterprise@2",
          "centerdata_t_farm_enterprise@3",
          "centerdata_t_farm_filings_livestock",
          "centerdata_t_farm_livestock",
          "centerdata_t_farm_agricultural_supervise",
          "centerdata_t_farm_excrement_dispose",
          "centerdata_t_farm_complex_modification",
          "centerdata_t_farm_greenhouse_film",
          "centerdata_t_farm_agricultural_machinery_info"
        ],
      };
    },

    mounted() {
      // 当前时间
      this.getNowTime(); //调用函数
      this.getheaderTitle();
      // 初始化数据
      this.getByDeptId(-1);

      this.getDicts();
      this.expandClick();

      this.choseLayerSwitchingList_Data([
        "http://121.36.228.94:8090/iserver/services/map-BaiShan/rest/maps/BanShiLinChangLK",
      ]);
      // 重点工程
      this.imgWidth = this.$refs.SwiperBox.width // 自动获取轮播图盒子宽度
      this.gogo();
    },
    methods: {
      openLiveAction() {
        window.open("/live-action", "_blank");
      },
      lonAndLatQueryCamera() {
        console.log(this.$refs.supermap.positioningEntity)
        //经度,整数部分为0-180小数部分为0到15位
        var longreg =
          /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,15})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,15}|180)$/
        if (!longreg.test(this.positioning.lon)) {
          this.$message.warning('经度整数部分为0-180,小数部分为0到15位!')
          return
        }
        //纬度,整数部分为0-90小数部分为0到15位
        var latreg = /^(\-|\+)?([0-8]?\d{1}\.\d{0,15}|90\.0{0,15}|[0-8]?\d{1}|90)$/
        if (!latreg.test(this.positioning.lat)) {
          this.$message.warning('纬度整数部分为0-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 = '1,2,3,4,5,6,7,8'
        initByCameras(params).then(res => {
          if(res.data != null && res.data.length != 0){
            this.$refs.TVWallNoRight.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
      },
      getLocation(event) {
        if (event == 1) {
          this.visible_dw = !this.visible_dw
          this.showModal7 = false;
          this.showModal6 = false;
        } else {
          this.visible_dw = false
        }
        if (!this.visible_dw) {
          this.positioning.lon = ''
          this.positioning.lat = ''
          this.$refs.supermap.clearDW()
        }
        this.$refs.supermap.setIsObtainLaAndLon(this.visible_dw)
      },
      truncatedText(str) {
        if (str.length <= 19) {
          return str;
        } else {
          return str.substring(0, 19) + '...';
        }
      },
      getDicts() {
        let that = this
        let cgqlist = []
        getDicts("camera_use").then(req => {
          that.cameraUseList = req.data
          cgqlist.push.apply(cgqlist, req.data.filter(item => item.dictValue != "2"))
        })
        getDicts("device_type").then(req => {
          cgqlist.push.apply(cgqlist, req.data)
          that.sensorList = cgqlist
        })
        getDicts("broadcast_use").then(req => {
          that.broadcastUseList = req.data
        })
      },
      // 展开收起
      expandClick(value) {
        this.expandValue = !this.expandValue;
        // console.log(value,'===================================================   ============')
      },
      //数据获取
      getMonitorDeviceAndData() {
        let that = this
        that.$refs.supermap.clearG();
        //当左右收起，点击视联网，左右会弹出
        if (!that.expandValue) {
          that.$refs.exb.expandClick();
        }
        that.resourcesCheckList = [];
        that.broadcastUseCheckList = []
        that.cameraUseCheckList = []
        that.sensorCheckList = []
        that.btnGetFocus1 = false;
        that.btnGetFocus2 = !that.btnGetFocus2;
        that.visible_wlw = !that.visible_wlw;
        that.btnGetFocus3 = false;
        that.btnGetFocus4 = false;
        that.showModal7 = false;
        that.showModal6 = false;
        this.getLocation()
        that.resettings();

        if (!that.btnGetFocus2) {
          that.$refs.supermap.clearM();
          that.$refs.supermap.clearMRadius();
          return;
        }
        that.getMonitorDeviceAndDataList();
        clearInterval(that.cgqTimer);
        that.cgqTimer = setInterval(() => {
          that.getMonitorDeviceAndDataList();
        }, 5 * 60 * 1000);
        if (that.sideShowMonitor) {
          that.titleClick();
          return;
        } else {
          that.sideShowHome = false;
          that.sideShowMonitor = true;
          that.sideShowCamera = false;
          that.sensorList.forEach(function(item) {
            that.sensorCheckList.push(item.dictLabel)
          });
        }
        that.$refs.sideShowMonitor.updatePopper();
      },
      getEventReport() {
        console.log(this.queryTime)
        if (this.queryTime == null || this.queryTime.length < 2) {
          this.$modal.msgWarning("请选择时间");
          return
        }
        let start = this.queryTime[0];
        let end = this.queryTime[1];
        selectConfigKey("eventReport").then((res) => {
          window.open(res.data + "/commandCenter/getEventReport?params%5Bstart%5D=" + start + "&params%5Bend%5D=" +
            end);
        });
      },
      getMonitorList(deptId) {
        let list = [];
        let markersList = [];
        let cameraMarkersList = [];
        this.deptId = deptId;
        let deviceTypeList = [];
        let cameraList = [];
        for (var i = 0; i < this.sensorCheckList.length; i++) {
          let data = this.sensorList.filter(item => item.dictLabel == this.sensorCheckList[i])
          if (data.length > 0) {
            if (data[0].dictType == "camera_use") {
              cameraList.push(data[0].dictValue)
            }
            if (data[0].dictType == "device_type") {
              deviceTypeList.push(data[0].dictValue)
            }
          }
        }
        if (deviceTypeList.length == 0 && cameraList.length == 0) {
          for (var i = 0; i < this.sensorList.length; i++) {
            if (this.sensorList[i].dictType == "camera_use") {
              cameraList.push(this.sensorList[i].dictValue)
            }
            if (this.sensorList[i].dictType == "device_type") {
              deviceTypeList.push(this.sensorList[i].dictValue)
            }
          }
        }
        const deviceType = deviceTypeList.join(",");
        const camera = cameraList.join(",");
        getMonitorDeviceAndDataList(deptId, deviceType).then((res) => {
          this.visuForestCloudMonitorBOListSearch = [];
          list = res.data;
          //this.sensorNum = list.length
          list.forEach((item) => {
            let dat = {
              cameraName: item.deviceName,
              longitude: item.longitude,
              latitude: item.latitude,
            };
            this.visuForestCloudMonitorBOListSearch.push(dat);
            let markersMap = {
              lng: 124.59,
              lat: 43.02,
              icon: "marker",
              bindPopupHtml: '<div class="map-tip">' +
                "<span>" +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                "                  <h4>名称：" +
                (item.deviceName ? item.deviceName : "") +
                "</h4>" +
                "                </div>" +
                "                </div>" +
                "                </span>" +
                "<span>" +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                "                  <h4>经纬度：" +
                item.longitude +
                "," +
                item.latitude +
                "</h4>" +
                "                </div>" +
                "                </div>" +
                "                </span>" +
                "</div>",

              click: "",
              parameter: "",
              name: "",
              keepBindPopup: false,
              isAggregation: false,
            };
            if (item.deviceType == 1) {
              // 水质传感器
              markersMap.icon = "sj-icon-map-centerdata_water_quality_sensor";
              if (item.data != null) {
                markersMap.bindPopupHtml +=
                  '<div class="map-tip">' +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>类型：水质传感器" +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>水中PH：" +
                  (item.data.waterPh ?
                    item.data.waterPh +
                    "pH | " +
                    (item.threshold ?
                      item.threshold.waterPhThresholdUp +
                      "pH - " +
                      item.threshold.waterPhThresholdDown +
                      "pH" :
                      "0pH - 0pH") :
                    "0pH | 0pH - 0pH") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>化学需氧量：" +
                  (item.data.cod ? item.data.cod + "mg/L" : "0mg/L") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>氨氮：" +
                  (item.data.ammoniaNitrogen ?
                    item.data.ammoniaNitrogen + "mg/L" :
                    "0mg/L") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>水温：" +
                  (item.data.waterTemperature ?
                    item.data.waterTemperature +
                    "°C | " +
                    (item.threshold ?
                      item.threshold.waterTemperatureThresholdUp +
                      "°C - " +
                      item.threshold.waterTemperatureThresholdDown +
                      "°C" :
                      "0°C - 0°C") :
                    "0°C | 0°C - 0°C") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "</div>";
              }
            } else if (item.deviceType == 8) {
              // 水尺
              markersMap.icon = "sj-icon-map-centerdata_water_gauge";
              markersMap.bindPopupHtml +=
                '<div class="map-tip">' +
                "<span>" +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                "                  <h4>类型：水尺传感器" +
                "</h4>" +
                "                </div>" +
                "                </div>" +
                "                </span>" +
                "<span>" +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                "                  <h4>地址：" +
                (item.address ? item.address : "") +
                "</h4>" +
                "                </div>" +
                "                </div>" +
                "                </span>" +
                "</div>";
            } else if (item.deviceType == "003") {
              // 水文监测设备
              markersMap.icon =
                "sj-icon-map-centerdata_hydrological_monitoring_equipment";
              markersMap.bindPopupHtml +=
                '<div class="map-tip">' +
                "<span>" +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                "                  <h4>类型：水文传感器" +
                "</h4>" +
                "                </div>" +
                "                </div>" +
                "                </span>" +
                "</div>";
            } else if (item.deviceType == 2) {
              // 土壤监测设备
              markersMap.icon =
                "sj-icon-map-centerdata_soil_monitoring_equipment";
              if (item.data != null) {
                markersMap.bindPopupHtml +=
                  '<div class="map-tip">' +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>类型：土壤监测设备" +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>钾含量：" +
                  (item.data.potassium ?
                    item.data.potassium +
                    "mg/kg | " +
                    (item.threshold ?
                      item.threshold.potassiumThresholdUp +
                      "mg/kg - " +
                      item.threshold.potassiumThresholdDown +
                      "mg/kg" :
                      "0mg/kg - 0mg/kg") :
                    "0mg/kg | 0mg/kg - 0mg/kg") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>导电率：" +
                  (item.data.conductivity ?
                    item.data.conductivity +
                    "us/cm | " +
                    (item.threshold ?
                      item.threshold.conductivityThresholdUp +
                      "us/cm - " +
                      item.threshold.conductivityThresholdDown +
                      "us/cm" :
                      "0us/cm - 0us/cm") :
                    "0us/cm | 0us/cm - 0us/cm") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>氮含量：" +
                  (item.data.nitrogen ?
                    item.data.nitrogen +
                    "mg/kg | " +
                    (item.threshold ?
                      item.threshold.nitrogenThresholdUp +
                      "mg/kg - " +
                      item.threshold.nitrogenThresholdDown +
                      "mg/kg" :
                      "0mg/kg - 0mg/kg") :
                    "0mg/kg | 0mg/kg - 0mg/kg") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>温度：" +
                  (item.data.temperature ?
                    item.data.temperature +
                    "°C | " +
                    (item.threshold ?
                      item.threshold.temperatureThresholdUp +
                      "°C - " +
                      item.threshold.temperatureThresholdDown +
                      "°C" :
                      "0°C - 0°C") :
                    "0°C | 0°C - 0°C") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>ph值：" +
                  (item.data.ph ?
                    item.data.ph +
                    "pH | " +
                    (item.threshold ?
                      item.threshold.phThresholdUp +
                      "pH - " +
                      item.threshold.phThresholdDown +
                      "pH" :
                      "0pH - 0pH") :
                    "0pH | 0pH - 0pH") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>湿度：" +
                  (item.data.humidity ? item.data.humidity + "%RH" : "0%RH") +
                  (item.data.humidity ?
                    item.data.humidity +
                    "%RH | " +
                    (item.threshold ?
                      item.threshold.humidityThresholdUp +
                      "%RH - " +
                      item.threshold.humidityThresholdDown +
                      "%RH" :
                      "0%RH - 0%RH") :
                    "0%RH | 0%RH - 0%RH") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>磷含量：" +
                  (item.data.phosphorus ?
                    item.data.phosphorus +
                    "mg/kg | " +
                    (item.threshold ?
                      item.threshold.phosphorusThresholdUp +
                      "mg/kg - " +
                      item.threshold.phosphorusThresholdDown +
                      "mg/kg" :
                      "0mg/kg - 0mg/kg") :
                    "0mg/kg | 0mg/kg - 0mg/kg") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  // "<span>" +
                  // '                  <div class="d-l-con">' +
                  // '                  <div class="d-l-l-text">' +
                  // "                  <h4>电压：" +
                  // (item.data.voltage ? item.data.voltage : "") +
                  // "</h4>" +
                  // "                </div>" +
                  // "                </div>" +
                  // "                </span>"
                  "</div>";
              }
            } else if (item.deviceType == 4) {
              // 病虫害监测站
              markersMap.icon =
                "sj-icon-map-centerdata_pest_and_disease_monitoring_station";
              markersMap.bindPopupHtml +=
                '<div class="map-tip">' +
                "<span>" +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                "                  <h4>类型：病虫害传感器" +
                "</h4>" +
                "                </div>" +
                "                </div>" +
                "                </span>" +
                "</div>";
            } else if (item.deviceType == 5) {
              // 大气传感器
              markersMap.icon = "sj-icon-map-centerdata_atmospheric_sensor";
              if (item.data != null) {
                markersMap.bindPopupHtml +=
                  '<div class="map-tip">' +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>类型：大气传感器" +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>二氧化硫：" +
                  (item.data.sulfurDioxide ?
                    item.data.sulfurDioxide + "ug/m³" :
                    "0ug/m³") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>一氧化碳：" +
                  (item.data.carbonMonoxide ?
                    item.data.carbonMonoxide + "ug/m³" :
                    "0ug/m³") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>温度：" +
                  (item.data.temperature ?
                    item.data.temperature +
                    "°C | " +
                    (item.threshold ?
                      item.threshold.temperatureThresholdUp +
                      "°C - " +
                      item.threshold.temperatureThresholdDown +
                      "°C" :
                      "0°C - 0°C") :
                    "0°C | 0°C - 0°C") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>二氧化氮：" +
                  (item.data.nitrogenDioxide ?
                    item.data.nitrogenDioxide + "ug/m³" :
                    "0ug/m³") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  // "<span>" +
                  // '                  <div class="d-l-con">' +
                  // '                  <div class="d-l-l-text">' +
                  // "                  <h4>风向：" +
                  // (item.data.windDirection ? item.data.windDirection : "") +
                  // "</h4>" +
                  // "                </div>" +
                  // "                </div>" +
                  // "                </span>" +
                  // "<span>" +
                  // '                  <div class="d-l-con">' +
                  // '                  <div class="d-l-l-text">' +
                  // "                  <h4>风速：" +
                  // (item.data.windSpeed ? item.data.windSpeed : "") +
                  // "</h4>" +
                  // "                </div>" +
                  // "                </div>" +
                  // "                </span>" +
                  "</div>";
              }
            } else if (item.deviceType == 6) {
              // 水压传感器
              markersMap.icon = "sj-icon-map-centerdata_water_pressure_sensor";
              if (item.data != null) {
                markersMap.bindPopupHtml +=
                  '<div class="map-tip">' +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>类型：水压传感器" +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  '<div class="map-tip">' +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>电池电量：" +
                  (item.data.batteryValue ? item.data.batteryValue + "%" : "0%") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  // "<span>" +
                  // '                  <div class="d-l-con">' +
                  // '                  <div class="d-l-l-text">' +
                  // "                  <h4>上限警报使能：" +
                  // (item.data.thresholdHighEnable ?
                  //   item.data.thresholdHighEnable + "MPa" :
                  //   "0MPa") +
                  // "</h4>" +
                  // "                </div>" +
                  // "                </div>" +
                  // "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4 style='color:" + (item.data.hydraulicThresholdMax >= item.data
                    .hydraulicValue >= item.data.hydraulicThresholdMin ? 'green' : 'red') + "'" + ">水压力值：" +
                  (item.data.hydraulicValue ? item.data.hydraulicValue + "MPa" : "0MPa") + '   | ' + (item.data
                    .hydraulicThresholdMin ? item.data.hydraulicThresholdMin + "MPa" : "0MPa") + "-" + (item
                    .data.hydraulicThresholdMax ? item.data.hydraulicThresholdMax + "MPa" : "0MPa") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "</div>";
              }
            } else if (item.deviceType == 7) {
              //水流速传感器
              markersMap.icon = "sj-icon-map-centerdata_water_flow_rate";
              if (item.data != null) {
                markersMap.bindPopupHtml +=
                  '<div class="map-tip">' +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>类型：水流速传感器" +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  // "<span>" +
                  // '                  <div class="d-l-con">' +
                  // '                  <div class="d-l-l-text">' +
                  // "                  <h4>两流量累计之和：" +
                  // (item.data.Q ? item.data.Q : "") +
                  // "</h4>" +
                  // "                </div>" +
                  // "                </div>" +
                  // "                </span>" +
                  // "<span>" +
                  // '                  <div class="d-l-con">' +
                  // '                  <div class="d-l-l-text">' +
                  // "                  <h4>瞬时流量：" +
                  // (item.data.Q1 ? item.data.Q1+"m3/s" : "") +
                  // "</h4>" +
                  // "                </div>" +
                  // "                </div>" +
                  // "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>瞬时流速：" +
                  (item.data.V1 ? item.data.V1 + "m/s" : "0m/s") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>瞬时流量：" +
                  (item.data.Q ? item.data.Q + "m³/s" : "0m³/s") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span></div>";
              }
            }
            markersMap.lng = item.longitude;
            markersMap.lat = item.latitude;
            markersList.push(markersMap);
          });
          console.log(markersList);
        });
        selectCameraByDeptId(deptId, camera).then((res) => {
          //根据设备类型查看列表
          list = res.data;
          //this.sensorNum = list.length
          list.forEach((item) => {
            if (item.cameraUse == 1) {
              let dat = {
                cameraName: item.cameraName,
                longitude: item.longitude,
                latitude: item.latitude,
              };
              // this.visuForestCloudCameraBOListSearch.push(dat);
            }
          });
          if (res.data != null && res.data.length > 0) {
            for (let i = 0; i < res.data.length; i++) {
              if (res.data[i].cameraUse == 1) {
                let markersMap = {
                  lng: 124.59,
                  lat: 43.02,
                  icon: "sj-icon-map-centerdata-slmonitor",
                  bindPopupHtml: "",
                  click: "preview",
                  parameter: "",
                  name: i,
                  keepBindPopup: false,
                  isAggregation: false,
                };
                if (res.data[i].channelCode != null) {
                  markersMap.parameter = {
                    code: res.data[i].cameraCode,
                    name: res.data[i].cameraName,
                    type: res.data[i].cameraType,
                  };
                } else {
                  markersMap.parameter = [];
                }

                markersMap.lng = res.data[i].longitude;
                markersMap.lat = res.data[i].latitude;
                markersMap.radius = res.data[i].cameraRadius;
                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].cameraName +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>网络运营商：" +
                  (res.data[i].operatorType == "1" ?
                    "联通" :
                    res.data[i].operatorType == "2" ?
                    "移动" :
                    "电信") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>摄像头半径：" +
                  res.data[i].cameraRadius +
                  "米</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "</div>";
                cameraMarkersList.push(markersMap);
              }
            }
          }
        });
        setTimeout(() => {
          this.$refs.supermap.clearM();
          this.$refs.supermap.clearMRadius();
          this.$refs.supermap.setMarkers(markersList);
          this.$refs.supermap.setMarkersRadius(cameraMarkersList);
        }, 5000);
      },
      getMonitorDeviceAndDataList() {
        // if (!this.sideShowMonitor) {
        //   this.$message.warning("请先选择物联网")
        //   return
        // }
        let list = [];
        let markersList = [];
        let cameraMarkersList = [];
        let deviceTypeList = []
        let cameraList = []
        this.visuForestCloudMonitorBOListSearch = [];
        this.visuForestCloudMonitorBOList = [];
        for (var i = 0; i < this.sensorCheckList.length; i++) {
          let data = this.sensorList.filter(item => item.dictLabel == this.sensorCheckList[i])
          if (data.length > 0) {
            if (data[0].dictType == "camera_use") {
              cameraList.push(data[0].dictValue)
            }
            if (data[0].dictType == "device_type") {
              deviceTypeList.push(data[0].dictValue)
            }
          }
        }
        if (deviceTypeList.length == 0 && cameraList.length == 0) {
          for (var i = 0; i < this.sensorList.length; i++) {
            if (this.sensorList[i].dictType == "camera_use") {
              cameraList.push(this.sensorList[i].dictValue)
            }
            if (this.sensorList[i].dictType == "device_type") {
              deviceTypeList.push(this.sensorList[i].dictValue)
            }
          }
        }
        const deviceType = deviceTypeList.join(",");
        const camera = cameraList.join(",");

        if (deviceType != "" && deviceType != null && deviceType != undefined) {
          getMonitorDeviceAndDataList(this.deptId, deviceType).then((res) => {
            list = res.data;
            //this.sensorNum = list.length
            list.forEach((item) => {
              let dat = {
                cameraName: item.deviceName,
                longitude: item.longitude,
                latitude: item.latitude,
              };
              this.visuForestCloudMonitorBOListSearch.push(dat);
              this.visuForestCloudMonitorBOList.push(dat);
              let markersMap = {
                lng: 124.59,
                lat: 43.02,
                icon: "marker",
                bindPopupHtml: '<div class="map-tip">' +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>名称：" +
                  (item.deviceName ? item.deviceName : "") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>经纬度：" +
                  item.longitude +
                  "," +
                  item.latitude +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "</div>",

                click: "",
                parameter: "",
                name: "",
                keepBindPopup: false,
                isAggregation: false,
              };
              if (item.deviceType == 1) {
                // 水质传感器
                markersMap.icon = "sj-icon-map-centerdata_water_quality_sensor";
                if (item.data != null) {
                  markersMap.bindPopupHtml +=
                    '<div class="map-tip">' +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>类型：水质传感器" +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>水中PH：" +
                    (item.data.waterPh ?
                      item.data.waterPh +
                      "pH | " +
                      (item.threshold ?
                        item.threshold.waterPhThresholdUp +
                        "pH - " +
                        item.threshold.waterPhThresholdDown +
                        "pH" :
                        "0pH - 0pH") :
                      "0pH | 0pH - 0pH") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>化学需氧量：" +
                    (item.data.cod ? item.data.cod + "mg/L" : "0mg/L") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>氨氮：" +
                    (item.data.ammoniaNitrogen ?
                      item.data.ammoniaNitrogen + "mg/L" :
                      "0mg/L") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>水温：" +
                    (item.data.waterTemperature ?
                      item.data.waterTemperature +
                      "°C | " +
                      (item.threshold ?
                        item.threshold.waterTemperatureThresholdUp +
                        "°C - " +
                        item.threshold.waterTemperatureThresholdDown +
                        "°C" :
                        "0°C - 0°C") :
                      "0°C | 0°C - 0°C") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "</div>";
                }
              } else if (item.deviceType == 8) {
                // 水尺
                markersMap.icon = "sj-icon-map-centerdata_water_gauge";
                markersMap.bindPopupHtml +=
                  '<div class="map-tip">' +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>类型：水尺传感器" +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>地址：" +
                  (item.address ? item.address : "") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "</div>";
              } else if (item.deviceType == "003") {
                // 水文监测设备
                markersMap.icon =
                  "sj-icon-map-centerdata_hydrological_monitoring_equipment";
                markersMap.bindPopupHtml +=
                  '<div class="map-tip">' +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>类型：水文传感器" +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "</div>";
              } else if (item.deviceType == 2) {
                // 土壤监测设备
                markersMap.icon =
                  "sj-icon-map-centerdata_soil_monitoring_equipment";
                if (item.data != null) {
                  markersMap.bindPopupHtml +=
                    '<div class="map-tip">' +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>类型：土壤监测设备" +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>钾含量：" +
                    (item.data.potassium ?
                      item.data.potassium +
                      "mg/kg | " +
                      (item.threshold ?
                        item.threshold.potassiumThresholdUp +
                        "mg/kg - " +
                        item.threshold.potassiumThresholdDown +
                        "mg/kg" :
                        "0mg/kg - 0mg/kg") :
                      "0mg/kg | 0mg/kg - 0mg/kg") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>导电率：" +
                    (item.data.conductivity ?
                      item.data.conductivity +
                      "us/cm | " +
                      (item.threshold ?
                        item.threshold.conductivityThresholdUp +
                        "us/cm - " +
                        item.threshold.conductivityThresholdDown +
                        "us/cm" :
                        "0us/cm - 0us/cm") :
                      "0us/cm | 0us/cm - 0us/cm") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>氮含量：" +
                    (item.data.nitrogen ?
                      item.data.nitrogen +
                      "mg/kg | " +
                      (item.threshold ?
                        item.threshold.nitrogenThresholdUp +
                        "mg/kg - " +
                        item.threshold.nitrogenThresholdDown +
                        "mg/kg" :
                        "0mg/kg - 0mg/kg") :
                      "0mg/kg | 0mg/kg - 0mg/kg") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>温度：" +
                    (item.data.temperature ?
                      item.data.temperature +
                      "°C | " +
                      (item.threshold ?
                        item.threshold.temperatureThresholdUp +
                        "°C - " +
                        item.threshold.temperatureThresholdDown +
                        "°C" :
                        "0°C - 0°C") :
                      "0°C | 0°C - 0°C") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>ph值：" +
                    (item.data.ph ?
                      item.data.ph +
                      "pH | " +
                      (item.threshold ?
                        item.threshold.phThresholdUp +
                        "pH - " +
                        item.threshold.phThresholdDown +
                        "pH" :
                        "0pH - 0pH") :
                      "0pH | 0pH - 0pH") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>湿度：" +
                    (item.data.humidity ? item.data.humidity + "%RH" : "0%RH") +
                    (item.data.humidity ?
                      item.data.humidity +
                      "%RH | " +
                      (item.threshold ?
                        item.threshold.humidityThresholdUp +
                        "%RH - " +
                        item.threshold.humidityThresholdDown +
                        "%RH" :
                        "0%RH - 0%RH") :
                      "0%RH | 0%RH - 0%RH") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>磷含量：" +
                    (item.data.phosphorus ?
                      item.data.phosphorus +
                      "mg/kg | " +
                      (item.threshold ?
                        item.threshold.phosphorusThresholdUp +
                        "mg/kg - " +
                        item.threshold.phosphorusThresholdDown +
                        "mg/kg" :
                        "0mg/kg - 0mg/kg") :
                      "0mg/kg | 0mg/kg - 0mg/kg") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    // "<span>" +
                    // '                  <div class="d-l-con">' +
                    // '                  <div class="d-l-l-text">' +
                    // "                  <h4>电压：" +
                    // (item.data.voltage ? item.data.voltage : "") +
                    // "</h4>" +
                    // "                </div>" +
                    // "                </div>" +
                    // "                </span>"
                    "</div>";
                }
              } else if (item.deviceType == 4) {
                // 病虫害监测站
                markersMap.icon =
                  "sj-icon-map-centerdata_pest_and_disease_monitoring_station";
                markersMap.bindPopupHtml +=
                  '<div class="map-tip">' +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>类型：病虫害传感器" +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "</div>";
              } else if (item.deviceType == 5) {
                // 大气传感器
                markersMap.icon = "sj-icon-map-centerdata_atmospheric_sensor";
                if (item.data != null) {
                  markersMap.bindPopupHtml +=
                    '<div class="map-tip">' +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>类型：大气传感器" +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>二氧化硫：" +
                    (item.data.sulfurDioxide ?
                      item.data.sulfurDioxide + "ug/m³" :
                      "0ug/m³") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>一氧化碳：" +
                    (item.data.carbonMonoxide ?
                      item.data.carbonMonoxide + "ug/m³" :
                      "0ug/m³") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>温度：" +
                    (item.data.temperature ?
                      item.data.temperature +
                      "°C | " +
                      (item.threshold ?
                        item.threshold.temperatureThresholdUp +
                        "°C - " +
                        item.threshold.temperatureThresholdDown +
                        "°C" :
                        "0°C - 0°C") :
                      "0°C | 0°C - 0°C") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>二氧化氮：" +
                    (item.data.nitrogenDioxide ?
                      item.data.nitrogenDioxide + "ug/m³" :
                      "0ug/m³") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    // "<span>" +
                    // '                  <div class="d-l-con">' +
                    // '                  <div class="d-l-l-text">' +
                    // "                  <h4>风向：" +
                    // (item.data.windDirection ? item.data.windDirection : "") +
                    // "</h4>" +
                    // "                </div>" +
                    // "                </div>" +
                    // "                </span>" +
                    // "<span>" +
                    // '                  <div class="d-l-con">' +
                    // '                  <div class="d-l-l-text">' +
                    // "                  <h4>风速：" +
                    // (item.data.windSpeed ? item.data.windSpeed : "") +
                    // "</h4>" +
                    // "                </div>" +
                    // "                </div>" +
                    // "                </span>" +
                    "</div>";
                }
              } else if (item.deviceType == 6) {
                // 水压传感器
                markersMap.icon = "sj-icon-map-centerdata_water_pressure_sensor";
                if (item.data != null) {
                  markersMap.bindPopupHtml +=
                    '<div class="map-tip">' +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>类型：水压传感器" +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    '<div class="map-tip">' +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>下限警报使能：" +
                    (item.data.thresholdLowEnable ?
                      item.data.thresholdLowEnable + "MPa" :
                      "0MPa") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>上限警报使能：" +
                    (item.data.thresholdHighEnable ?
                      item.data.thresholdHighEnable + "MPa" :
                      "0MPa") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    // "<span>" +
                    // '                  <div class="d-l-con">' +
                    // '                  <div class="d-l-l-text">' +
                    // "                  <h4>信号强度：" +
                    // (item.data.signalPower ? item.data.signalPower : "") +
                    // "</h4>" +
                    // "                </div>" +
                    // "                </div>" +
                    // "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>水压力值：" +
                    (item.data.hydraulicValue ?
                      item.data.hydraulicValue + "MPa | 0.5MPa - 2.0MPa" :
                      "0MPa | 0.5MPa - 2.0MPa") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "</div>";
                }
              } else if (item.deviceType == 7) {
                //水流速传感器
                markersMap.icon = "sj-icon-map-centerdata_water_flow_rate";
                if (item.data != null) {
                  markersMap.bindPopupHtml +=
                    '<div class="map-tip">' +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>类型：水流速传感器" +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    // "<span>" +
                    // '                  <div class="d-l-con">' +
                    // '                  <div class="d-l-l-text">' +
                    // "                  <h4>两流量累计之和：" +
                    // (item.data.Q ? item.data.Q : "") +
                    // "</h4>" +
                    // "                </div>" +
                    // "                </div>" +
                    // "                </span>" +
                    // "<span>" +
                    // '                  <div class="d-l-con">' +
                    // '                  <div class="d-l-l-text">' +
                    // "                  <h4>瞬时流量：" +
                    // (item.data.Q1 ? item.data.Q1+"m3/s" : "") +
                    // "</h4>" +
                    // "                </div>" +
                    // "                </div>" +
                    // "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>瞬时流速：" +
                    (item.data.V1 ? item.data.V1 + "m/s" : "0m/s") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>瞬时流量：" +
                    (item.data.Q ? item.data.Q + "m³/s" : "0m³/s") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span></div>";
                }
              }
              markersMap.lng = item.longitude;
              markersMap.lat = item.latitude;
              markersList.push(markersMap);
            });
            console.log(markersList);
          });
        }
        if (camera != "" && camera != null && camera != undefined) {
          selectCameraByDeptId(this.dept, camera).then((res) => {
            //根据设备类型查看列表
            list = res.data;
            //this.sensorNum = list.length
            list.forEach((item) => {
              if (item.cameraUse == 1) {
                let dat = {
                  cameraName: item.cameraName,
                  longitude: item.longitude,
                  latitude: item.latitude,
                };
                this.visuForestCloudMonitorBOListSearch.push(dat);
                this.visuForestCloudMonitorBOList.push(dat);
              }
            });
            if (res.data != null && res.data.length > 0) {
              for (let i = 0; i < res.data.length; i++) {
                if (res.data[i].cameraUse != 2) {
                  let markersMap = {
                    lng: 124.59,
                    lat: 43.02,
                    icon: "sj-icon-map-centerdata-slmonitor",
                    bindPopupHtml: "",
                    click: "preview",
                    parameter: "",
                    name: i,
                    keepBindPopup: false,
                    isAggregation: false,
                  };
                  if (res.data[i].cameraUse == 1) {
                    if (res.data[i].workingStatus == 0) {
                      markersMap.icon = "sj-icon-map-centerdata-slmonitor";
                    } else {
                      markersMap.icon = "sj-icon-map-centerdata-slmonitor-not";
                      markersMap.click = ""
                    }
                  } else if (res.data[i].cameraUse == 3) {
                    if (res.data[i].workingStatus == 0) {
                      markersMap.icon = "sj-icon-map-centerdata-slmonitor-traffic";
                    } else {
                      markersMap.icon = "sj-icon-map-centerdata-slmonitor-traffic-not";
                      markersMap.click = ""
                    }
                  } else if (res.data[i].cameraUse == 4) {
                    if (res.data[i].workingStatus == 0) {
                      markersMap.icon = 'sj-icon-map-centerdata-sand-quarry-camera'
                    } else {
                      markersMap.icon = 'sj-icon-map-centerdata-sand-quarry-camera-not'
                      markersMap.click = ""
                    }
                  } else if (res.data[i].cameraUse == 5) {
                    if (res.data[i].workingStatus == 0) {
                      markersMap.icon = 'sj-icon-map-centerdata-river_camera'
                    } else {
                      markersMap.icon = 'sj-icon-map-centerdata-river_camera_not'
                      markersMap.click = ""
                    }
                  }
                  if (res.data[i].channelCode != null) {
                    markersMap.parameter = {
                      code: res.data[i].cameraCode,
                      name: res.data[i].cameraName,
                      type: res.data[i].cameraType,
                    };
                  } else {
                    markersMap.parameter = [];
                  }

                  markersMap.lng = res.data[i].longitude;
                  markersMap.lat = res.data[i].latitude;
                  markersMap.radius = res.data[i].cameraRadius;
                  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].cameraName +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>网络运营商：" +
                    (res.data[i].operatorType == "1" ?
                      "联通" :
                      res.data[i].operatorType == "2" ?
                      "移动" :
                      "电信") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>摄像头半径：" +
                    res.data[i].cameraRadius +
                    "米</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "</div>";
                  cameraMarkersList.push(markersMap);
                }
              }
            }
          });
        }
        setTimeout(() => {
          this.$refs.supermap.clearM();
          this.$refs.supermap.clearMRadius();
          this.$refs.supermap.setMarkers(markersList);
          this.$refs.supermap.setMarkersRadius(cameraMarkersList);
        }, 5000);
      },
      // 获取人员类型
      selectPersonnelTypeList(data) {
        this.showModal7 = false;
        this.showModal6 = false;
        this.getLocation()
        let that = this;
        if (
          that.localPersonnelVisualizationModel == data ||
          that.localPersonnelVisualizationModel ==
          that.personnelVisualizationModel
        ) {
          return;
        }
        that.localPersonnelVisualizationModel = data;
        that.personneType = "";
        that.personneTypeList = [];
        that.personne = "";
        that.personneList = [];
        that.personneTask = "";
        that.personneTaskList = [];
        that.$refs.supermap.clearC();
        that.$refs.supermap.clearTwoC();
        that.personneTaskTrajectoryList = [];
        if (data == null) {
          data = 1;
          that.personnelVisualizationModel = "1";
        }
        if (data == 1) {
          // 林业
          getForestryRy(that.dept).then((res) => {
            if (res.data.visuForestCloudRYBO.length < 1) {
              return;
            }
            that.personneType = res.data.visuForestCloudRYBO[0].jobValue;
            that.personneTypeList = res.data.visuForestCloudRYBO;
            that.selectPersonneList(res.data.visuForestCloudRYBO[0].jobValue);
          });
        } else if (data == 2) {
          // 农业
        } else if (data == 3) {
          // 水利
          getWaterRy(that.dept).then((res) => {
            if (res.data.ryList.length < 1) {
              return;
            }
            that.personneType = res.data.ryList[0].dictType;
            for (let i = 0; i < res.data.ryList.length; i++) {
              let data = {
                job: "",
                jobValue: "",
              };
              data.job = res.data.ryList[i].job;
              data.jobValue = res.data.ryList[i].dictType;
              console.log(data);
              that.personneTypeList.push(data);
            }
            that.selectPersonneList(res.data.ryList[0].dictType);
          });
        } else if (data == 4) {
          // 环保
          getEnvironmentRy(that.dept).then((res) => {
            if (res.data.user.length < 1) {
              return;
            }
            that.personneType = res.data.user[0].jobValue;
            that.personneTypeList = res.data.user;
            that.selectPersonneList(res.data.user[0].jobValue);
          });
        } else if (data == 5) {
          // 应急
        } else if (data == 6) {
          // 交通
          getTrafficRy(that.dept).then((res) => {
            if (res.data.ryList.length < 1) {
              return;
            }
            that.personneType = res.data.ryList[0].dictType;
            for (let i = 0; i < res.data.ryList.length; i++) {
              let data = {
                job: "",
                jobValue: "",
              };
              data.job = res.data.ryList[i].job;
              data.jobValue = res.data.ryList[i].dictType;
              console.log(data);
              that.personneTypeList.push(data);
            }
            that.selectPersonneList(res.data.ryList[0].dictType);
          });
        } else if (data == 7) {
          // 资源
          getResourcesRy(that.dept).then((res) => {
            if (res.data.ryList.length < 1) {
              return;
            }
            that.personneType = res.data.ryList[0].dictType;
            for (let i = 0; i < res.data.ryList.length; i++) {
              let data = {
                job: "",
                jobValue: "",
              };
              data.job = res.data.ryList[i].job;
              data.jobValue = res.data.ryList[i].dictType;
              that.personneTypeList.push(data);
            }
            that.selectPersonneList(res.data.ryList[0].dictType);
          });
        } else if (data == 8) {
          // 消防
          getFirecontrolRy(that.dept).then((res) => {
            if (res.data.ryList.length < 1) {
              return;
            }
            that.personneType = res.data.ryList[0].jobValue;
            that.personneTypeList = res.data.ryList;
            that.selectPersonneList(res.data.ryList[0].jobValue);
          });
        }
      },
      // 获取类型下的人员列表
      selectPersonneList(linJob) {
        let that = this;
        let data = this.personnelVisualizationModel;
        that.personne = "";
        that.personneList = [];
        that.personneTask = "";
        that.personneTaskList = [];
        that.personneTaskTrajectoryList = [];
        that.$refs.supermap.clearC();
        that.$refs.supermap.clearTwoC();
        if (data == 1) {
          // 林业
          getForestLeader(linJob, that.dept).then((res) => {
            if (res.data.length < 1) {
              return;
            }
            that.personne = res.data[0].userId;
            that.personneList = res.data;
            that.selectPersonneTaskList(res.data[0].userId);
          });
        } else if (data == 2) {
          // 农业
        } else if (data == 3) {
          // 水利
          getWaterRyListByJob(linJob, that.dept).then((res) => {
            if (res.data.length < 1) {
              return;
            }
            that.personne = res.data[0].userId;
            for (let i = 0; i < res.data.length; i++) {
              let data = {
                userId: "",
                nickName: "",
              };
              data.nickName = res.data[i].name;
              data.userId = res.data[i].userId;
              that.personneList.push(data);
            }
            that.selectPersonneTaskList(res.data[0].userId);
          });
        } else if (data == 4) {
          // 环保
          getEnvironmentLeader(linJob, that.dept).then((res) => {
            if (res.data.length < 1) {
              return;
            }
            that.personne = res.data[0].userId;
            that.personneList = res.data;
            that.selectPersonneTaskList(res.data[0].userId);
          });
        } else if (data == 5) {
          // 应急
        } else if (data == 6) {
          // 交通
          getTrafficRyListByJob(linJob, that.dept).then((res) => {
            if (res.data.length < 1) {
              return;
            }
            that.personne = res.data[0].userId;
            for (let i = 0; i < res.data.length; i++) {
              let data = {
                userId: "",
                nickName: "",
              };
              data.nickName = res.data[i].name;
              data.userId = res.data[i].userId;
              that.personneList.push(data);
            }
            that.selectPersonneTaskList(res.data[0].userId);
          });
        } else if (data == 7) {
          // 资源
          getRresourcesRyListByJob(linJob, that.dept).then((res) => {
            if (res.data.length < 1) {
              return;
            }
            that.personne = res.data[0].userId;
            for (let i = 0; i < res.data.length; i++) {
              let data = {
                userId: "",
                nickName: "",
              };
              data.nickName = res.data[i].name;
              data.userId = res.data[i].userId;
              that.personneList.push(data);
            }
            that.selectPersonneTaskList(res.data[0].userId);
          });
        } else if (data == 8) {
          // 消防
          getFirecontrolLeader(linJob, that.dept).then((res) => {
            if (res.data.length < 1) {
              return;
            }
            that.personne = res.data[0].userId;
            that.personneList = res.data;
            that.selectPersonneTaskList(res.data[0].userId);
          });
        }
      },
      // 获取人员任务列表
      selectPersonneTaskList(userId) {
        let that = this;
        let data = this.personnelVisualizationModel;
        that.personneTask = "";
        that.personneTaskList = [];
        that.personneTaskTrajectoryList = [];
        that.$refs.supermap.clearC();
        that.$refs.supermap.clearTwoC();
        if (data == 1) {
          // 林业
          getPlanList(userId, 1).then((res) => {
            if (res.data.length < 1) {
              return;
            }
            that.personneTask = res.data[0].id;
            that.personneTaskList = res.data;
            that.getTaskTrajectory(res.data[0]);
            that.getTaskList(this.personneTask);
          });
        } else if (data == 2) {
          // 农业
        } else if (data == 3) {
          // 水利
          getPlanList(userId, 2).then((res) => {
            if (res.data.length < 1) {
              return;
            }
            that.personneTask = res.data[0].id;
            that.personneTaskList = res.data;
            that.getTaskTrajectory(res.data[0]);
            that.getTaskList(this.personneTask);
          });
        } else if (data == 4) {
          // 环保
          getPlanList(userId, 4).then((res) => {
            if (res.data.length < 1) {
              return;
            }
            that.personneTask = res.data[0].id;
            that.personneTaskList = res.data;
            that.getTaskTrajectory(res.data[0]);
            that.getTaskList(this.personneTask);
          });
        } else if (data == 5) {
          // 应急
        } else if (data == 6) {
          // 交通
          getPlanList(userId, 3).then((res) => {
            if (res.data.length < 1) {
              return;
            }
            that.personneTask = res.data[0].id;
            that.personneTaskList = res.data;
            that.getTaskTrajectory(res.data[0]);
            that.getTaskList(this.personneTask);
          });
        } else if (data == 7) {
          // 资源
          getPlanList(userId, 6).then((res) => {
            if (res.data.length < 1) {
              return;
            }
            that.personneTask = res.data[0].id;
            that.personneTaskList = res.data;
            that.getTaskTrajectory(res.data[0]);
            that.getTaskList(this.personneTask);
          });
        } else if (data == 8) {
          // 消防
          getPlanList(userId, 5).then((res) => {
            if (res.data.length < 1) {
              return;
            }
            that.personneTask = res.data[0].id;
            that.personneTaskList = res.data;
            that.getTaskTrajectory(res.data[0]);
            that.getTaskList(this.personneTask);
          });
        }
      },
      search() {
        this.getTaskList(this.personneTask);
      },
      resettings() {
        // this.personnelVisualizationModel = ''
        // this.personneType = ''
        // this.personneTypeList = []
        // this.personne = ''
        // this.personneList = []
        // this.personneTask = ''
        // this.personneTaskList = []
        // this.personneTaskTrajectoryList = []
        this.$refs.supermap.clearC();
        this.$refs.supermap.clearTwoC();
      },
      // 获取人员任务轨迹列表
      getTaskList(taskId) {
        let that = this;
        getTaskList(taskId, that.personne).then((res) => {
          that.personneTaskTrajectoryList = res.data;
        });
      },
      // 获取人员任务轨迹
      getTrack(id) {
        let that = this;
        getTrack(id).then((res) => {
          let connectList = [];
          if (res.data != null && res.data.length > 0) {
            for (let i = 0; i < res.data.length; i++) {
              connectList.push(res.data[i].longitude);
              connectList.push(res.data[i].latitude);
            }
            setTimeout(() => {
              that.visible_tc = false;
              that.$refs.supermap.clearTwoC();
              that.$refs.supermap.setConnectTwoList(connectList, "#f40", 0.8);
              that.$refs.supermap.dropLocation(
                res.data[0].latitude,
                res.data[0].longitude
              );
            }, 1000);
          } else {
            that.visible_tc = false;
            that.$refs.supermap.clearTwoC();
          }
        });
      },
      getTaskTrajectory(task) {
        let list = JSON.parse(task.patrolTrajectory);
        let data = [];
        for (var i = 0; i < list.length; i++) {
          data.push(list[i].lng);
          data.push(list[i].lat);
        }
        setTimeout(() => {
          this.$refs.supermap.clearC();
          this.$refs.supermap.clearTwoC();
          this.$refs.supermap.setConnectList(data, "#04f", 0.8);
        }, 1000);
      },
      //获取标题
      getheaderTitle() {
        selectConfigKey("titlename").then((res) => {
          this.headerTitle = res.data;
        });
      },
      choseLayerSwitchingList_Data(urlList) {
        //选择图层(传递数组)
        setTimeout(() => {
          this.$refs.supermap.layerSwitchingList_Data(urlList);
        }, 1000);
      },
      sewageOutletClick(data) {
        console.log(data);
        const params = Object.assign({});
        params.longitude = data.longitude;
        params.latitude = data.latitude;
        let data1 = null
        getResourceDetail(data.indexName, data.id).then(res => {
          data1 = res.data
          const treeLabels = [{
            id: null,
            labelCode: "999",
            labelName: "电视墙",
            cameraType: null,
            parentLabelCode: "",
          }, ];
          const labelChannels = [];
          // if (0 < data1.cameras.length) {
            for (let i in data1.cameras) {
              treeLabels.push({
                id: null,
                labelCode: data1.cameras[i].cameraCode,
                labelName: data1.cameras[i].cameraName,
                cameraType: data1.cameras[i].cameraType,
                parentLabelCode: "999",
              });
              labelChannels.push({
                labelCode: data1.cameras[i].cameraCode,
                channelDates: [{
                  channelCode: data1.cameras[i].cameraCode,
                  channelName: data1.cameras[i].cameraName,
                  channelSn: null,
                  cameraType: data1.cameras[i].cameraType,
                  online: "1",
                  cameraCode: "1",
                }, ],
              });
            }
            const dianshiqiang = [{
              switchTab: "2",
              treeLabels: treeLabels,
              labelChannels: labelChannels,
            }, ]
            this.$refs.TVWalls.showTVWall2(
              dianshiqiang, {
                longitude: params.longitude,
                latitude: params.latitude
              },
              data1.detail
            );
          // }
        })
      },
      sewageOutletClickfarming(data) {
        const params = Object.assign({});
        params.longitude = data.longitude;
        params.latitude = data.latitude;
        const treeLabels = [{
          id: null,
          labelCode: "999",
          labelName: "电视墙",
          cameraType: null,
          parentLabelCode: "",
        }, ];
        const labelChannels = [];
        for (let i in data.cameraList) {
          treeLabels.push({
            id: null,
            labelCode: data.cameraList[i].cameraCode,
            labelName: data.cameraList[i].cameraName,
            cameraType: data.cameraList[i].cameraType,
            parentLabelCode: "999",
          });
          labelChannels.push({
            labelCode: data.cameraList[i].cameraCode,
            channelDates: [{
              channelCode: data.cameraList[i].cameraCode,
              channelName: data.cameraList[i].cameraName,
              channelSn: null,
              cameraType: data.cameraList[i].cameraType,
              online: "1",
              cameraCode: "1",
            }, ],
          });
        }
        const dianshiqiang = [{
          switchTab: "2",
          treeLabels: treeLabels,
          labelChannels: labelChannels,
        }, ];
        if (data.cameraList.length > 0) {
          this.$refs.TVWalls.showTVWall1(
            data.longitude,
            data.latitude,
            dianshiqiang,
            param
          );
        }
      },

      /* 电视墙替换开始 */
      showTVWallMine(channelCode, channelName, cameraType) {
        // let channelCode = '6044981090191552';
        // let channelName = '复兴大桥中段-交通事故';
        let tvListJson = [{
          switchTab: "2",
          treeLabels: [{
              id: null,
              labelCode: "999",
              labelName: "电视墙",
              cameraType: null,
              parentLabelCode: "",
            },
            {
              id: "spcamera00010",
              labelCode: channelCode,
              labelName: channelName,
              cameraType: cameraType,
              parentLabelCode: "999",
            },
          ],
          labelChannels: [{
            labelCode: channelCode,
            channelDates: [{
              channelCode: channelCode,
              channelName: channelName,
              channelSn: null,
              cameraType: cameraType,
              online: "1",
              cameraCode: null,
            }, ],
          }, ],
        }, ];
        this.$refs.TVWallNoRight.showTVWall(tvListJson, null);
        this.$refs.supermap.isEditableLayers = false;
      },
      fatherMethod(dianshiqiang, longitude, latitude, item) {
        this.$refs.TVWall.showTVWall(
          dianshiqiang, {
            longitude: longitude,
            latitude: latitude,
          },
          item
        );
      },
      /* 电视墙替换结束 */
      selectCameraByDeptId(depId, lng, lat) {
        this.visuForestCloudCameraBOListSearch = [];
        this.visuForestCloudCameraBOList = [];
        let that = this;
        that.deptId = depId
        const str = this.cameraUseCheckList.join(",");
        selectCameraByDeptId(depId, str).then((res) => {
          let cameraMarkersList = [];
          that.visuForestCloudCameraBOListSearch = res.data;
          that.visuForestCloudCameraBOList = res.data;
          //根据设备类型查看列表
          if (res.data != null && res.data.length > 0) {
            for (let i = 0; i < res.data.length; i++) {
              let markersMap = {
                lng: res.data[i].longitude,
                lat: res.data[i].latitude,
                icon: "camera",
                bindPopupHtml: "",
                click: "preview",
                parameter: "",
                keepBindPopup: false,
                isAggregation: false,
              };
              if (res.data[i].channelCode != null) {
                markersMap.parameter = {
                  code: res.data[i].cameraCode,
                  name: res.data[i].cameraName,
                  type: res.data[i].cameraType,
                };
              } else {
                markersMap.parameter = [];
              }
              if (res.data[i].cameraUse == 1) {
                markersMap.icon = "sj-icon-map-centerdata-slmonitor";
              } else if (res.data[i].cameraUse == 2) {
                markersMap.icon = "camera";
              } else if (res.data[i].cameraUse == 3) {
                markersMap.icon = "sj-icon-map-centerdata-slmonitor-traffic";
              } else if (res.data[i].cameraUse == 4) {
                markersMap.icon = 'sj-icon-map-centerdata-sand-quarry-camera'
              } else if (res.data[i].cameraUse == 5) {
                markersMap.icon = 'sj-icon-map-centerdata-river_camera'
              }
              markersMap.lng = res.data[i].longitude;
              markersMap.lat = res.data[i].latitude;
              markersMap.radius = res.data[i].cameraRadius;
              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].cameraName +
                "</h4>" +
                "                </div>" +
                "                </div>" +
                "                </span>" +
                "<span>" +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                "                  <h4>网络运营商：" +
                (res.data[i].operatorType == "1" ?
                  "联通" :
                  res.data[i].operatorType == "2" ?
                  "移动" :
                  "电信") +
                "</h4>" +
                "                </div>" +
                "                </div>" +
                "                </span>" +
                "<span>" +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                "                  <h4>摄像头半径：" +
                res.data[i].cameraRadius +
                "米</h4>" +
                "                </div>" +
                "                </div>" +
                "                </span>" +
                "</div>";
              cameraMarkersList.push(markersMap);
            }
            setTimeout(() => {
              that.$refs.supermap.clearMRadius();
              that.$refs.supermap.setMarkersRadius(cameraMarkersList);
            }, 1000);
          } else {
            that.$refs.supermap.clearMRadius();
          }
        });
        getCamerasByDeptId(depId).then((res) => {
          this.$refs.TVWallNoRight.showTVWall(res.data, {
            longitude: lng,
            latitude: lat,
          });
        });
        this.$refs.supermap.clearG();
        setTimeout(() => {
          if (depId == "365" || depId == "369" || depId == "371" || depId == "373" || depId == "372" || depId ==
            "370") {
            if (this.cameraUseCheckList.length == this.cameraUseList.length || this.cameraUseCheckList.length ==
              0) {
              this.getNotCoverPlaces(depId);
            }
          }
        }, 500)
      },
      selectCameraByDeptIds(depId, lng, lat) {
        // if (!this.sideShowCamera) {
        //   this.$message.warning("请先选择视联网！")
        //   return
        // }
        this.visuForestCloudCameraBOListSearch = [];
        this.visuForestCloudCameraBOList = [];
        let that = this;
        debugger
        const str = this.cameraUseCheckList.join(",");
        selectCameraByDeptId(depId, str).then((res) => {
          that.visuForestCloudCameraBOListSearch = res.data;
          that.visuForestCloudCameraBOList = res.data;
          let cameraMarkersList = [];
          //根据设备类型查看列表
          if (res.data != null && res.data.length > 0) {
            for (let i = 0; i < res.data.length; i++) {
              let markersMap = {
                lng: res.data[i].longitude,
                lat: res.data[i].latitude,
                icon: "camera",
                bindPopupHtml: "",
                click: "preview",
                parameter: "",
                keepBindPopup: false,
                isAggregation: false,
              };
              if (res.data[i].channelCode != null) {
                markersMap.parameter = {
                  code: res.data[i].cameraCode,
                  name: res.data[i].cameraName,
                  type: res.data[i].cameraType,
                };
              } else {
                markersMap.parameter = [];
              }
              if (res.data[i].cameraUse == 1) {
                if (res.data[i].workingStatus == 0) {
                  markersMap.icon = "sj-icon-map-centerdata-slmonitor";
                } else {
                  markersMap.icon = "sj-icon-map-centerdata-slmonitor-not";
                  markersMap.click = ""
                }
              } else if (res.data[i].cameraUse == 2) {
                if (res.data[i].workingStatus == 0) {
                  markersMap.icon = "camera";
                } else {
                  markersMap.icon = "camera-not";
                  markersMap.click = ""
                }
              } else if (res.data[i].cameraUse == 3) {
                if (res.data[i].workingStatus == 0) {
                  markersMap.icon = "sj-icon-map-centerdata-slmonitor-traffic";
                } else {
                  markersMap.icon = "sj-icon-map-centerdata-slmonitor-traffic-not";
                  markersMap.click = ""
                }
              } else if (res.data[i].cameraUse == 4) {
                if (res.data[i].workingStatus == 0) {
                  markersMap.icon = 'sj-icon-map-centerdata-sand-quarry-camera'
                } else {
                  markersMap.icon = 'sj-icon-map-centerdata-sand-quarry-camera-not'
                  markersMap.click = ""
                }
              } else if (res.data[i].cameraUse == 5) {
                if (res.data[i].workingStatus == 0) {
                  markersMap.icon = 'sj-icon-map-centerdata-river_camera'
                } else {
                  markersMap.icon = 'sj-icon-map-centerdata-river_camera_not'
                  markersMap.click = ""
                }
              }
              markersMap.lng = res.data[i].longitude;
              markersMap.lat = res.data[i].latitude;
              markersMap.radius = res.data[i].cameraRadius;
              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].cameraName +
                "</h4>" +
                "                </div>" +
                "                </div>" +
                "                </span>" +
                "<span>" +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                "                  <h4>网络运营商：" +
                (res.data[i].operatorType == "1" ?
                  "联通" :
                  res.data[i].operatorType == "2" ?
                  "移动" :
                  "电信") +
                "</h4>" +
                "                </div>" +
                "                </div>" +
                "                </span>" +
                "<span>" +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                "                  <h4>摄像头半径：" +
                res.data[i].cameraRadius +
                "米</h4>" +
                "                </div>" +
                "                </div>" +
                "                </span>" +
                "</div>";
              cameraMarkersList.push(markersMap);
            }
            setTimeout(() => {
              that.$refs.supermap.clearM();
              that.$refs.supermap.clearMRadius();
              that.$refs.supermap.setMarkersRadius(cameraMarkersList);
            }, 1000);
          } else {
            that.$refs.supermap.clearM();
            that.$refs.supermap.clearMRadius();
          }
          this.$refs.supermap.clearG();
          setTimeout(() => {
            if (depId == "365" || depId == "369" || depId == "371" || depId == "373" || depId == "372" ||
              depId == "370") {
              if (this.cameraUseCheckList.length == this.cameraUseList.length || this.cameraUseCheckList
                .length == 0) {
                this.getNotCoverPlaces(depId);
              }
            }
          }, 500)
        });
      },
      rotation(lng, lat, list) {
        rotation(lng, lat, list).then((res) => {});
      },
      /** 标题返回 */
      titleClick() {
        this.sideShowHome = true;
        this.sideShowCamera = false;
        this.sideShowMonitor = false;
        this.getEventPoint();
        this.btnGetFocus1 = false;
        this.btnGetFocus2 = false;
        this.btnGetFocus3 = false;
        this.btnGetFocus4 = false;
      },

      getByDeptId(index) {
        let num = 0;
        if (this.dept == "365") {
          num = 0;
        } else if (this.dept == "369") {
          num = 1;
        } else if (this.dept == "371") {
          num = 2;
        } else if (this.dept == "373") {
          num = 3;
        } else if (this.dept == "372") {
          num = 4;
        } else if (this.dept == "370") {
          num = 5;
        }
        this.showModal6 = false;
        this.showModal7 = false;

        this.resourcesCheckList = [];
        this.personnelVisualizationModel = "1";
        this.personnelVisualizationList = [];
        this.personneType = "";
        this.personneTypeList = [];
        this.personne = "";
        this.personneList = [];
        this.visible_tc = false;
        this.visible_zy = false;

        // 获取实时关注数据
        this.getDeptEventCount();
        // 获取事件统计数据
        this.getEventStatistics();
        // 获取重点工程数据
        this.getKeyProjects();
        // 获取重点区域
        this.getImportAreaList();
        // 四长概况
        this.fourLengthOverview();
        // // 四长统计
        // this.listFourCount();
        // 一网通办
        this.allAtOnce();
        // 加载事件点位
        this.getEventPoint();
        // 获取天气
        this.getWeather();

        this.titleClick();

        this.layerCheckList = [];
        this.$refs.supermap.removeAllviewer(num, index);
      },
      fourLengthOverTree(val) {
        let that = this;
        fourLengthOverTree({
            timeTag: val,
            deptId: that.dept,
          })
          .then(function(response) {
            that.data = response.data;
            that.expandedKeys.push(response.data[0].id);
          })
          .catch(function(error) {
            console.log(error);
          });
      },
      // 传感器
      getSensorListByDeptId() {
        this.btnGetFocus1 = false;
        this.btnGetFocus2 = !this.btnGetFocus2;
        this.btnGetFocus3 = false;
        this.btnGetFocus4 = false;
        let that = this;
        let markersList = [];
        getSensorListByDeptId({
            deptId: that.dept,
          })
          .then(function(res) {
            console.log(res.data);
            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: false,
                };
                markersMap.icon = "sensor";

                markersMap.lng = res.data[i].longitude;
                markersMap.lat = res.data[i].latitude;
                markersList.push(markersMap);
              }
              setTimeout(() => {
                that.$refs.supermap.clearM();
                that.$refs.supermap.clearMRadius();
                that.$refs.supermap.setMarkers(markersList);
              }, 1000);
            } else {
              setTimeout(() => {
                that.$refs.supermap.clearM();
                that.$refs.supermap.clearMRadius();
              }, 1000);
            }
          })
          .catch(function(error) {
            console.error(error);
          });
      },
      jump() {
        // 跳转大喇叭页面
        window.open("https://sts.sty1818.com");
      },

      // 大喇叭
      getDlblistBydeptIds() {
        // if (!this.btnGetFocus3) {
        //   this.$message.warning("请先选择云广播!")
        //   return
        // }
        let that = this;
        let markersList = [];
        const str = that.broadcastUseCheckList.join(",");
        getDlblistBydeptId({
            deptId: that.dept,
            broadcastUse: str,
          })
          .then(function(res) {
            console.log(res.data);
            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: "big-horn",
                  bindPopupHtml: '<div class="map-tip">' +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>名称：" +
                    (res.data[i].name ? res.data[i].name : "") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>位置：" +
                    (res.data[i].position ? res.data[i].position : "") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>备注：" +
                    (res.data[i].remark ? res.data[i].remark : "") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<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>" +
                    "</div>",
                  click: "jump",
                  parameter: "",
                  keepBindPopup: false,
                  isAggregation: false,
                };

                if (res.data[i].broadcastUse == '1') {
                  markersMap.icon = "big-horn-emergency";
                } else if (res.data[i].broadcastUse == '2') {
                  markersMap.icon = "big-horn";
                }

                markersMap.lng = res.data[i].longitude;
                markersMap.lat = res.data[i].latitude;
                markersList.push(markersMap);
              }
              setTimeout(() => {
                that.$refs.supermap.clearM();
                that.$refs.supermap.clearMRadius();
                that.$refs.supermap.setMarkers(markersList);
              }, 1000);
            } else {
              setTimeout(() => {
                that.$refs.supermap.clearM();
                that.$refs.supermap.clearMRadius();
              }, 1000);
            }
          })
          .catch(function(error) {
            console.error(error);
          });
      },
      getDlblistBydeptId() {
        let that = this
        that.$refs.supermap.clearG();
        that.resourcesCheckList = [];
        if (that.cgqTimer != null) {
          clearInterval(that.cgqTimer);
        }
        that.broadcastUseCheckList = []
        that.cameraUseCheckList = []
        that.sensorCheckList = []
        that.sideShowHome = true;
        that.sideShowMonitor = false;
        that.sideShowCamera = false;
        that.btnGetFocus1 = false;
        that.btnGetFocus2 = false;
        that.btnGetFocus3 = !that.btnGetFocus3;
        that.visible_ygb = !that.visible_ygb;
        that.btnGetFocus4 = false;
        that.showModal7 = false;
        that.showModal6 = false;
        this.getLocation()
        that.resettings();
        if (!that.btnGetFocus3) {
          that.$refs.supermap.clearM();
          that.$refs.supermap.clearMRadius();
        } else {
          that.broadcastUseList.forEach(function(item) {
            that.broadcastUseCheckList.push(item.dictValue)
          });
        }
        that.$refs.btnGetFocus3.updatePopper();
        that.getDlblistBydeptIds();
      },
      // 获取天气数据
      getWeather() {
        let that = this;
        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;
        let str = y + "-" + m + "-" + d;
        getWeather({
          day: str,
        }).then((res) => {
          if (res.data.length > 0) {
            that.weatherinformationLow = res.data[0].weatherinformationLow;
            that.weatherinformationPower = res.data[0].weatherinformationPower;
            that.weatherinformationHigh = res.data[0].weatherinformationHigh;
            that.weatherinformationDirection =
              res.data[0].weatherinformationDirection;
            that.weatherinformationTemperature =
              res.data[0].weatherinformationTemperature;
          }
          console.log("获取天气数据=", res.data[0]);
        });
      },
      // 加载事件点位
      getEventPoint() {
        let that = this;
        getEventPoint({
            deptId: that.dept,
          })
          .then(function(response) {
            console.log(response.data);
            let markersList = [];
            let res = response;
            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>'
                markersList.push(markersMap);
              }
              setTimeout(() => {
                that.$refs.supermap.clearM();
                that.$refs.supermap.clearMRadius();
                that.$refs.supermap.setMarkers(markersList);
              }, 1000);
            } else {
              setTimeout(() => {
                that.$refs.supermap.clearM();
                that.$refs.supermap.clearMRadius();
              }, 1000);
            }
          })
          .catch(function(error) {
            console.error(error);
          });
      },
      // 展示电视墙
      showTVWall() {
        this.$refs.supermap.clearG();
        this.resourcesCheckList = [];
        this.btnGetFocus1 = false;
        this.btnGetFocus2 = false;
        this.btnGetFocus3 = false;
        this.btnGetFocus4 = !this.btnGetFocus4;
        this.showModal7 = false;
        this.showModal6 = false;
        this.getLocation()
        this.resettings();
        getTVWallList().then((res) => {
          this.$refs.TVWallNoRight.showTVWall(res.data, null);
          this.getEventPoint();
        });
      },
      // 获取所有摄像头
      selectDeviceType() {
        this.deptId = Cookies.get("deptId");
        this.$refs.supermap.clearG();
        //当左右收起，点击视联网，左右会弹出
        if (!this.expandValue) {
          this.$refs.exb.expandClick();
        }
        this.resourcesCheckList = [];
        if (this.cgqTimer != null) {
          clearInterval(this.cgqTimer);
        }
        this.btnGetFocus1 = !this.btnGetFocus1;
        this.visible_slw = !this.visible_slw;
        this.btnGetFocus2 = false;
        this.btnGetFocus3 = false;
        this.btnGetFocus4 = false;
        this.showModal7 = false;
        this.showModal6 = false;
        this.getLocation()
        this.resettings();
        let that = this;
        // that.sideShowHome = false;
        // that.sideShowCamera = true;
        if (that.sideShowCamera) {
          this.titleClick();
          return;
        } else {
          that.sideShowHome = false;
          that.sideShowMonitor = false;
          that.sideShowCamera = true;
          that.cameraUseList.forEach(function(item) {
            that.cameraUseCheckList.push(item.dictValue)
          });
        }
        this.selectCameraByDeptIds(this.dept);
        that.$refs.sideShowCamera.updatePopper();
      },
      // 获取所有摄像头

      // 获取附近摄像头
      getNearCamera(data) {
        let cameraMarkersList = [];
        let that = this;
        if (data != null && data.length > 0) {
          for (let i = 0; i < data.length; i++) {
            let markersMap = {
              lng: 124.59,
              lat: 43.02,
              icon: "camera",
              bindPopupHtml: "",
              click: "preview",
              keepBindPopup: false,
              isAggregation: false,
            };
            if (data[i].cameraCode != null) {
              markersMap.parameter = {
                cameraCode: data[i].cameraCode,
                cameraFactory: data[i].cameraFactory,
              };
            } else {
              markersMap.parameter = [];
            }

            markersMap.lng = data[i].longitude;
            markersMap.lat = data[i].latitude;
            markersMap.radius = data[i].cameraRadius;
            markersMap.bindPopupHtml =
              '<div class="map-tip">' +
              "<span>" +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              "                  <h4>摄像头名称：" +
              data[i].cameraName +
              "</h4>" +
              "                </div>" +
              "                </div>" +
              "                </span>" +
              "<span>" +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              "                  <h4>网络运营商：" +
              (res.data[i].operatorType == "1" ?
                "联通" :
                res.data[i].operatorType == "2" ?
                "移动" :
                "电信") +
              "</h4>" +
              "                </div>" +
              "                </div>" +
              "                </span>" +
              "<span>" +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              "                  <h4>摄像头半径：" +
              data[i].cameraRadius +
              "米</h4>" +
              "                </div>" +
              "                </div>" +
              "                </span>" +
              "</div>";
            cameraMarkersList.push(markersMap);
          }
          setTimeout(() => {
            that.$refs.supermap.clearMRadius();
            that.$refs.supermap.setMarkersRadius(cameraMarkersList);
          }, 1000);
        } else {
          setTimeout(() => {
            that.$refs.supermap.clearMRadius();
          }, 1000);
        }
        that.$refs.supermap.clearG();
      },
      // 一网通办
      allAtOnce() {
        let that = this;
        allAtOnce({
            deptId: that.dept,
          })
          .then(function(response) {
            if (response.data != undefined) {
              that.networkprocessingData = response.data;
              that.networkprocessingData.upDown = parseInt(
                response.data.upDown.replace("%")
              );
            } else {
              that.networkprocessingData = {
                naturalPersonCompletionRate: "",
                naturalPersonCompletionNumber: 0,
                naturalPersonProcessingNumber: 0,
                legalPersonCompletionRate: "",
                legalPersonCompletionNumber: 0,
                legalPersonProcessingNumber: 0,
                upDown: 0,
                hallProcessingTotalNumber: 0,
                previousDayHallProcessingTotalNumber: 0,
                top1CompletionNumber: 0,
                top2CompletionNumber: 0,
                top3CompletionNumber: 0,
                top4CompletionNumber: 0,
                top5CompletionNumber: 0,
                top1DeptName: "-",
                top2DeptName: "-",
                top3DeptName: "-",
                top4DeptName: "-",
                top5DeptName: "-",
                verySatisfied: 0,
                satisfied: 0,
                basicallySatisfied: 0,
                dissatisfied: 0,
                veryDissatisfied: 0,
                upDownzuidui: 0,
              };
            }
            console.log(response.data);
          })
          .catch(function(error) {
            console.error(error);
          });
      },
      // 事件统计-事件详情
      getEventStatisticsOther() {
        let that = this;
        getEventStatisticsOther({
            deptId: that.dept,
          })
          .then(function(response) {
            that.eventDetails1 = response.data.hgj;
            that.eventDetails2 = response.data.trend;
            that.getEchartssjData1();
            that.getEchartssjData2();
            console.log(response.data);
          })
          .catch(function(error) {
            console.error(error);
          });
      },
      // 实时关注统计
      getAnalysisReport() {
        let that = this;
        getAnalysisReport({
            deptId: that.dept,
          })
          .then(function(response) {
            that.fireLossStatistics = response.data.fireLoss;
            if (response.data.fireSource.length > 0)
              that.statisticsCausesFire = response.data.fireSource;
            else
              that.statisticsCausesFire = [{
                num: 0,
                max: 500,
                name: "",
              }, ];
            if (response.data.firePlace.length > 0)
              that.statisticsFireSites = response.data.firePlace;
            else
              that.statisticsFireSites = [{
                num: 0,
                max: 500,
                name: "",
              }, ];
            if (response.data.fireInfo.length > 0)
              that.fireSituation = response.data.fireInfo;
            else
              that.fireSituation = [{
                num: 0,
                name: "",
              }, ];
            that.getEchartstkData1();
            that.getEchartstkData2();
            that.getEchartstkData3();
            that.getEchartstkData4();

            console.log(response.data);
          })
          .catch(function(error) {
            console.error(error);
          });
      },
      //四长tab切换点击事件
      szHandleClick(tab, e) {
        console.log("点击了四长tab标签", tab, e);
        this.linName = "";
        this.heName = "";
        this.luName = "";
        this.tianName = "";
        if (tab.index == 0) {
          this.fourLengthOverTree(1); // 林长
        } else if (tab.index == 1) {
          this.fourLengthOverTree(6); // 田长
        } else if (tab.index == 2) {
          this.fourLengthOverTree(3); // 路长
        } else if (tab.index == 3) {
          this.fourLengthOverTree(2); //河长
        }
      },

      fourLengthOverview() {
        let that = this;
        fourLengthOverview({
            deptId: that.dept,
          })
          .then(function(response) {
            console.log("fourLengthOverview response=", response.data);
            that.fourLengthStatistics.list = response.data.patrol;
            that.fourLengthStatistics.TotalNumberofPeople = response.data.total;
            that.fourLeadersChart();
          })
          .catch(function(error) {
            console.error(error);
          });
      },
      // 获取四长概况数据 新功能 已改版
      fourLengthOverviewOther() {
        let that = this;
        //commandCenter/overview 四长概况  get请求  入参deptId 部门id
        fourLengthOverviewOther({
            deptId: that.dept,
          })
          .then(function(response) {
            console.log("response=", response);
            if (response.data.task.length > 0) {
              for (let i = 0; i < response.data.task.length; i++) {
                if (response.data.task[i].name == "1") {
                  that.fourLengthTask[0].value = response.data.task[i].num;
                } else if (response.data.task[i].name == "2") {
                  that.fourLengthTask[1].value = response.data.task[i].num;
                } else if (response.data.task[i].name == "3") {
                  that.fourLengthTask[2].value = response.data.task[i].num;
                } else if (response.data.task[i].name == "6") {
                  that.fourLengthTask[3].value = response.data.task[i].num;
                }
              }
            }
            if (response.data.plan.length > 0) {
              for (let i = 0; i < response.data.plan.length; i++) {
                if (response.data.task[i].name == "1") {
                  that.fourLengthPlan[0] = response.data.plan[i].num;
                } else if (response.data.plan[i].name == "2") {
                  that.fourLengthPlan[1] = response.data.plan[i].num;
                } else if (response.data.plan[i].name == "3") {
                  that.fourLengthPlan[2] = response.data.plan[i].num;
                } else if (response.data.plan[i].name == "6") {
                  that.fourLengthPlan[3] = response.data.plan[i].num;
                }
              }
            }
            if (
              response.data.structure != null &&
              response.data.structure != undefined
            ) {
              that.overview[0] = response.data.structure["1"];
              that.overview[1] = response.data.structure["2"];
              that.overview[2] = response.data.structure["3"];
              that.overview[3] = response.data.structure["4"];
            }
            that.fourLeaderChartPop();
            that.fourLeaderChartPop2();
            that.fourLeaderChartPop3();
            console.log(response.data);
          })
          .catch(function(error) {
            console.error(error);
          });
      },
      // 获取重点区域数据
      getImportAreaList1() {
        let that = this;
        that.queryParams.deptId = that.dept;
        getImportAreaListOne(that.queryParams)
          .then(function(response) {
            that.keyAreasListList = response.rows;
            that.total1 = response.total;
          })

          .catch(function(error) {
            console.error(error);
          });
      },
      // 获取重点区域数据
      getImportAreaList() {
        let that = this;
        getImportAreaList({
            deptId: that.dept,
          })
          .then(function(response) {
            that.keyAreasList = response.data;
            console.log(response.data);
          })
          .catch(function(error) {
            console.error(error);
          });
      },
      getKeyProjects1() {
        let that = this;
        this.queryParams1.deptId = this.dept;
        getKeyProjectsOne(this.queryParams1)
          .then(function(response) {
            that.imgLists = response.rows;
            that.total = response.total;
          })
          .catch(function(error) {
            console.error(error);
          });
      },
      // 获取重点工程数据
      getKeyProjects() {
        let that = this;
        getKeyProjects({
            deptId: that.dept,
          })
          .then(function(response) {
            console.log(response.data);
            that.imgList = [];
            for (let i = 1; i <= Math.ceil(response.data.length / 6); i++) {
              let data = [];
              let jlength =
                response.data.length - i * 6 < 0 ?
                response.data.length - i * 6 + 6 :
                6;
              for (let j = 0; j < jlength; j++) {
                data.push({
                  projectId: response.data[i * 6 - 6 + j].projectId,
                  projectName: response.data[i * 6 - 6 + j].projectName,
                  projectTarget: response.data[i * 6 - 6 + j].projectTarget,
                  longitude: response.data[i * 6 - 6 + j].longitude,
                  latitude: response.data[i * 6 - 6 + j].latitude,
                  photoId: response.data[i * 6 - 6 + j].photo_id,
                  introduction: response.data[i * 6 - 6 + j].introduction,
                  cameraList: response.data[i * 6 - 6 + j].cameraList,
                  scheduleList: response.data[i * 6 - 6 + j].scheduleList,
                  territoriality: response.data[i * 6 - 6 + j].territoriality,
                  park: response.data[i * 6 - 6 + j].park,
                  parklongitude: response.data[i * 6 - 6 + j].parklongitude,
                  parklatitude: response.data[i * 6 - 6 + j].parklatitude,
                  environment: response.data[i * 6 - 6 + j].environment,
                  legalUnit: response.data[i * 6 - 6 + j].legalUnit,
                  startTime: response.data[i * 6 - 6 + j].startTime,
                  endTime: response.data[i * 6 - 6 + j].endTime,
                  naturer: response.data[i * 6 - 6 + j].naturer,
                  totalInvest: response.data[i * 6 - 6 + j].totalInvest,
                  yearInvest: response.data[i * 6 - 6 + j].yearInvest,
                  industryType: response.data[i * 6 - 6 + j].industryType,
                  principal: response.data[i * 6 - 6 + j].principal,
                  phone: response.data[i * 6 - 6 + j].phone,
                });
              }
              that.imgList.push(data);
            }
            console.log(111111, that.imgList);
          })
          .catch(function(error) {
            console.error(error);
          });
      },
      resourcesClick() {
        this.getResourceType(this.resourcesType);
        this.markersList = [];
        // this.$refs.supermap.clearM();
        // this.getEventPoint()
        //this.resourcesCheckList = []
        console.log(this.resourcesCheckList);
      },
      getResourceType(resourcesType) {
        let type = this.resourcesTypeList.filter(item => item.id == resourcesType)[0].name
        let that = this;
        // that.resourcesCheckList = []
        that.resourcesList = [];
        // this.$refs.supermap.clearM();
        // this.$refs.supermap.clearMRadius();
        fireControlViewList(type, 'leader').then(function(res) {

          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].type != 'centerdata_t_forest_fireteam') {
              that.resourcesList.push(res.data[i]);
            }
          }
          if (resourcesType == 8 || resourcesType == 5) {
            that.resourcesList = that.resourcesList.filter(item => item.type != 'centerdata_t_forest_fireteam')
          }
          //截取data.resourceTable字段中“_”分隔符最后一个作为关键字,重新拼接成前端需要的图标:class,格式sj-icon-xxxx,将其set回原数组
          that.resourcesList.forEach(function(data, index) {
            data.name = data.name.replaceAll("(", '(' + data.num)
            that.resourcesList.splice(index, 1, data)
            //that.$set(that.resourcesList[index], "name", );
            // //每个图标对应固定颜色
            // that.$set(that.resourcesList[index], "bg", getIconBg(icon));
          });
          //that.fireControlViewPoint("xiaofang", "");
        });
      },
      getResourcePoint() {
        let that = this;
        this.markersList = [];
        this.$refs.supermap.clearM();
        let str = this.resourcesCheckList.join(",")
        if (str == '' || str == null) return;
        const param = {
          type: str,
          deptId: that.deptId,
          name: '',
          assort: 'leader'
        }
        //this.resourcesCheckList.forEach((item) => {
        fireControlViewPointPost(param).then((res) => {
          console.log(that.deptId)
          let resList1 = [];
          resList1 = res.data;
          console.log("resList1=", resList1)
          resList1.forEach((item2) => {
            let markersMap = {
              lng: item2.longitude,
              lat: item2.latitude,
              icon: "marker",
              bindPopupHtml: "",
              click: "",
              keepBindPopup: false,
              isAggregation: false,
            };
            this.markersList.push(this.getMarkersMap1(item2.indexName, markersMap, item2));
            this.$refs.supermap.setMarkers([this.getMarkersMap1(item2.indexName, markersMap, item2)]);
          });

        });
        //});
      },
      getMarkersMap1(resourceTable, markersMap, item) {
        let icon = "sj-icon-map-" + resourceTable.replaceAll("_", "-").replaceAll("@", "-");
        item.type = resourceTable
        markersMap.lng = item.longitude;
        markersMap.lat = item.latitude;
        markersMap.click = "sewageOutletClick";
        // if(this.farmingList.includes(resourceTable)){
        //   markersMap.click = "sewageOutletClickfarming";
        // }
        markersMap.parameter = item;
        markersMap.icon = icon;
        markersMap.bindPopupHtml =
          '<div class="map-tip">' +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>经纬度：" +
          (item.longitude ? item.longitude : "") +
          "," +
          (item.latitude ? item.latitude : "") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>名称：" +
          (item.name ? item.name : "无") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>地址：" +
          (item.address ? item.address : "无") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>联系人：" +
          (item.contacts ? item.contacts : "无") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span>" +
          "<span>" +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          "                  <h4>联系电话：" +
          (item.phone ? item.phone : "无") +
          "</h4>" +
          "                </div>" +
          "                </div>" +
          "                </span></div>";
        console.log(markersMap)
        return markersMap;
      },
      resourcesClose() {
        this.markersList = [];
        // this.$refs.supermap.clearM();
        // this.getEventPoint()
        //this.resourcesCheckList = []
        console.log(this.resourcesCheckList);
      },
      colseClick() {
        this.resourcesCheckList = [];
        this.$refs.supermap.clearM();
        this.getEventPoint();
      },
      getNotCoverPlaces(deptId) {
        let that = this;
        if (that.sideShowCamera) {
          notCoverPlaces(deptId).then((res) => {
            if (res.data != null && Array.isArray(res.data)) {
              that.$refs.supermap.setGraphicsListMultiple(res.data, "rgb(105, 105, 255)", 0.8);
            }
          })
        } else {
          that.$refs.supermap.clearG();
        }
      },
      hideClick() {
        this.showModal7 = false;
        this.getLocation()
        this.showModal6 = false;
        //this.resourcesCheckList=[]
        // this.$refs.supermap.clearM()
        // this.getEventPoint()
      },
      getResourcesType(item) {
        this.$refs.supermap.clearM();
        this.resourcesCheckList = [];
        if (item == "resources_type1") {
          //数字林业
          // this.$refs.supermap.clearM();
          // this.resourcesCheckList = []
          this.resourcesList = [];
          getResourcefire().then((res) => {
            this.resourcesList = res.data;
          });
        } else if (item == "resources_type2") {
          //数字农业
          // this.$refs.supermap.clearM();
          // this.resourcesCheckList = []
          this.resourcesList = [];
          getResourceagriculture().then((res) => {
            this.resourcesList = res.data;
          });
        } else if (item == "resources_type3") {
          //数字水利
          // this.$refs.supermap.clearM();
          // this.resourcesCheckList = []
          this.resourcesList = [];
          getResourcewater().then((res) => {
            this.resourcesList = res.data;
          });
        } else if (item == "resources_type4") {
          //数字环保
          // this.$refs.supermap.clearM();
          // this.resourcesCheckList = []
          this.resourcesList = [];
          getResourceenvironment().then((res) => {
            this.resourcesList = res.data;
          });
        } else if (item == "resources_type5") {
          //数字应急
          // this.$refs.supermap.clearM();
          // this.resourcesCheckList = []
          this.resourcesList = [];
          getResourceemergency().then((res) => {
            this.resourcesList = res.data;
          });
        } else if (item == "resources_type6") {
          //数字交通
          // this.$refs.supermap.clearM();
          // this.resourcesCheckList = []
          this.resourcesList = [];
          getResourcesCounttraffic().then((res) => {
            this.resourcesList = res.data;
          });
        } else if (item == "resources_type7") {
          //数字资源
          // this.$refs.supermap.clearM();
          // this.resourcesCheckList = []
          this.resourcesList = [];
          getResourceres().then((res) => {
            this.resourcesList = res.data;
          });
        } else if (item == "resources_type8") {
          //数字消防
          // this.$refs.supermap.clearM();
          // this.resourcesCheckList = []
          this.resourcesList = [];
          fireControlViewList().then((res) => {
            this.resourcesList = res.data;
          });
        }
      },
      //重置重点工程和重点区域的搜索框
      resetting(type) {
        if (type == 2) {
          this.queryParams = {
            pageNum: 1,
            pageSize: 10,
            deptId: null,
            params: {
              areaName: null,
              projectLevel: null,
            },
          };
          this.getImportAreaList1();
        } else {
          this.queryParams1 = {
            pageNum: 1,
            pageSize: 10,
            deptId: null,
            params: {
              projectName: null,
              projectLevel: null,
            },
          };
          this.getKeyProjects1();
        }
      },
      // 获取事件统计数据
      getEventStatistics() {
        let that = this;
        getEventStatistics({
            deptId: that.dept,
          })
          .then(function(response) {
            let data = response.data;
            that.eventStatistics.processedNum = data.status[0].processed;
            that.eventStatistics.totalNum = data.status[0].num;
            that.eventStatistics.untreatedNum = data.status[0].unprocessed;
            that.eventStatistics.eventList = [];
            for (let i = 0; i < data.type.length; i++) {
              that.eventStatistics.eventList.push({
                name: data.type[i].name,
                value: data.type[i].num,
              });
            }
            // 刷新事件统计
            that.getEchartsj2Data();
            console.log(response.data);
          })
          .catch(function(error) {
            console.error(error);
          });
      },
      // 展示下载操作手册列表
      showDownloadList(type) {
        let that = this;
        that.isShowDownloadList = true;
        this.showModal7 = false;
        this.showModal6 = false;
        if (type == "1") {
          searchAllYouWant({
              keyWord: this.fileNameS,
            })
            .then(function(response) {
              console.log(response.data);
              that.downloadList = response.data;
            })
            .catch(function(error) {
              console.error(error);
            });
        }
      },
      // 关闭下载操作手册列表
      cancelShowDownloadList() {
        this.fileNameS = ""
        this.downloadList = []
      },
      // 下载操作手册
      download(path) {
        window.open(path);
      },
      // 获取实时关注数据
      getDeptEventCount() {
        let that = this;
        getDeptEventCount({
            deptId: that.dept,
          })
          .then(function(response) {
            that.interestList = response.data;
            that.getEchartData();
            console.log(response.data);
          })
          .catch(function(error) {
            console.error(error);
          });
      },
      dropLocation(latitude, longitude, leve) {
        //摄像头定位
        this.$refs.supermap.dropLocation(latitude, longitude, leve);
      },
      rightDeptName(value) {
        //摄像头搜索
        this.visuForestCloudCameraBOListSearch = [];
        for (let i in this.visuForestCloudCameraBOList) {
          if (
            this.visuForestCloudCameraBOList[i].cameraName.indexOf(value) != -1
          ) {
            this.visuForestCloudCameraBOListSearch.push(
              this.visuForestCloudCameraBOList[i]
            );
          }
        }
      },
      leftDeptName(value) {
        //摄像头搜索
        this.visuForestCloudMonitorBOListSearch = [];
        for (let i in this.visuForestCloudMonitorBOList) {
          if (
            this.visuForestCloudMonitorBOList[i].cameraName.indexOf(value) != -1
          ) {
            this.visuForestCloudMonitorBOListSearch.push(
              this.visuForestCloudMonitorBOList[i]
            );
          }
        }
      },
      // 实时关注
      getEchartData() {
        let totalList = [];
        let titleList = [];
        let total = 0;
        for (let i = 0; i < this.interestList.length; i++) {
          total += this.interestList[i].num;
          totalList.push(this.interestList[i].num);
          titleList.push(this.interestList[i].name);
        }
        this.interestTotal = total;
        let myChart = this.$echarts.init(document.getElementById("conChart1"));
        // let peoples = [5, 13, 9, 3, 7];
        let maxNumber = Math.max.apply(null, totalList) + 10;
        let maxData = [maxNumber, maxNumber, maxNumber, maxNumber, maxNumber, 1];
        let option = {
          grid: {
            left: "5%",
            right: "5%",
            bottom: "5%",
            top: "10%",
            containLabel: true,
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "none",
            },
            formatter: function(params) {
              return (
                params[0].name +
                "<br/>" +
                params[0].seriesName +
                " : " +
                params[0].value +
                "<br/>"
              );
            },
          },
          xAxis: {
            show: false,
            type: "value",
          },
          yAxis: [{
              type: "category",
              inverse: true,
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              data: titleList,
            },
            {
              type: "category",
              inverse: true,
              axisTick: "none",
              axisLine: "none",
              show: true,
              axisLabel: {
                textStyle: {
                  color: "#ffffff",
                  fontSize: "12",
                },
                formatter: "{value}",
              },
              data: totalList,
            },
          ],
          series: [{
              name: "事件",
              type: "bar",
              zlevel: 1,
              itemStyle: {
                normal: {
                  barBorderRadius: 30,
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: "rgba(0,174,255,0.01)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,174,255,1)",
                    },
                  ]),
                },
              },
              barWidth: 8,
              data: totalList,
            },
            {
              name: "背景",
              type: "bar",
              barWidth: 8,
              barGap: "-100%",
              data: maxData,
              itemStyle: {
                normal: {
                  color: "rgba(255, 255, 255, 0.1)",
                  barBorderRadius: 30,
                },
              },
            },
          ],
        };
        myChart.setOption(option);
      },
      // 四长统计
      fourLeadersChart() {
        let salvProName = [];
        let salvProValue = [];
        let max = 0;
        for (let i = 0; i < this.fourLengthStatistics.list.length; i++) {
          salvProValue.push(this.fourLengthStatistics.list[i].num);
          salvProName.push(this.fourLengthStatistics.list[i].name);
          if (this.fourLengthStatistics.list[i].num > max)
            max = this.fourLengthStatistics.list[i].num;
        }
        let myChart = this.$echarts.init(document.getElementById("fourLeaders"));
        let salvProMax = []; //背景按最大值
        for (let i = 0; i < salvProValue.length; i++) {
          salvProMax.push(max);
        }
        let option = {
          backgroundColor: "",
          grid: {
            left: "5%",
            right: "5%",
            bottom: "0%",
            top: "5%",
            containLabel: true,
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "none",
            },
            formatter: function(params) {
              return params[0].name + " : " + params[0].value + "公里";
            },
          },
          xAxis: {
            show: false,
            type: "value",
          },
          yAxis: [{
              type: "category",
              inverse: true,
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#ffffff",
                  fontSize: 11,
                  fontWeight: 500,
                },
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              data: salvProName,
            },
            {
              type: "category",
              inverse: true,
              axisTick: "none",
              axisLine: "none",
              show: true,
              axisLabel: {
                textStyle: {
                  color: "#fff",
                  fontSize: "11",
                },
                formatter: function(value) {
                  return ((value * 10) / 10).toLocaleString() + "公里";
                },
              },
              data: salvProValue,
            },
          ],
          series: [{
              name: "值",
              type: "bar",
              zlevel: 1,
              itemStyle: {
                normal: {
                  // barBorderRadius: 10,
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: "rgb(7,70,114,1)",
                    },
                    {
                      offset: 1,
                      color: "rgb(0,225,252,1)",
                    },
                  ]),
                },
              },
              barWidth: 10,
              data: salvProValue,
            },
            // {
            //     name: '背景',
            //     type: 'bar',
            //     barWidth: 15,
            //     barGap: '-100%',
            //     data: salvProMax,
            //     itemStyle: {
            //         normal: {
            //             color: 'rgba(24,31,68,1)',
            //             barBorderRadius: 30,
            //         }
            //     },
            // },
          ],
        };

        myChart.setOption(option);
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 事件统计
      getEchartsj2Data() {
        let myChart = this.$echarts.init(document.getElementById("conChart3"));
        let bgColor = "";
        let title = "总量";
        let color = ["#00fdff", "#40fcd5", "#70c5e2", "#51b5ff", "#0e7ce2"];
        let echartData = this.eventStatistics.eventList;

        let formatNumber = function(num) {
          let reg = /(?=(\B)(\d{3})+$)/g;
          return num.toString().replace(reg, ",");
        };
        let total = echartData.reduce((a, b) => {
          return a + b.value * 1;
        }, 0);

        let option = {
          color: color,
          // tooltip: {
          //     trigger: 'item'
          // },
          title: [{
              text: "{name|" + title + "}\n{val|" + formatNumber(total) + "}",
              top: "center",
              left: "center",
              textStyle: {
                rich: {
                  name: {
                    fontSize: 10,
                    fontWeight: "normal",
                    color: "#fff",
                    padding: [0, 0],
                  },
                  val: {
                    fontSize: 10,
                    fontWeight: "bold",
                    color: "#fff",
                  },
                },
              },
            },
            {
              text: "",
              top: 20,
              left: 20,
              textStyle: {
                fontSize: 10,
                color: "#fff",
              },
            },
          ],
          series: [{
            type: "pie",
            radius: ["45%", "60%"],
            center: ["50%", "50%"],
            data: echartData,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                borderColor: bgColor,
                borderWidth: 0,
                shadowColor: "#1274ac",
              },

              emphasis: {
                borderColor: bgColor,
                borderWidth: 0,
                shadowBlur: 8,
                shadowColor: "#1274ac",
              },
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 80,
                show: "false",
                lineStyle: {
                  color: "#021637",
                  show: "false",
                },
              },
            },
            label: {
              normal: {
                formatter: (params) => {
                  return (
                    "{icon|●}{name|" +
                    params.name +
                    "}{value|" +
                    formatNumber(params.value) +
                    "}"
                  );
                },
                padding: [0, -100, 8, -100],
                rich: {
                  icon: {
                    fontSize: 10,
                  },
                  name: {
                    fontSize: 10,
                    padding: [0, 5, 0, 4],
                    color: "#fff",
                  },
                  value: {
                    fontSize: 10,
                    fontWeight: "bold",
                    color: "#fff",
                  },
                },
              },
            },
          }, ],
        };
        myChart.setOption(option);
      },
      // 重点工程
      // 这里定义一个鼠标移入移出事件，鼠标悬停时停止自动轮播，鼠标移出则重新执行自动轮播
      MouseFun(type) {
        // 停止定时器            // 重新执行定时器
        type == "移入" ? clearTimeout(this.start) : this.gogo();
      },
      // 此为自动轮播定时器
      gogo() {
        this.start = setInterval(() => {
          this.NextFun();
        }, 1500);
      },
      // 这里通过额外封装的节流函数触发 PrevFun() 和 NextFun(),以达到防止重复点击的效果
      throttle(fun) {
        if (this.flag) {
          this.flag = false;
          fun(); // 此为模板中传递进来的PrevFun()或NextFun()函数
          setTimeout(() => {
            this.flag = true;
          }, 1200); // 节流间隔时间
        }
      },
      // 上一张
      PrevFun() {
        if (this.leftVal == 0) {
          // 判断显示的图片 是 第一张时执行
          // this.imgList.length是指循环图片数组的图片个数
          this.ition = 0; // 将过渡时间变成0，瞬间位移到最后一张图
          this.imgShow = this.imgList.length - 1; // 将高亮小点改为最后一张图
          this.leftVal = this.imgList.length * this.imgWidth; // 瞬间移动
          setTimeout(() => {
            // 通过延时障眼法,归原过渡时间,执行真正的“上一张”函数
            this.ition = 0.8;
            this.leftVal -= this.imgWidth;
          }, this.ition * 1000);
        } else {
          // 判断显示的图片 不是 第一张时执行
          this.ition = 0.8;
          this.leftVal -= this.imgWidth;
          this.imgShow--;
        }
      },
      toHome() {
        this.$refs.supermap.clearM();
        this.$refs.supermap.clearMRadius();
        this.$router.push("/newpage");
      },
      // 下一张
      NextFun() {
        if (this.leftVal == (this.imgList.length - 1) * this.imgWidth) {
          // 判断显示的图片 是 最后一张时执行
          this.ition = 0.8;
          this.leftVal += this.imgWidth;
          this.imgShow = 0;
          setTimeout(() => {
            this.ition = 0;
            this.leftVal = 0;
          }, this.ition * 1000);
        } else {
          // 判断显示的图片 不是 最后一张时执行
          this.ition = 0.8;
          this.leftVal += this.imgWidth;
          this.imgShow++;
        }
      },
      // 点击小圆点
      instFun(index) {
        this.ition = 0.8;
        this.leftVal = index * this.imgWidth;
        this.imgShow = index;
      },
      //重点区域
      changes(key) {
        this.num = key;
      },
      // 实时关注弹框
      fn1() {
        this.showModal = !this.showModal;
        this.getAnalysisReport();
        this.showModal7 = false;
        this.showModal6 = false;
        this.getLocation()
      },
      fn6() {
        this.getKeyProjects1();
        this.showModal6 = !this.showModal6;
        this.showModal7 = false;
        this.getLocation()
        console.log(this.imgList);
      },
      out6() {
        document.addEventListener("click", (e) => {
          let lt6 = document.getElementById("leader-tkbg6");
          let pagination1 = document.getElementById("pagination1");
          let box6 = document.getElementById("box6");
          if (lt6.contains(e.target) && box6.contains(e.target)) {
            this.showModal6 = false;
          }
        });
      },
      out7() {
        document.addEventListener("click", (e) => {
          let lt7 = document.getElementById("leader-tkbg7");
          let box7 = document.getElementById("box7");
          if (lt7.contains(e.target) && box7.contains(e.target)) {
            this.showModal7 = false;
          }
        });
      },
      fn7() {
        this.getImportAreaList1();
        this.showModal6 = false;
        this.getLocation()
        this.showModal7 = !this.showModal7;
      },
      out() {
        this.showModal = false;
        this.showModa2 = false;
        this.showModa3 = false;
        this.showModa4 = false;
      },
      out1() {
        document.addEventListener("click", (e) => {
          let lt = document.getElementById("leader-tkbg");
          let box1 = document.getElementById("box1");
          if (!lt.contains(e.target) && !box1.contains(e.target)) {
            this.showModal = false;
          }
        });
      },
      // 四长统计弹框
      fn2() {
        this.fourLengthOverTree(1);
        this.fourLengthOverviewOther();
        this.showModa2 = !this.showModa2;
        this.szActiveName = "lin"
        this.showModal7 = false;
        this.showModal6 = false;
        this.getLocation()
      },
      out2() {
        document.addEventListener("click", (e) => {
          let lt2 = document.getElementById("leader-tkbg2");
          let box2 = document.getElementById("box2");
          if (!lt2.contains(e.target) && !box2.contains(e.target)) {
            this.showModa2 = false;
          }
        });
      },
      // 事件统计弹框
      fn3() {
        this.showModa3 = !this.showModa3;
        this.getEventStatisticsOther();
        this.showModal7 = false;
        this.showModal6 = false;
        this.getLocation()
      },
      out3() {
        document.addEventListener("click", (e) => {
          let lt3 = document.getElementById("leader-tkbg3");
          let box3 = document.getElementById("box3");
          if (!lt3.contains(e.target) && !box3.contains(e.target)) {
            this.showModa3 = false;
            this.$refs.datePickRef.pickerVisible = false
          }
        });
      },
      // 一网通办弹框
      fn4() {
        this.getEchartstbData1();
        this.getEchartstbData2();
        this.showModa4 = !this.showModa4;
        this.showModal7 = false;
        this.showModal6 = false;
        this.getLocation()
      },
      out4() {
        document.addEventListener("click", (e) => {
          let lt4 = document.getElementById("leader-tbbg4");
          let box4 = document.getElementById("box4");
          if (!lt4.contains(e.target) && !box4.contains(e.target)) {
            this.showModa4 = false;
          }
        });
      },
      // 重点工程弹框
      fn5(val, index) {
        this.getLocation()
        // this.showModal7 = false;
        // this.showModal6 = false;
        //电视墙开始
        // this.$refs.TVWallNoRight.showTVWall();
        // this.$refs.supermap.isEditableLayers = false
        // this.$refs.bottomMenu.showChild = false
        // this.$refs.bottomMenu.showBanChild = false
        // this.$refs.bottomMenu.showChangChild = false
        // //电视墙结束
        // this.introductionToKeyProjects = "";
        // this.introductionToKeyProjectsTitle = "";
        // this.introductionToKeyProjectsImg = "";
        // this.introductionToKeyProjects = val.introduction;
        // this.introductionToKeyProjectsTitle = val.projectTarget;
        // this.introductionToKeyProjectsImg = val.photoId;
        // this.preview(val.cameraList.length > 0 ? val.cameraList[0] : {cameraFactory: 3});
        if (index == 1) {
          initByProject(val.projectId).then((res) => {
            this.showModal7 = false;
            this.showModal6 = false;
            this.$refs.TVWall.showTVWall(res.data, {
              longitude: val.longitude,
              latitude: val.latitude
            }, val, "tup");
          });
        } else if (index == 2) {
          initByArea(val.id).then((res) => {
            if (res.data != null && res.data.length == 1 && res.data[0].treeLabels.length > 1) {
              this.showModal7 = false;
              this.showModal6 = false;
              this.$refs.TVWallNoRight.showTVWall(res.data, {
                longitude: val.longitude,
                latitude: val.latitude
              });
            }
          });
        }
      },
      out5() {
        document.addEventListener("click", (e) => {
          let lt5 = document.getElementById("leader-tbbg5");
          let box5 = document.getElementById("box5");
          if (!lt5.contains(e.target) && !box5.contains(e.target)) {
            this.showModa5 = false;
          }
        });
      },
      // 起火原因统计
      getEchartstkData1() {
        let myChart = this.$echarts.init(document.getElementById("tkCharts1"));
        let legendData = ["起火原因"]; //图例
        let num = [];
        let indicator = [];
        for (let i = 0; i < this.statisticsCausesFire.length; i++) {
          num.push(this.statisticsCausesFire[i].num);
          indicator.push({
            text: this.statisticsCausesFire[i].name,
            max: this.statisticsCausesFire[i].max,
          });
        }
        let dataArr = [{
          value: num,
          itemStyle: {
            normal: {
              lineStyle: {
                color: "#55d7f2",
              },
              // shadowColor: '#4A99FF',
              // shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: {
              // 单项区域填充样式
              color: {
                type: "linear",
                x: 1, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [{
                    offset: 0,
                    color: "#4A99FF",
                  },
                  {
                    offset: 1,
                    color: "rgba(0,0,0,0)",
                  },
                ],
                globalCoord: false,
              },
              opacity: 1, // 区域透明度
            },
          },
        }, ];
        let colorArr = ["#55d7f2", "#4BFFFC"]; //颜色
        let option = {
          color: colorArr,
          legend: {
            orient: "vertical",
            // icon: 'circle', //图例形状
            data: legendData,
            top: 20,
            left: 20,
            itemWidth: 8, // 图例标记的图形宽度。[ default: 25 ]
            itemHeight: 8, // 图例标记的图形高度。[ default: 14 ]
            itemGap: 22, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
            textStyle: {
              fontSize: 10,
              fontWeight: "bold",
              color: "#00E4FF",
            },
          },
          radar: {
            // shape: 'circle',
            name: {
              textStyle: {
                color: "#fff",
                fontSize: 10,
              },
            },
            indicator: indicator,
            splitArea: {
              // 坐标轴在 grid 区域中的分隔区域，默认不显示。
              show: true,
              areaStyle: {
                // 分隔区域的样式设置。
                color: ["rgba(255,255,255,0)", "rgba(255,255,255,0)"], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
              },
            },
            axisLine: {
              //指向外圈文本的分隔线样式
              lineStyle: {
                color: "#153269",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#2b75d2", // 分隔线颜色
                width: 2, // 分隔线线宽
              },
            },
          },
          series: [{
            type: "radar",
            symbolSize: 8,
            symbol: "circle",
            data: dataArr,
          }, ],
        };
        myChart.setOption(option);
      },
      // 当前防火季火灾损失统计
      getEchartstkData2() {
        let that = this;
        let myChart = this.$echarts.init(document.getElementById("tkCharts2"));
        let xData = [];
        let loss = [];
        let blazes = [];
        let lossCounts = 0;
        let blazesCounts = 0;
        for (let i = 0; i < this.fireLossStatistics.length; i++) {
          xData.push(this.fireLossStatistics[i].month);
          lossCounts += this.fireLossStatistics[i].loss;
          blazesCounts += this.fireLossStatistics[i].blazes;
          loss.push(this.fireLossStatistics[i].loss);
          blazes.push(this.fireLossStatistics[i].blazes);
        }
        that.lossCount = lossCounts
        that.blazesCount = blazesCounts
        let option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              lineStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                      offset: 0,
                      color: "rgba(0, 255, 233,0)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(255, 255, 255,1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 255, 233,0)",
                    },
                  ],
                  global: false,
                },
              },
            },
          },
          grid: {
            top: "15%",
            left: "10%",
            right: "5%",
            bottom: "15%",
          },
          legend: {
            data: ["火灾损失总价值", "扑火费用总支出"],
            textStyle: {
              color: "#fff",
              align: "center",
              fontSize: 16,
              show: false,
            },
            x: "center",
          },
          xAxis: [{
            type: "category",
            // 轴线
            axisLine: {
              show: true,
              lineStyle: {
                color: "#85B1B4",
              },
            },
            // 轴刻度线
            axisTick: {
              show: false,
            },
            // 坐标轴名称
            axisLabel: {
              color: "#fff",
              margin: 6,
            },
            // 轴分隔线
            splitLine: {
              show: false,
            },
            // 轴两侧留白
            boundaryGap: ["5%", "5%"],
            data: xData,
          }, ],
          yAxis: [{
            type: "value",
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#85B1B4",
              },
            },
            axisLabel: {
              show: true,
              margin: 10,
              textStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: false,
            },
          }, ],
          series: [{
              name: "火灾损失总价值",
              type: "line",
              showAllSymbol: true,
              symbol: "circle",
              symbolSize: 4,
              lineStyle: {
                normal: {
                  color: "#FF8736",
                },
              },
              label: {
                show: false,
              },
              itemStyle: {
                color: "#FF8736",
                borderColor: "#FF8736",
                borderWidth: 2,
              },
              data: loss,
            },
            {
              name: "扑火费用总支出",
              type: "line",
              showAllSymbol: true,
              symbol: "circle",
              symbolSize: 4,
              lineStyle: {
                normal: {
                  color: "#13EFB7",
                },
              },
              label: {
                show: false,
              },
              itemStyle: {
                color: "#13EFB7",
                borderColor: "#13EFB7",
                borderWidth: 2,
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [{
                        offset: 0,
                        color: "rgba(81,150,164,0.3)",
                      },
                      {
                        offset: 1,
                        color: "rgba(81,150,164,0)",
                      },
                    ],
                    false
                  ),
                },
              },
              data: blazes,
            },
          ],
        };
        myChart.setOption(option);
      },
      // 起火场景统计
      getEchartstkData3() {
        let myChart = this.$echarts.init(document.getElementById("tkCharts3"));
        let num = [];
        let indicator = [];
        for (let i = 0; i < this.statisticsFireSites.length; i++) {
          num.push(this.statisticsFireSites[i].num);
          indicator.push({
            text: this.statisticsFireSites[i].name,
            max: this.statisticsFireSites[i].max,
          });
        }
        let option = {
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            top: "15%",
            containLabel: true,
          },
          tooltip: {},
          dataset: {},
          radar: {
            // shape: 'circle',
            name: {
              textStyle: {
                color: "#fff",
                fontSize: 10,
              },
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.2)",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.2)",
              },
            },
            splitArea: {
              areaStyle: {
                color: ["rgba(1, 15, 49, 0.86)"],
              },
            },
            indicator: indicator,
          },
          series: [{
            type: "radar",
            symbol: "none",
            data: [{
              value: num,
              name: "起火场景",
            }, ],
            itemStyle: {
              color: "",
              show: false,
            },
            lineStyle: {
              color: "#297fac",
            },
            areaStyle: {
              color: "rgba(68, 255, 253, 0.3)",
            },
          }, ],
        };
        myChart.setOption(option);
      },
      // 防火季火灾发生情况
      getEchartstkData4() {
        let myChart = this.$echarts.init(document.getElementById("tkCharts4"));
        let num = [];
        let name = [];
        for (let i = 0; i < this.fireSituation.length; i++) {
          num.push(this.fireSituation[i].num);
          name.push(this.fireSituation[i].name);
        }
        // fireSituation
        let option = {
          title: {
            text: "",
            x: "center",
            y: "4%",
            textStyle: {
              color: "#fff",
              fontSize: "10",
            },
            subtextStyle: {
              color: "#90979c",
              fontSize: "10",
            },
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            top: "20%",
            right: "3%",
            left: "15%",
            bottom: "12%",
          },
          xAxis: [{
            type: "category",
            data: name,
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
            axisLabel: {
              margin: 10,
              color: "#e2e9ff",
              textStyle: {
                fontSize: 10,
              },
            },
          }, ],
          yAxis: [{
            // 设置单位
            name: "",
            axisLabel: {
              formatter: "{value}",
              color: "#e2e9ff",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,1)",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
          }, ],
          series: [{
            type: "bar",
            data: num,
            barWidth: "20px",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [{
                      offset: 0,
                      color: "rgba(0,244,255,1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0,77,167,1)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: [30, 30, 0, 0],
                shadowColor: "rgba(0,160,221,1)",
                shadowBlur: 4,
              },
            },
            label: {
              normal: {
                show: true,
                lineHeight: 20,
                width: 80,
                height: 20,
                backgroundColor: "rgba(0,160,221,0.1)",
                borderRadius: 200,
                position: ["-8", "-46"],
                distance: 1,
                formatter: ["    {d|●}", " {a|{c}}     \n", "    {b|}"].join(
                  ","
                ),
                rich: {
                  d: {
                    color: "#3CDDCF",
                  },
                  a: {
                    color: "#fff",
                    align: "center",
                  },
                  b: {
                    width: 1,
                    height: 30,
                    borderWidth: 1,
                    borderColor: "#234e6c",
                    align: "left",
                  },
                },
              },
            },
          }, ],
        };

        myChart.setOption(option);
      },
      // 事件统计1
      getEchartssjData1() {
        let myChart = this.$echarts.init(document.getElementById("sjCharts1"));
        const man = [];
        const woman = [];
        const indicator = [];
        var bigvalue = 0;
        for (var i in this.eventDetails1) {
          if (this.eventDetails1[i].processed > bigvalue) {
            bigvalue = this.eventDetails1[i].processed;
          }
          if (this.eventDetails1[i].inprocess > bigvalue) {
            bigvalue = this.eventDetails1[i].inprocess;
          }
        }
        for (let i = 0; i < this.eventDetails1.length; i++) {
          man.push(this.eventDetails1[i].processed);
          woman.push(this.eventDetails1[i].inprocess);
          indicator.push({
            name: this.eventDetails1[i].name,
            max: bigvalue,
          });
        }
        let option = {
          tooltip: {
            trigger: "item",
          },
          color: ["#068AC3", "#B2782C"],

          legend: {
            icon: "roundRect",
            // left: '47%',
            top: "90%",
            show: true,
            padding: [3, 5],
            // right: '50',
            y: "1",
            center: 0,
            itemWidth: 20,
            itemHeight: 10,
            itemGap: 26,
            z: 3,
            // orient: 'horizontal',
            data: ["已处理", "待处理"],
            textStyle: {
              fontSize: 10,
              color: "#F1F7FF",
            },
          },
          radar: {
            center: ["50%", "45%"], // 外圆的位置
            radius: "55%",
            name: {
              textStyle: {
                color: "#fff",
                fontSize: 15,
                fontWeight: 400,
                fontFamily: "PingFangSC-Regular,PingFang SC",
                fontStyle: "italic",
              },
            },
            // TODO:
            indicator: indicator,
            splitArea: {
              // 坐标轴在 grid 区域中的分隔区域，默认不显示。
              show: true,
              areaStyle: {
                // 分隔区域的样式设置。
                color: ["#00224A", "#00224A", "#00224A", "#00224A",
                  "#00224A"
                ], // 画布颜色 // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
              },
            },
            axisLine: {
              // 指向外圈文本的分隔线样式
              lineStyle: {
                color: "rgba(255,255,255,0.2)",
              },
            },
            splitLine: {
              lineStyle: {
                type: "solid",
                color: ["#1781BA", "#1781BA"], // 分隔线颜色
                width: 1, // 分隔线线宽
              },
            },
          },
          series: [{
            type: "radar",
            symbolSize: 5,
            data: [{
                // TODO:
                value: man,
                name: "已处理",
                areaStyle: {
                  normal: {
                    color: {
                      type: "radial",
                      x: 0.5,
                      y: 0.5,
                      r: 0.5,
                      colorStops: [{
                          offset: 0,
                          color: "rgba(46,203,255, 0.14)", // 0% 处的颜色
                        },
                        {
                          offset: 0.15,
                          color: "rgba(46,203,255, 0.14)", // 100% 处的颜色
                        },
                        {
                          offset: 0.75,
                          color: "#057FB3", // 100% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#078DC6", // 100% 处的颜色
                        },
                      ],
                      global: false, // 缺省为 false
                    },
                  },
                },
                itemStyle: {
                  // 折线拐点标志的样式。
                  normal: {
                    // 普通状态时的样式
                    lineStyle: {
                      width: 1,
                    },
                    opacity: 0.3,
                  },
                  emphasis: {
                    // 高亮时的样式
                    lineStyle: {
                      width: 5,
                    },
                    opacity: 0,
                  },
                },
              },
              {
                // TODO:
                value: woman,
                name: "待处理",
                areaStyle: {
                  normal: {
                    color: {
                      type: "radial",
                      x: 0.5,
                      y: 0.5,
                      r: 0.5,
                      colorStops: [{
                          offset: 0,
                          color: "rgba(255, 127,0, 0.14)", // 0% 处的颜色
                        },
                        {
                          offset: 0.15,
                          color: "rgba(255, 127,0, 0.14)", // 100% 处的颜色
                        },
                        {
                          offset: 0.75,
                          color: "rgba(2255, 127,0, 0.4)", // 100% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "rgba(255, 127,0, 0.5)", // 100% 处的颜色
                        },
                      ],
                      global: false, // 缺省为 false
                    },
                  },
                },
                itemStyle: {
                  // 折线拐点标志的样式。
                  normal: {
                    // 普通状态时的样式
                    lineStyle: {
                      width: 1,
                    },
                    opacity: 0.3,
                  },
                  emphasis: {
                    // 高亮时的样式
                    lineStyle: {
                      width: 5,
                    },
                    opacity: 0,
                  },
                },
              },
            ],
          }, ],
        };
        myChart.setOption(option);
      },
      // 事件统计2
      getEchartssjData2() {
        let myChart = this.$echarts.init(document.getElementById("sjCharts2"));
        let num = [];
        let time = [];
        let eventTrend =
          "事件趋势 (" + this.eventDetails2[0].name.split("-")[0] + "年)"; // 事件趋势(2023年)
        for (let i = 0; i < this.eventDetails2.length; i++) {
          num.push(this.eventDetails2[i].num);
          time.push(this.eventDetails2[i].name.split("-")[1] + "月");
          // time.push(this.eventDetails2[i].name);
          console.log("this.eventDetails2[i].name=", this.eventDetails2[i].name);
        }

        let option = {
          title: {
            // text: '近6月的平台趋势分析',
            textStyle: {
              align: "center",
              color: "#fff",
              fontSize: 10,
            },
            top: "0%",
            left: "center",
          },
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: [eventTrend], // 事件趋势 标题
            top: "-1%",
            left: "5%",
            // bottom:'0%',
            textStyle: {
              align: "center",
              color: "#fff",
              fontSize: 10,
            },
          },
          grid: {
            left: "3%",
            right: "2%",
            top: "3%",
            bottom: "0%",
            containLabel: true,
          },
          //	    toolbox: {
          //	        feature: {
          //	            saveAsImage: {}
          //	        }
          //	    },
          xAxis: {
            type: "category",
            boundaryGap: false, //坐标轴两边留白
            data: time,
            axisLabel: {
              //坐标轴刻度标签的相关设置。
              interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
              //	margin:15,
              textStyle: {
                color: "#fff",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 10,
              },
              formatter: function(params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 4; //一行显示几个字
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              },
              //rotate:50,
            },
            axisTick: {
              //坐标轴刻度相关设置。
              show: false,
            },
            axisLine: {
              //坐标轴轴线相关设置
              lineStyle: {
                color: "#CAFFFD",
                opacity: 0.3,
              },
            },
            splitLine: {
              //坐标轴在 grid 区域中的分隔线。
              show: false,
              lineStyle: {
                color: "#E5E9ED",
                // 	opacity:0.1
              },
            },
          },
          yAxis: [{
            type: "value",
            min: 0,
            splitNumber: 5,
            axisLabel: {
              textStyle: {
                color: "#EEEEEE",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 10,
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#CAFFFD",
                opacity: 0.3,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "rgba(202, 255, 253, 0.2)",
                // 	opacity:0.1
              },
            },
          }, ],
          series: [{
            name: eventTrend, // 事件趋势 图表
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: "rgba(43, 185, 251, 1)",
                shadowColor: "#2bb9fb",
                shadowBlur: 20,
                borderColor: "#2bb9fb",
                borderWidth: 2,
                lineStyle: {
                  color: "#2bb9fb",
                  width: 1,
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: "rgba(0,0,0,0)",
                    },
                    {
                      offset: 1,
                      color: "rgba(43, 185, 251, 1)",
                    },
                  ]),
                },
              },
            },
            data: num,
          }, ],
        };
        myChart.setOption(option);
      },
      // 一网通办1
      getEchartstbData1() {
        let myChart = this.$echarts.init(document.getElementById("tbCharts1"));
        let charts = {
          // 按顺序排列从大到小
          cityList: [
            this.networkprocessingData.top1DeptName,
            this.networkprocessingData.top2DeptName,
            this.networkprocessingData.top3DeptName,
            this.networkprocessingData.top4DeptName,
            this.networkprocessingData.top5DeptName,
          ],
          cityData: [
            this.networkprocessingData.top1CompletionNumber,
            this.networkprocessingData.top2CompletionNumber,
            this.networkprocessingData.top3CompletionNumber,
            this.networkprocessingData.top4CompletionNumber,
            this.networkprocessingData.top5CompletionNumber,
          ],
        };
        let top10CityList = charts.cityList;
        let top10CityData = charts.cityData;
        let color = ["#ff9500", "#02d8f9", "#027fff"];
        let color1 = ["#ffb349", "#70e9fc", "#4aa4ff"];

        let lineY = [];
        let lineT = [];
        for (var i = 0; i < charts.cityList.length; i++) {
          let x = i;
          if (x > 1) {
            x = 2;
          }
          let data = {
            name: charts.cityitem,
            color: color[x],
            value: top10CityData[i],
            barGap: "-100%",
            itemStyle: {
              normal: {
                show: true,
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [{
                      offset: 0,
                      color: color[x],
                    },
                    {
                      offset: 1,
                      color: color1[x],
                    },
                  ],
                  false
                ),
                barBorderRadius: 5,
              },
              emphasis: {
                shadowBlur: 5,
                shadowColor: "rgba(0, 0, 0, 0.1)",
              },
            },
          };
          let data1 = {
            value: top10CityData[0],
            itemStyle: {
              color: "#001235",
              barBorderRadius: 5,
            },
          };
          lineY.push(data);
          lineT.push(data1);
        }
        let backTop = [];
        for (var i = top10CityData.length - 1; i >= 0; i--) {
          backTop.push(top10CityData[i]);
        }
        let option = {
          title: {
            show: false,
          },
          tooltip: {
            trigger: "item",
            formatter: function(p) {
              if (p.seriesName === "total") {
                return "";
              }
              return p.name + "<br/>" + p.value;
            },
            textStyle: {
              fontSize: 10,
              color: "#fff",
            },
          },
          grid: {
            borderWidth: 0,
            top: "8%",
            left: "5%",
            right: "15%",
            bottom: "6%",
          },
          color: color,
          yAxis: [{
              type: "category",
              inverse: true,
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                show: false,
                inside: false,
              },
              data: top10CityList,
            },
            {
              type: "category",
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                interval: 0,
                color: "#e3c478",
                align: "right",
                margin: 40,
                fontSize: 10,
                formatter: function(val) {
                  return val;
                },
              },
              splitArea: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              data: backTop,
            },
          ],
          xAxis: {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
          series: [{
              name: "total",
              type: "bar",
              zlevel: 1,
              barGap: "-100%",
              barWidth: "6px",
              data: lineT,
              legendHoverLink: false,
            },
            {
              name: "bar",
              type: "bar",
              zlevel: 2,
              barWidth: "6px",
              data: lineY,
              label: {
                normal: {
                  color: "#b3ccf8",
                  show: true,
                  position: [0, "-12px"],
                  textStyle: {
                    fontSize: 10,
                  },
                  formatter: function(a) {
                    let num = "";
                    let str = "";
                    num = "NO." + (a.dataIndex + 1);
                    if (a.dataIndex === 0) {
                      str = "{color1|" + num + "} {color4|" + a.name + "}";
                    } else if (a.dataIndex === 1) {
                      str = "{color2|" + num + "} {color4|" + a.name + "}";
                    } else {
                      str = "{color3|" + num + "} {color4|" + a.name + "}";
                    }
                    return str;
                  },
                  rich: {
                    color1: {
                      color: "#ff9500",
                      fontWeight: 700,
                      fontSize: 10,
                    },
                    color2: {
                      color: "#02d8f9",
                      fontWeight: 700,
                      fontSize: 10,
                    },
                    color3: {
                      color: "#027fff",
                      fontWeight: 700,
                      fontSize: 10,
                    },
                    color4: {
                      color: "#e5eaff",
                      fontSize: 10,
                    },
                  },
                },
              },
            },
          ],
        };
        myChart.setOption(option);
      },
      // 一网通办2
      getEchartstbData2() {
        let myChart = this.$echarts.init(document.getElementById("tbCharts2"));
        let option = {
          tooltip: {
            show: true,
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "line", // 默认为直线，可选为：'line' | 'shadow'
              //修改指识线的颜色
              lineStyle: {
                color: "transparent",
              },
            },
            formatter: function(params) {
              console.log(params);
            },
          },
          grid: {
            top: 40,
            bottom: 40,
            left: 30,
            right: 20,
          },
          xAxis: [{
            type: "category",
            axisTick: {
              show: false,
              alignWithLabel: true, //true 的时候有效，可以保证刻度线和标签对齐
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            data: ["满意", "基本满意", "不满意"],
          }, ],
          yAxis: [{
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(136, 159, 204, .2)",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#374158",
              },
            },
            axisTick: {
              show: false,
            },
          }, ],
          //手势放大柱状图折线图
          dataZoom: {
            type: "inside",
          },
          series: [{
            //给折线图下方添加阴影
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [{
                      offset: 0,
                      color: "rgba(59, 34, 201,.4)",
                    },
                    {
                      offset: 1,
                      color: "rgba(16, 25, 112,0.2)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(59, 34, 201,1)",
                shadowBlur: 10,
              },
            },
            name: "2017 降水量",
            type: "line",
            smooth: true,
            itemStyle: {
              normal: {
                show: false,
                color: "#0d3d8d", //改变折线点的颜色
                lineStyle: {
                  color: "#0d3d8d", //改变折线颜色
                },
                label: {
                  show: false, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 10,
                  },
                },
              },
              emphasis: {
                show: true,
                color: "#0d3d8d",
                borderColor: "#ffffff",
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 10,
                    padding: [10, 10, 10, 10],
                    backgroundColor: "rgba(24, 71, 185, .6)",
                    borderRadius: 4,
                  },
                },
              },
            },
            //          data: ['非常满意', '满意', '基本满意', '不满意', '非常不满意']
            data: [
              // this.networkprocessingData.verySatisfied,
              this.networkprocessingData.satisfied,
              this.networkprocessingData.basicallySatisfied,
              this.networkprocessingData.dissatisfied,
              // this.networkprocessingData.veryDissatisfied,
            ],
          }, ],
        };
        myChart.setOption(option);
      },
      //四长弹层统计1
      fourLeaderChartPop() {
        let that = this;
        that.overviewPercentCount =
          that.overview[0] +
          that.overview[1] +
          that.overview[2] +
          that.overview[3];
        let myChart = this.$echarts.init(document.getElementById("szCharts1"));
        var dataStyle = {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            shadowBlur: 0,
            shadowColor: "#203665",
          },
        };
        let option = {
          series: [{
              name: "第一个圆环",
              type: "pie",
              clockWise: false,
              radius: [100, 80],
              itemStyle: dataStyle,
              hoverAnimation: false,
              center: ["12%", "50%"],
              data: [{
                  // value: 70,
                  value: that.overview[0],
                  percent: that.overviewPercentCount,
                  label: {
                    normal: {
                      rich: {
                        a: {
                          color: "#7DB2FF",
                          align: "center",
                          fontSize: 18,
                          fontWeight: "bold",
                        },
                        b: {
                          color: "#E7E9FF",
                          align: "center",
                          fontSize: 14,
                        },
                      },
                      formatter: function(params) {
                        return (
                          "{b|一岗一人}\n\n" +
                          "{a|" +
                          params.data.value +
                          "人}" +
                          "\n\n{b|" +
                          (params.data.percent != 0 ?
                            parseFloat(
                              (params.data.value / params.data.percent) * 100
                            ).toFixed(2) :
                            0) +
                          "%}"
                        );
                      },
                      position: "center",
                      show: true,
                      textStyle: {
                        fontSize: "14",
                        fontWeight: "normal",
                        color: "#fff",
                      },
                    },
                  },
                  itemStyle: {
                    normal: {
                      color: {
                        colorStops: [{
                            offset: 0,
                            color: "#3CDDFF", // 0% 处的颜色
                          },
                          {
                            offset: 1,
                            color: "#4084FF", // 100% 处的颜色
                          },
                        ],
                      },
                      shadowColor: "#5FB878",
                      shadowBlur: 0,
                    },
                  },
                },
                {
                  value: that.overviewPercentCount - that.overview[0],
                  name: "invisible",
                  itemStyle: {
                    normal: {
                      color: "#154a75",
                    },
                  },
                },
              ],
            },
            {
              name: "第二个圆环",
              type: "pie",
              clockWise: false,
              radius: [100, 80],
              itemStyle: dataStyle,
              hoverAnimation: false,
              center: ["37%", "50%"],
              data: [{
                  // value: 24,
                  value: that.overview[1],
                  percent: that.overviewPercentCount,
                  label: {
                    normal: {
                      rich: {
                        a: {
                          color: "#7DB2FF",
                          align: "center",
                          fontSize: 18,
                          fontWeight: "bold",
                        },
                        b: {
                          color: "#E7E9FF",
                          align: "center",
                          fontSize: 14,
                        },
                      },
                      formatter: function(params) {
                        return (
                          "{b|双岗一人}\n\n" +
                          "{a|" +
                          params.data.value +
                          "人}" +
                          "\n\n{b|" +
                          (params.data.percent != 0 ?
                            parseFloat(
                              (params.data.value / params.data.percent) * 100
                            ).toFixed(2) :
                            0) +
                          "%}"
                          // "\n\n{b|"+300+"%}"
                        );
                      },
                      position: "center",
                      show: true,
                      textStyle: {
                        fontSize: "14",
                        fontWeight: "normal",
                        color: "#fff",
                      },
                    },
                  },
                  itemStyle: {
                    normal: {
                      color: {
                        colorStops: [{
                            offset: 0,
                            color: "#3CDDFF", // 0% 处的颜色
                          },
                          {
                            offset: 1,
                            color: "#4084FF", // 100% 处的颜色
                          },
                        ],
                      },
                      shadowColor: "#01AAED",
                      shadowBlur: 0,
                    },
                  },
                },
                {
                  value: that.overviewPercentCount - that.overview[1],
                  name: "invisible",
                  itemStyle: {
                    normal: {
                      color: "#154a75",
                    },
                  },
                },
              ],
            },
            {
              name: "第三个圆环",
              type: "pie",
              clockWise: false,
              radius: [100, 80],
              itemStyle: dataStyle,
              hoverAnimation: false,
              center: ["62%", "50%"],
              data: [{
                  // value: 11,
                  value: that.overview[2],
                  percent: that.overviewPercentCount,
                  label: {
                    normal: {
                      rich: {
                        a: {
                          color: "#7DB2FF",
                          align: "center",
                          fontSize: 18,
                          fontWeight: "bold",
                        },
                        b: {
                          color: "#E7E9FF",
                          align: "center",
                          fontSize: 14,
                        },
                      },
                      formatter: function(params) {
                        return (
                          "{b|三岗一人}\n\n" +
                          "{a|" +
                          params.data.value +
                          "人}" +
                          "\n\n{b|" +
                          (params.data.percent != 0 ?
                            parseFloat(
                              (params.data.value / params.data.percent) * 100
                            ).toFixed(2) :
                            0) +
                          "%}"
                        );
                      },
                      position: "center",
                      show: true,
                      textStyle: {
                        fontSize: "14",
                        fontWeight: "normal",
                        color: "#fff",
                      },
                    },
                  },
                  itemStyle: {
                    normal: {
                      color: {
                        colorStops: [{
                            offset: 0,
                            color: "#3CDDFF", // 0% 处的颜色
                          },
                          {
                            offset: 1,
                            color: "#4084FF", // 100% 处的颜色
                          },
                        ],
                      },
                      shadowColor: "#FF5722",
                      shadowBlur: 0,
                    },
                  },
                },
                {
                  value: that.overviewPercentCount - that.overview[2],
                  name: "invisible",
                  itemStyle: {
                    normal: {
                      color: "#154a75",
                    },
                  },
                },
              ],
            },
            {
              name: "第四个圆环",
              type: "pie",
              clockWise: false,
              radius: [100, 80],
              itemStyle: dataStyle,
              hoverAnimation: false,
              center: ["87%", "50%"],
              data: [{
                  // value: 11,
                  value: that.overview[3],
                  percent: that.overviewPercentCount,
                  label: {
                    normal: {
                      rich: {
                        a: {
                          color: "#7DB2FF",
                          align: "center",
                          fontSize: 18,
                          fontWeight: "bold",
                        },
                        b: {
                          color: "#E7E9FF",
                          align: "center",
                          fontSize: 14,
                        },
                      },
                      formatter: function(params) {
                        return (
                          "{b|四岗一人}\n\n" +
                          "{a|" +
                          params.data.value +
                          "人}" +
                          "\n\n{b|" +
                          (params.data.percent != 0 ?
                            parseFloat(
                              (params.data.value / params.data.percent) * 100
                            ).toFixed(2) :
                            0) +
                          "%}"
                        );
                      },
                      position: "center",
                      show: true,
                      textStyle: {
                        fontSize: "14",
                        fontWeight: "normal",
                        color: "#fff",
                      },
                    },
                  },
                  itemStyle: {
                    normal: {
                      color: {
                        colorStops: [{
                            offset: 0,
                            color: "#3CDDFF", // 0% 处的颜色
                          },
                          {
                            offset: 1,
                            color: "#4084FF", // 100% 处的颜色
                          },
                        ],
                      },
                      shadowColor: "#FF5722",
                      shadowBlur: 0,
                    },
                  },
                },
                {
                  value: that.overviewPercentCount - that.overview[3],
                  name: "invisible",
                  itemStyle: {
                    normal: {
                      color: "#154a75",
                    },
                  },
                },
              ],
            },
          ],
        };

        if (option) {
          myChart.setOption(option);
        }
      },
      //四长弹层统计2
      fourLeaderChartPop2() {
        //http://192.144.199.210:8080/editor/index.html?chart_id=uNox2ENVrtmsMWRI
        let that = this;
        let myChart = this.$echarts.init(document.getElementById("szCharts2"));
        let option = {
          // backgroundColor: '#000E1A',
          textStyle: {
            color: "#c0c3cd",
            fontSize: 12,
          },
          toolbox: {
            show: false,
            feature: {
              saveAsImage: {
                backgroundColor: "#031245",
              },
              restore: {},
            },
            iconStyle: {
              borderColor: "#c0c3cd",
            },
          },
          legend: {
            top: 10,
            itemWidth: 8,
            itemHeight: 8,
            icon: "circle",
            left: "center",
            padding: 0,
            textStyle: {
              color: "#c0c3cd",
              fontSize: 14,
              padding: [2, 0, 0, 0],
            },
          },
          color: [
            "#63caff",
            "#49beff",
            "#03387a",
            "#03387a",
            "#03387a",
            "#6c93ee",
            "#a9abff",
            "#f7a23f",
            "#27bae7",
            "#ff6d9d",
            "#cb79ff",
            "#f95b5a",
            "#ccaf27",
            "#38b99c",
            "#93d0ff",
            "#bd74e0",
            "#fd77da",
            "#dea700",
          ],
          grid: {
            containLabel: true,
            left: 20,
            right: 10,
            bottom: 30,
            top: 80,
          },
          xAxis: {
            nameTextStyle: {
              color: "#c0c3cd",
              padding: [0, 0, -10, 0],
              fontSize: 11,
            },
            axisLabel: {
              color: "#c0c3cd",
              fontSize: 14,
              interval: 0,
            },
            axisTick: {
              lineStyle: {
                color: "#384267",
                width: 1,
              },
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#384267",
                width: 2,
                type: "dashed",
              },
              show: false,
            },
            data: ["河长", "林长", "路长", "田长"],
            type: "category",
          },
          yAxis: {
            nameTextStyle: {
              color: "#c0c3cd",
              padding: [0, 0, -10, 0],
              fontSize: 14,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              lineStyle: {
                color: "#384267",
                width: 1,
              },
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#384267",
                type: "dashed",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#384267",
                width: 1,
                type: "dashed",
              },
              show: false,
            },
            name: "",
          },
          series: [{
              data: that.fourLengthPlan,
              type: "bar",
              barMaxWidth: "auto",
              barWidth: 50,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [{
                      offset: 0,
                      color: "#0b9eff",
                    },
                    {
                      offset: 1,
                      color: "#63caff",
                    },
                  ],
                },
              },
              label: {
                normal: {
                  position: "top",
                  show: true,
                  color: "white",
                  formatter: "{c}%",
                },
              },
            },
            {
              data: [1, 1, 1, 1, 1, 1, 1, 1],
              type: "pictorialBar",
              barMaxWidth: "10",
              symbol: "diamond",
              symbolOffset: [0, "50%"],
              symbolSize: [50, 15],
            },
            {
              data: that.fourLengthPlan,
              type: "pictorialBar",
              barMaxWidth: "10",
              symbolPosition: "end",
              symbol: "diamond",
              symbolOffset: [0, "-50%"],
              symbolSize: [50, 12],
              zlevel: 2,
            },
            {
              data: [100, 100, 100, 100],
              type: "bar",
              barMaxWidth: "auto",
              barWidth: 50,
              barGap: "-100%",
              zlevel: -1,
            },
            {
              data: [1, 1, 1, 1],
              type: "pictorialBar",
              barMaxWidth: "10",
              symbol: "diamond",
              symbolOffset: [0, "50%"],
              symbolSize: [50, 15],
              zlevel: -2,
            },
            {
              data: [100, 100, 100, 100],
              type: "pictorialBar",
              barMaxWidth: "10",
              symbolPosition: "end",
              symbol: "diamond",
              symbolOffset: [0, "-50%"],
              symbolSize: [50, 12],
              zlevel: -1,
            },
          ],
          tooltip: {
            trigger: "axis",
            show: false,
          },
        };

        if (option) {
          myChart.setOption(option);
        }
      },

      //四长弹层统计3 http://192.144.199.210:8080/editor/index.html?chart_id=dm5L9wA0yywrIPq2
      fourLeaderChartPop3() {
        let that = this;
        let myChart = this.$echarts.init(document.getElementById("szCharts3"));
        // let data = that.fourLengthTask
        let data = [{
            name: "林长",
            value: 25,
          },
          {
            name: "田长",
            value: 25,
          },
          {
            name: "路长",
            value: 25,
          },
          {
            name: "河长",
            value: 25,
          },
        ];
        let name = data.map((item) => item.name);
        let value = data.map((item) => item.value);
        let sum = 25;
        let color = [
          ["#198AFD", "#0FDEAE", "#04d030", "#fdda13"],
          [
            "rgba(24, 183, 142,0.1)",
            "rgba(1, 179, 238,0.1)",
            "rgba(22, 75, 205,0.1)",
            "rgba(52, 52, 176,0.1)",
          ],
        ];
        let series = [];
        let yAxis = [];
        for (let i = 0; i < data.length; i++) {
          series.push({
            name: "",
            type: "pie",
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [80 - i * 10 + "%", 75 - i * 10 + "%"],
            center: ["50%", "60%"],
            label: {
              show: false,
            },
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              borderWidth: 5,
            },
            data: [{
                value: data[i].value,
                name: data[i].name,
              },
              {
                value: sum - data[i].value,
                name: "",
                itemStyle: {
                  color: "transparent",
                },
                tooltip: {
                  show: false,
                },
                hoverAnimation: false,
              },
            ],
          });
          series.push({
            name: "",
            type: "pie",
            silent: true,
            z: 1,
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [80 - i * 10 + "%", 75 - i * 10 + "%"],
            center: ["50%", "60%"],
            label: {
              show: false,
            },
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              borderWidth: 5,
            },
            data: [{
                value: 7.5,
                itemStyle: {
                  color: color[1][i],
                },
                tooltip: {
                  show: false,
                },
                hoverAnimation: false,
              },
              {
                value: 2.5,
                itemStyle: {
                  color: "rgba(0,0,0,0)",
                  borderWidth: 0,
                },
                tooltip: {
                  show: false,
                },
                hoverAnimation: false,
              },
            ],
          });
          yAxis.push(
            name[i] +
            (((data[i].value / sum) * 100).toFixed(2) == "NaN" ?
              "0" :
              ((data[i].value / sum) * 100).toFixed(2)) +
            "%"
          );
        }
        let option = {
          color: color[0],
          legend: {
            show: false,
            icon: "circle",
            top: "center",
            right: "10%",
            data: name,
            orient: "vertical",
            formatter: (name) => {
              return "{title|" + name + "}";
            },
            textStyle: {
              rich: {
                title: {
                  fontSize: 14,
                  lineHeight: 20,
                  color: "rgb(0, 178, 246)",
                },
                value: {
                  fontSize: 14,
                  lineHeight: 20,
                  color: "#fff",
                },
              },
            },
          },
          tooltip: {
            show: true,
            trigger: "item",
            formatter: "{a}<br>{b}:{c}({d}%)",
          },
          grid: {
            top: "50%",
            left: "34%",
            width: "40%",
            height: "20%",
            containLabel: false,
          },
          yAxis: [{
            type: "category",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              inside: true,
              textStyle: {
                color: "#fff",
                fontSize: 14,
              },
              show: true,
            },
            data: yAxis,
          }, ],
          xAxis: [{
            show: false,
          }, ],
          series: series,
        };

        if (option) {
          myChart.setOption(option);
        }
      },

      // 四长统计 tree
      handleNodeClick(data) {
        console.log(data);
        this.leaderData = data.title;
      },
      //tab 切换
      tabHandleClick(tab, event) {
        console.log(tab, event);
      },
      // 当前时间
      getNowTime() {
        var date = new Date();
        var sign2 = ":";
        var year = date.getFullYear(); // 年
        var month = date.getMonth() + 1; // 月
        var day = date.getDate(); // 日
        var hour = date.getHours(); // 时
        var minutes = date.getMinutes(); // 分
        var seconds = date.getSeconds(); //秒
        var weekArr = [
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
          "星期天",
        ];
        var week = weekArr[date.getDay()];
        // 给一位数的数据前面加 “0”
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (day >= 0 && day <= 9) {
          day = "0" + day;
        }
        if (hour >= 0 && hour <= 9) {
          hour = "0" + hour;
        }
        if (minutes >= 0 && minutes <= 9) {
          minutes = "0" + minutes;
        }
        if (seconds >= 0 && seconds <= 9) {
          seconds = "0" + seconds;
        }
        this.nowTime = hour + sign2 + minutes + sign2 + seconds;
      },
      currentTime() {
        setInterval(() => {
          this.getNowTime();
        }, 1000);
      },
      showEventDialog(eventCode) {
        //事件信息弹出
        this.$refs.eventdetailsdialog.showEventDialog(eventCode);
      },
      /** ----------------------------------摄像头预览开始------------------------------------- */
      alertLogin: function() {
        this.$modal.msg("登录中....");
      },
      alertLoginSuccess: function() {
        this.$modal.msgSuccess("登录成功！");
      },
      alertLoginFailed: function() {
        this.$modal.msgError("登陆失败！");
      },
      alertReinstall: function() {
        this.$modal.msgWarning("请重新安装客户端");
      },
      cancelEventLocationShow() {
        if (this.oWebControl != null) {
          this.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
          this.oWebControl.JS_Disconnect().then(
            function() {
              // 断开与插件服务连接成功
            },
            function() {
              // 断开与插件服务连接失败
            }
          );
        }
      },
      /** 预览按钮操作 */
      preview(cameraParam) {
        this.showTVWallMine(cameraParam.code, cameraParam.name, cameraParam.type);
        //   if (cameraParam.cameraFactory == "1") {
        //     getDahuaVideoServer().then((newResponse) => {
        //       console.log(newResponse);
        //       this.ws.detectConnectQt().then((res) => {
        //         if (res) {
        //           // 连接客户端成功
        //           this.alertLogin();
        //           this.ws.login({
        //             loginIp: newResponse.loginIp,
        //             loginPort: newResponse.loginPort,
        //             userName: newResponse.userName,
        //             userPwd: newResponse.userPwd,
        //             token: "",
        //             https: 1,
        //           });
        //           this.ws.on("loginState", (res) => {
        //             this.isLogin = res;
        //             console.log("---res-----", res);
        //             if (res) {
        //               this.alertLoginSuccess();
        //               this.activePanel = "key2";
        //               this.realTimeVideoDialog(cameraParam.cameraCode);
        //             } else {
        //               this.alertLoginFailed();
        //             }
        //           });
        //         } else {
        //           // 连接客户端失败
        //           this.alertReinstall();
        //         }
        //       });
        //     });
        //   } else if (cameraParam.cameraFactory == "0") {
        //     let that = this;
        //     that.cameraVisible = true;
        //     getHaiKangVideoServer({
        //       cameraCode: cameraParam.cameraCode,
        //     }).then((newResponse) => {
        //       that.cameraTitle = "摄像头-" + newResponse.data.cameraName;
        //       that.initPlugin(
        //         newResponse.data.appkey,
        //         newResponse.data.loginIp,
        //         newResponse.data.secret,
        //         newResponse.data.loginPort
        //       );
        //       setTimeout(function () {
        //         that.playhk(newResponse.data.channelCode);
        //       }, 5000);
        //     });
        //   }
      },
      realTimeVideoDialog(cameraParams) {
        // 调用弹窗实时播放接口
        if (!this.isLogin) {
          this.$Message.info("正在登陆客户端，请稍等......");
          return false;
        }
        const params = [cameraParams];
        this.ws.openVideo(params);
      },
      /** ----------------------------------摄像头预览结束------------------------------------- */

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

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

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

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

          that.oWebControl
            .JS_RequestInterface({
              funcName: "init",
              argument: JSON.stringify({
                appkey: appkey, //API网关提供的appkey
                secret: secret, //API网关提供的secret
                ip: ip, //API网关IP地址
                playMode: playMode, //播放模式（决定显示预览还是回放界面）
                port: port, //端口
                snapDir: snapDir, //抓图存储路径
                videoDir: videoDir, //紧急录像或录像剪辑存储路径
                layout: layout, //布局
                enableHTTPS: enableHTTPS, //是否启用HTTPS协议
                encryptedFields: encryptedFields, //加密字段
                showToolbar: showToolbar, //是否显示工具栏
                showSmart: showSmart, //是否显示智能信息
                buttonIDs: buttonIDs, //自定义工具条按钮
              }),
            })
            .then(function(oData) {
              that.oWebControl.JS_Resize(1020, 600); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
            });
        });
      },
      //获取公钥
      getPubKey(callback) {
        let that = this;
        that.oWebControl
          .JS_RequestInterface({
            funcName: "getRSAPubKey",
            argument: JSON.stringify({
              keyLength: 1024,
            }),
          })
          .then(function(oData) {
            console.log(oData);
            if (oData.responseMsg.data) {
              that.pubKey = oData.responseMsg.data;
              callback();
            }
          });
      },
      //RSA加密
      setEncrypt(value) {
        var encrypt = new JSEncrypt();
        encrypt.setPublicKey(this.pubKey);
        return encrypt.encrypt(value);
      },
      /** ----------------------------------海康摄像头预览结束------------------------------------- */
      layerCheck() {
        this.getLocation()
        this.$refs.supermap.reload(this.layerCheckList);
      },
    },
    // 局部过滤器
    filters: {
      ellipsisFont8(value) {
        if (!value) return "";
        if (value.length > 8) {
          return value.slice(0, 8) + "...";
        }
        return value;
      },
    },
  };
</script>

<style lang="scss">
  @import "@/assets/styles/base.scss";
  @import url("../assets/styles/leader-index.scss");

  .sj-container {
    background: #020d1f;
    font-family: "syht";
    position: absolute;
    overflow: hidden;
  }

  .zdgc {

    //轮播
    .el-carousel__item h3 {
      color: #475669;
      font-size: 18px;
      opacity: 0.75;
      line-height: 300px;
      margin: 0;
    }

    .el-carousel__button {
      width: 3px;
      background: #0bf3f7;
    }

    .el-carousel__arrow--left {
      left: 0;
    }

    .el-carousel__arrow--right {
      right: 0;
    }
  }

  .header {
    z-index: 10;
    position: absolute;
    width: 100%;
    top: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 8vh;

    .head-left {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      width: 50%;
      background: url("../assets/images/leader-topl.png") no-repeat top left;

      img {
        width: 3.5rem;
        height: 3.5rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
      }

      .el-select-dropdown {
        border: none;
        background-color: rgba(1, 28, 82, 0.8);
      }

      //输入框
      .el-input__inner {
        color: #eee !important;
        border: 0px;
        padding-left: 2rem;
        background-size: 100% 100%;
        background: url("../assets/images/leader-topk.png") no-repeat center;
      }

      .el-input {
        position: relative;
      }

      .el-input:after {
        content: " ";
        display: block;
        position: absolute;
        left: 0.5rem;
        top: 0.25rem;
        width: 1rem;
        height: 1.3rem;
        z-index: 11;
        background: url("../assets/images/leader-icon1.png") no-repeat center;
      }

      //聚焦时的样式
      .el-select .el-input.is-focus .el-input__inner {
        border-color: #0b61aa;
        background-color: rgba(1, 28, 82, 0.8);
        color: #00d3e9;
      }

      //下拉框选中
      .el-select-dropdown__item {
        color: #eee;
      }

      //鼠标经过下拉框
      .el-select-dropdown__item.hover,
      .el-select-dropdown__item:hover {
        color: #00d3e9;
        background-color: #0f3360;
      }

      .select {
        width: 8rem;
        height: 2.4rem;
        z-index: 1000;
        display: flex;
        align-items: center;
        border-radius: 30px;
        margin-right: 1rem;
      }

      .select2 {
        width: 10rem;
        height: 2.4rem;
        z-index: 1000;
        display: flex;
        align-items: center;
        border-radius: 30px;
        margin-right: 1rem;

        //输入框
        .el-input__inner {
          color: #eee !important;
          border: 0px;
          padding-left: 2rem;
          background-size: 100% 100%;
          background: url("../assets/images/leader-topk.png") no-repeat center;
          background-size: cover;
        }
      }
    }

    .head-center {
      position: absolute;
      z-index: 10;
      width: 835px;
      height: 10vh;
      left: 50%;
      margin-left: -417px;
      background: url("../assets/images/leader-topc.png") no-repeat top center;
      cursor: pointer;

      span {
        font-family: $fontHk;
        line-height: 8vh;
        font-size: 2.2rem;
        text-align: center;
        display: block;
        background-image: -webkit-linear-gradient(bottom, #e6fcff, #b2e6fc);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: 0.2rem;
      }
    }

    .head-right {
      width: 50%;
      background: url("../assets/images/leader-topr.png") no-repeat top right;

      .head-time {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        line-height: 7vh;
        background: url("../assets/images/leader-topk2.png") no-repeat 100%;
        // background-size: contain;

        i {
          display: inline-block;
          width: 2rem;
          height: 2rem;
        }

        .head-fx {
          background: url("../assets/images/leader-icon-fengxiang.png") no-repeat 5px 5px;
        }

        .head-fs {
          background: url("../assets/images/leader-icon2.png") no-repeat 5px 5px;
        }

        .head-jsl {
          background: url("../assets/images/leader-icon3.png") no-repeat 4px 5px;
        }

        .head-wd {
          background: url("../assets/images/leader-icon4.png") no-repeat 5px 6px;
        }
      }

      span {
        margin-right: 1rem;
        color: #fff;
        font-size: 1rem;
        display: flex;
        flex-direction: row;
        align-items: center;

        u {
          text-decoration: none;
        }
      }

      .timer {
        padding-right: 1rem;
        font-weight: bold;
        font-style: oblique;
      }
    }
  }

  /*左侧 右侧*/
  .con-left {
    position: absolute;
    left: 0.2rem;
    top: 10vh;
    z-index: 9;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .con-right {
    position: absolute;
    right: 0.2rem;
    top: 10vh;
    z-index: 9;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .con-div {
    border: 1px solid #15519b;
    position: relative;
    height: 26.7vh;
    width: 18.75vw;
    margin-bottom: 0.8rem;
    overflow: hidden;
    background: linear-gradient(rgba(4, 23, 62, 0.6), rgba(0, 28, 70, 0.6));

    /* 标准的语法 */
    .head-di {
      position: absolute;
      right: 0px;
      bottom: 0px;
      width: 7rem;
      height: 1rem;
      color: #02a3e9;
    }

    .con-tit {
      height: 2rem;
      position: relative;

      a {
        background: url("../assets/images/leader-titbg.png") no-repeat 0px 0px;
        display: flex;
        flex-direction: row;
        justify-content: left;
        align-content: center;
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 3rem;
        z-index: 3;
        line-height: 2.4rem;
        background-size: 100% 100%;
        letter-spacing: 1px;
        transition: all 0.5s;

        i {
          background: url("../assets/images/leader-tit1.png") no-repeat 6px 8px;
          display: block;
          width: 1.8rem;
          height: 1.8rem;
          animation: cccbt2 4s infinite;
        }

        b {
          display: inline-block;
          height: 3rem;
          padding-left: 0.4rem;
          color: #fff;
          font-size: 0.9rem;
        }
      }

      span {
        position: absolute;
        right: 0px;
        top: 0px;
        color: #fff;
        font-size: 0.8rem;
        z-index: 10;
        height: 2.2rem;
        padding-right: 1rem;
        line-height: 2.2rem;
        display: flex;

        .tit_fire {
          background: url("../assets/images/leader-titfire.png") no-repeat 0px 6px;
          width: 1.5rem;
          height: 1.7rem;
          z-index: 9;
          display: inline-block;
        }
      }
    }

    .con-tit a:hover i {
      animation: rotate 3s linear infinite;
      transform-origin: center center;
    }

    @keyframes rotate {
      to {
        transform: rotateY(360deg);
      }
    }

    .cont-np {
      padding: 0px !important;
    }

    .cont {
      padding: 1rem 0.5rem;

      .cont-top1 {
        position: relative;
        width: 92%;
        margin: 0px auto;
        height: 3.5rem;
        line-height: 3.5rem;

        img {
          position: absolute;
          left: 0rem;
          z-index: 1;
        }

        p {
          background: url("../assets/images/leader-iconbg.png") no-repeat left;
          color: #fff;
          width: 20rem;
          z-index: 0;
          position: absolute;
          left: 2rem;
          padding-left: 2rem;
          font-size: 0.6rem;

          b {
            padding: 0px 0.2rem;
            //font-size: 1rem;
            font-weight: bold;
          }
        }

        a {
          background: url("../assets/images/leader-iconbg2.png") no-repeat center;
          width: 6rem;
          z-index: 1;
          position: absolute;
          right: 0rem;
          text-align: center;
          color: #fff;
          font-size: 0.7rem;
        }
      }

      .cont-top2 {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 2.5rem;
        line-height: 2.5rem;
        justify-content: center;
        text-align: center;
        margin-top: 0.8rem;

        span {
          width: 33%;
          color: #fff;
          font-size: 0.6rem;

          b {
            padding-left: 0.2rem;
          }
        }

        span:nth-child(1) {
          display: block;
          background: url("../assets/images/leader-iconbg3.png") no-repeat center;
          background-size: 100% 100%;
        }

        span:nth-child(2) {
          display: block;
          background: url("../assets/images/leader-iconbg4.png") no-repeat center;
          background-size: 100% 100%;

          b {
            //font-size: 1rem;
          }
        }

        span:nth-child(3) {
          display: block;
          background: url("../assets/images/leader-iconbg5.png") no-repeat center;
          background-size: 100% 100%;
        }
      }

      .cont-top3 {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 2.5rem;
        line-height: 2.5rem;
        justify-content: center;
        text-align: center;

        span {
          cursor: pointer;
          width: 25%;
          display: block;
          background: url("../assets/images/leader-iconbg8.png") no-repeat center;
          background-size: 100% 100%;
          color: #fff;
          font-size: 0.9rem;
        }

        span.active {
          background: url("../assets/images/leader-iconbg8-on.png") no-repeat center;
          background-size: 100% 100%;
          font-weight: bold;
        }
      }

      .con-list {
        margin-top: 0.2rem;
        height: 9rem;
        overflow-y: scroll;

        .tabList a {
          display: flex;
          flex-direction: row;
          width: 100%;
          height: 2rem;
          line-height: 2rem;
          color: #fff;
          font-size: 0.6rem;
          padding-left: 1.5rem;
          background: linear-gradient(180deg,
              rgba($color: #22a0e1, $alpha: 0.15),
              rgba($color: #173fbf, $alpha: 0.15));
          position: relative;

          span:after {
            display: block;
            content: "";
            width: 6px;
            height: 6px;
            background: #00b2de;
            box-shadow: 0px 0px 6px #00b2de;
            position: absolute;
            left: 0.7rem;
            top: 0.8rem;
          }

          u {
            margin-left: auto;
            padding: 0px 1rem 0px 1.5rem;
            text-decoration: none;
            color: #00b2de;
            text-shadow: 0px 0px 6px #00b2de;
            background: url("../assets/images/leader-icon6.png") no-repeat left center;
          }
        }
      }

      .tabList a:hover {
        text-shadow: 0px 0px 6px #25d5de;

        u {
          text-shadow: 0px 0px 6px #25d5de;
        }
      }

      .con-list::-webkit-scrollbar {
        width: 0px;
        height: 0px;
      }

      .cont-top4 {
        .cont-row {
          display: flex;
          flex-direction: row;
          justify-content: space-between;

          .c-left {
            width: 78%;

            p {
              height: 2.1rem;
              line-height: 2.1rem;
              width: 100%;
              padding: 0px 0.8rem;
              background: url("../assets/images/leader-iconbg9.png") no-repeat center;
              background-size: 99% 100%;
              margin-bottom: 0.2rem;
              margin-right: 0.2rem;
              font-size: 0.6rem;
              color: #fff;

              b {
                float: right;
                font-family: "pm";
                letter-spacing: 0.1rem;
                font-size: 1rem;
              }
            }
          }

          .c-right {
            width: 39%;
            background: url("../assets/images/leader-iconbg10.png") no-repeat center;
            background-size: 99% 100%;
            height: 4.4rem;
            padding: 0px 0.8rem;
            display: flex;
            flex-direction: row;
            align-items: center;

            i {
              display: block;
              height: 100%;
              width: 2rem;
            }

            i.ss {
              background: url("../assets/images/leader-icon7.png") no-repeat center;
            }

            i.xj {
              background: url("../assets/images/leader-icon8.png") no-repeat center;
            }

            .c-txt {
              padding-left: 0.5rem;

              p {
                color: #fff;
                font-size: 0.6rem;
              }

              b {
                font-family: "pm";
                color: #fff;
                font-size: 1.25rem;
              }
            }
          }
        }

        .cont-com {
          display: flex;
          flex-direction: column;
          align-items: center;

          .con-txt {
            display: flex;
            flex-direction: row;
            background: url("../assets/images/leader-iconbg11.png") no-repeat center;
            background-size: 100% 100%;
            padding: 0px 0rem;
            width: 100%;
            height: 3.2rem;
            margin-bottom: 0.2rem;
            align-items: center;

            h5 {
              width: 33%;
              height: 100%;
              align-content: center;
              display: flex;
              flex-direction: column;
              justify-content: center;
              color: #fff;
              text-align: center;

              p {
                font-size: 0.6rem;
                /*padding-bottom: 0.1rem;*/
              }

              .jdChart {
                height: 0.5rem;
                width: 100%;
                padding-bottom: 0.1rem;
              }

              b {
                font-family: "pm";
                font-size: 1rem;
                letter-spacing: 1px;
                padding-bottom: 0.3rem;
              }

              h6 {
                padding-top: 0.4rem;
                font-size: 0.6rem;
              }
            }

            h5:nth-child(1),
            h5:nth-child(2) {
              background: url("../assets/images/leader-iconx.png") no-repeat right center;
              background-size: 0.1rem;
            }

            /*h5:nth-child(2),*/
            /*h5:nth-child(3) {*/
            /*padding-left: 0.8rem;*/
            /*}*/
          }
        }
      }
    }

    .ssgz {
      display: flex;
      flex-direction: column;
      justify-content: center;

      .conChart1 {
        width: 100%;
        height: 9rem;
      }
    }

    .sstj {
      display: flex;
      flex-direction: column;
      justify-content: center;

      .conChart2 {
        width: 100%;
        height: 9rem;
      }
    }

    .sstj2 {
      display: flex;
      flex-direction: column;
      justify-content: center;

      .conChart3 {
        width: 100%;
        height: 10rem;
      }
    }
  }

  /*底部*/
  .footer {
    width: 100%;
    position: absolute;
    bottom: 0px;
    z-index: 9;
    background: url("../assets/images/leader-btmbg.png") no-repeat bottom center;

    .foot-btn {
      text-align: center;
      display: flex;
      flex-direction: row;
      justify-content: center;
      padding-bottom: 0.6rem;

      a {
        display: flex;
        flex-direction: column;
        margin: 0px 1.5rem;
        transform: scale(1, 1) translateY(0px);
        transition: all 1s;

        span {
          transition: all 0.5s;
          width: 4.5rem;
          height: 4.5rem;
          position: relative;
          justify-content: center;
          display: flex;
          flex-direction: column;

          u {
            background: url("../assets/images/leader-footy.png") no-repeat center;
            position: absolute;
            display: block;
            width: 4.5rem;
            height: 4.5rem;
            animation: circle 6s infinite linear;
          }

          i {
            background: url("../assets/images/leader-footy2.png") no-repeat center;
            position: absolute;
            display: block;
            width: 4.5rem;
            height: 4.5rem;
            animation: circle2 6s infinite linear;
          }
        }

        i {
          text-align: center;
          color: #fff;
          font-size: 1rem;
          font-weight: bold;
          font-style: normal;
          transition: all 0.5s;
        }
      }
    }
  }

  @keyframes circle {
    0% {
      transform: rotate(0deg);
      opacity: 0.6;
    }

    100% {
      transform: rotate(-360deg);
      opacity: 1;
    }
  }

  @keyframes circle2 {
    0% {
      transform: rotate(0deg);
      opacity: 0.6;
    }

    100% {
      transform: rotate(360deg);
      opacity: 1;
    }
  }

  .foot-btn a:hover {
    transform: scale(1.1, 1.1) translateY(-10px);
    transition: all 0.5s;
  }

  .foot-btn a:hover span {
    cursor: pointer;
    animation: cccbt 2s infinite;
  }

  .foot-btn a:hover i {
    text-shadow: 0px 0px 6px #90e9ff;
    animation: shinetext2 1s infinite;
  }

  .foot-btn a.on {
    transform: scale(1.1, 1.1) translateY(-10px);
    transition: all 0.5s;
    box-shadow: none;
  }

  .foot-btn a.on span {
    cursor: pointer;
    animation: cccbt 2s infinite;
  }

  .foot-btn a.on i {
    text-shadow: 0px 0px 6px #90e9ff;
    animation: shinetext2 1s infinite;
  }

  /*图片闪光*/
  @keyframes cccbt {
    0% {
      -webkit-filter: hue-rotate(0deg) brightness(1);
    }

    25% {
      -webkit-filter: hue-rotate(0deg) brightness(1.1);
    }

    50% {
      -webkit-filter: hue-rotate(0deg) brightness(1);
    }

    75% {
      -webkit-filter: hue-rotate(0deg) brightness(1.3);
    }

    100% {
      -webkit-filter: hue-rotate(0deg) brightness(1);
    }
  }

  @keyframes cccbt2 {
    0% {
      -webkit-filter: hue-rotate(0deg) brightness(1);
    }

    25% {
      -webkit-filter: hue-rotate(0deg) brightness(1.1);
    }

    50% {
      -webkit-filter: hue-rotate(0deg) brightness(2);
    }

    75% {
      -webkit-filter: hue-rotate(0deg) brightness(1.3);
    }

    100% {
      -webkit-filter: hue-rotate(0deg) brightness(1);
    }
  }

  /*文字闪光*/
  @keyframes shinetext2 {
    0% {
      text-shadow: 0 0 0px #1aa7ff;
    }

    50% {
      text-shadow: 0 0 10px #90d3ff;
    }

    100% {
      text-shadow: 0 0 0px #1aa7ff;
    }
  }

  /*重点工程轮播*/
  /* 图片容器样式 */
  .SwiperBox {
    position: relative;
    width: 100%;
    height: 13rem;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
  }

  .imgBox {
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    height: 13rem;
    width: 100%;
    justify-content: flex-start;
  }

  /* 图片默认样式 */
  .imgBox img {
    position: absolute;
    top: 4rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .imgBox span {
    position: absolute;
    display: block;
    padding: 0.5rem 1rem 0.5rem 1rem;
    color: #fff;
    font-size: 0.6rem;
    /*font-weight: 900;*/
    background-size: 100% 100%;
    cursor: pointer;
    width: 40%;
  }

  .imgBox span:hover {
    color: #00f6ff;
  }

  .imgBox span:nth-child(1) {
    background: url("../assets/images/leader-iconbg6.png") no-repeat bottom center;
    background-size: 100% 100%;
    top: 2rem;
    left: 1.9rem;
  }

  .imgBox span:nth-child(2) {
    background: url("../assets/images/leader-iconbg7.png") no-repeat bottom center;
    background-size: 100% 100%;
    top: 2rem;
    right: 1.9rem;
  }

  // .imgBox span:nth-child(3) {
  //   background: url("../assets/images/leader-iconbg6.png") no-repeat bottom center;
  //   background-size: 100% 100%;
  //   top: 8.5rem;
  //   left: 2rem;
  // }

  // .imgBox span:nth-child(4) {
  //   background: url("../assets/images/leader-iconbg7.png") no-repeat bottom center;
  //   background-size: 100% 100%;
  //   top: 8.5rem;
  //   right: 2rem;
  // }

  .imgBox span:nth-child(3) {
    background: url("../assets/images/leader-iconbg6.png") no-repeat bottom center;
    background-size: 100% 100%;
    top: 5.2rem;
    left: 1.5rem;
  }

  .imgBox span:nth-child(4) {
    background: url("../assets/images/leader-iconbg7.png") no-repeat bottom center;
    background-size: 100% 100%;
    top: 5.2rem;
    right: 1.5rem;
  }

  .imgBox span:nth-child(5) {
    background: url("../assets/images/leader-iconbg6.png") no-repeat bottom center;
    background-size: 100% 100%;
    top: 8.5rem;
    left: 2rem;
  }

  .imgBox span:nth-child(6) {
    background: url("../assets/images/leader-iconbg7.png") no-repeat bottom center;
    background-size: 100% 100%;
    top: 8.5rem;
    right: 2rem;
  }

  /* 两个按钮共有的样式,也可直接使用箭头图片替代 */
  .leftBtn,
  .rightBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background: rgba(109, 109, 109, 0.445);*/
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;

    img {
      width: 0.6rem;
      display: block;
      opacity: 0.9;
    }
  }

  .leftBtn {
    left: -0.2rem;
  }

  .rightBtn {
    right: -0.2rem;
  }

  /* 下方指示器盒子 */
  .instBox {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    display: flex;
  }

  /* 小圆点 */
  .inst {
    width: 6px;
    height: 6px;
    border: 1px solid #ccc;
    margin-right: 8px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
  }

  .inst:last-child {
    margin-right: 0px;
  }

  .instActv {
    border: 1px solid #1bdbf4;
    background: #1bdbf4;
  }

  /* 实时关注 弹框样式 */
  #leader-tkbg {
    position: fixed;
    top: 10%;
    left: 20.5%;
    width: calc(100% - 49rem);
    height: auto;
    padding: 2rem;
    z-index: 999;
    background: #021636;
    border: 1px solid #00ffde;
    /*box-shadow: inset 0px 0px 16px 0px rgba(0, 255, 222, .5);*/
  }

  .tk-tit {
    padding-left: 2rem;
    background: url("../assets/images/leader-tit1.png") no-repeat left center;
    font-size: 0.9rem;
    color: #fff;
    font-weight: 900;
  }

  .tk-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem 2rem;
    align-items: center;

    p {
      background: url("../assets/images/leader-tk1.png") no-repeat bottom center;
      color: #fff;
      font-size: 0.9rem;
      height: 2rem;
      width: 50%;
      text-align: center;

      img {
        margin-right: 0.2rem;
      }

      u {
        padding-left: 0.8rem;
        text-decoration: none;
      }
    }
  }

  .tk-close {
    width: 1.3rem;
    height: 1.3rem;
    color: #346ebc;
    font-size: 1.3rem;
    position: absolute;
    right: 0.8rem;
    top: 0.8rem;
    cursor: pointer;
  }

  .ssgz-tk {
    position: relative;
    display: flex;
    flex-direction: column;

    .ssgz-tkcom {
      display: flex;
      flex-direction: row;

      .ssgz-row {
        width: 40%;
      }

      .ssgz-row2 {
        width: 60%;

        .tk-tit {
          padding-left: 2rem;
          background: url("../assets/images/leader-tit1.png") no-repeat left center;
          font-size: 1rem;
          color: #fff;
          font-weight: 900;
        }
      }
    }
  }

  .ssgz-tk::after {
    content: "";
    position: absolute;
    left: -72px;
    top: -24px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-right: 20px solid #021636;
    border-left: 20px solid transparent;
    border-bottom: 20px solid transparent;
    /*box-shadow: inset 0px 0px 16px 0px rgba(0, 255, 222, .5);*/
  }

  .ssgz-tk::before {
    content: "";
    position: absolute;
    left: -75px;
    top: -25px;
    width: 0;
    height: 0;
    border-top: 21px solid transparent;
    border-right: 21px solid #00ffde;
    border-left: 21px solid transparent;
    border-bottom: 21px solid transparent;
  }

  /* 事件统计弹框样式 */
  #leader-tkbg3 {
    position: fixed;
    top: 38.3%;
    left: 20.5%;
    width: calc(100% - 49rem);
    height: auto;
    padding: 1rem 2rem;
    z-index: 999;
    background: #021636;
    border: 1px solid #00ffde;
    /*box-shadow: inset 0px 0px 16px 0px rgba(0, 255, 222, .5);*/
  }

  .sstj-row {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .sjtj-tk::after {
    content: "";
    position: absolute;
    left: -40px;
    top: 5px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-right: 20px solid #021636;
    border-left: 20px solid transparent;
    border-bottom: 20px solid transparent;
    /*box-shadow: inset 0px 0px 16px 0px rgba(0, 255, 222, .5);*/
  }

  .sjtj-tk::before {
    content: "";
    position: absolute;
    left: -43px;
    top: 4px;
    width: 0;
    height: 0;
    border-top: 21px solid transparent;
    border-right: 21px solid #00ffde;
    border-left: 21px solid transparent;
    border-bottom: 21px solid transparent;
  }

  /* 一网通办弹框样式 */
  #leader-tbbg4 {
    position: fixed;
    top: 66.4%;
    left: 20.5%;
    width: calc(100% - 49rem);
    height: auto;
    padding: 1rem 2rem;
    z-index: 999;
    background: #021636;
    border: 1px solid #00ffde;
    /*box-shadow: inset 0px 0px 16px 0px rgba(0, 255, 222, .5);*/
  }

  .tbtj-row {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .tbtj-tk::after {
    content: "";
    position: absolute;
    left: -40px;
    top: 5px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-right: 20px solid #021636;
    border-left: 20px solid transparent;
    border-bottom: 20px solid transparent;
    /*box-shadow: inset 0px 0px 16px 0px rgba(0, 255, 222, .5);*/
  }

  .tbtj-tk::before {
    content: "";
    position: absolute;
    left: -43px;
    top: 4px;
    width: 0;
    height: 0;
    border-top: 21px solid transparent;
    border-right: 21px solid #00ffde;
    border-left: 21px solid transparent;
    border-bottom: 21px solid transparent;
  }

  .tbtj-div1 {
    width: 25rem;
    display: flex;
    flex-direction: column;
  }

  .tbtj-div2 {
    width: 40rem;
    display: flex;
    flex-direction: column;
  }

  /* 四长统计弹框样式 */
  #leader-tkbg2 {
    position: fixed;
    top: 10%;
    left: 20.5%;
    width: calc(100% - 49rem);
    height: auto;
    padding: 1rem 2rem;
    z-index: 999;
    background: #021636;
    border: 1px solid #00ffde;
    /*box-shadow: inset 0px 0px 16px 0px rgba(0, 255, 222, .5);*/
  }

  .sztj-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .sztj-tk {
    position: relative;
  }

  .sztj-tk::after {
    content: "";
    position: absolute;
    right: -72px;
    top: 34%;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-left: 20px solid #021636;
    border-right: 20px solid transparent;
    border-bottom: 20px solid transparent;
  }

  .sztj-tk::before {
    content: "";
    position: absolute;
    right: -75px;
    top: 34%;
    width: 0;
    height: 0;
    border-bottom: 21px solid transparent;
    border-left: 21px solid #00ffde;
    border-right: 21px solid transparent;
    border-top: 21px solid transparent;
  }

  .sztj-div1 {
    width: 23rem;
    height: 27rem;

    .el-tabs__header {
      margin-bottom: 0 !important;
    }

    .el-tabs__item.is-active {
      background: url("../assets/images/leader-iconbg8-on.png") no-repeat center !important;
      background-size: 100% 100% !important;
      font-weight: bold;
      color: #fff !important;
    }

    //如果不需要超过4个横向滚动,用此样式
    .el-tabs__nav {
      width: 100%;
    }

    .el-tabs__item {
      // cursor: pointer;
      // padding:0 .9rem !important;
      padding: 0 !important;
      width: 25%;
      text-align: center;
      // display: block;
      background: url("../assets/images/leader-iconbg8.png") no-repeat center !important;
      background-size: 100% 100% !important;
      color: #ffffff !important;
      font-size: 0.8rem;
      height: 2rem;
      line-height: 2rem;
    }

    // 如果需要超过4个横向滚动,用此样式
    // .el-tabs__item{
    // 	// cursor: pointer;
    // 	padding:0 .9rem !important;
    // 	text-align: center;
    // 	// display: block;
    // 	background: url("../assets/images/leader-iconbg8.png") no-repeat center !important;
    // 	background-size: 100% 100% !important;
    // 	color:#ffffff !important;
    // }
    .el-tabs__nav-wrap::after {
      display: none;
    }

    .el-tabs__active-bar {
      display: none;
    }

    .sztj-1-con {
      width: 100%;
      height: 16rem;
      margin-top: 1rem;
      overflow-y: scroll;
      display: flex;
      flex-direction: column;
    }

    .el-tree {
      color: #fff;

      .el-tree-node__content:hover {
        background-color: #123d7e !important;
      }

      .el-tree-node.is-current>.el-tree-node__content {
        background-color: #123d7e !important;
      }

      .el-tree-node:focus>.el-tree-node__content {
        background-color: #123d7e !important;
      }

      .el-tree-node__content:hover {
        background-color: #123d7e !important;
      }
    }
  }

  /* 重点工程弹框样式 */
  #leader-tbbg5 {
    position: fixed;
    top: 10%;
    right: 20.5%;
    width: calc(100% - 49rem);
    height: auto;
    padding: 1rem 2rem;
    z-index: 999;
    background: #021636;
    border: 1px solid #00ffde;
    /*box-shadow: inset 0px 0px 16px 0px rgba(0, 255, 222, .5);*/
  }

  /* 实时关注 弹框样式 */
  #leader-tkbg6 {
    position: fixed;
    top: 10%;
    left: 20.5%;
    width: calc(100% - 49rem);
    height: auto;
    padding: 2rem;
    z-index: 999;
    background: #021636;
    border: 1px solid #00ffde;
    /*box-shadow: inset 0px 0px 16px 0px rgba(0, 255, 222, .5);*/
  }

  /* 重点区域 弹框样式 */
  #leader-tkbg7 {
    position: fixed;
    top: 50%;
    left: 20.5%;
    width: calc(100% - 49rem);
    height: auto;
    padding: 2rem;
    z-index: 999;
    background: #021636;
    border: 1px solid #00ffde;
    /*box-shadow: inset 0px 0px 16px 0px rgba(0, 255, 222, .5);*/
  }

  .gctj-row {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .gctj-tk {
    position: relative;
  }

  .gctj-tk::after {
    content: "";
    position: absolute;
    right: -72px;
    top: -24px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-left: 20px solid #021636;
    border-right: 20px solid transparent;
    border-bottom: 20px solid transparent;
  }

  .gctj-tk::before {
    content: "";
    position: absolute;
    right: -75px;
    top: -24px;
    width: 0;
    height: 0;
    border-bottom: 21px solid transparent;
    border-left: 21px solid #00ffde;
    border-right: 21px solid transparent;
    border-top: 21px solid transparent;
  }

  .zdqy-tk {
    position: relative;
  }

  .zdqy-tk::after {
    content: "";
    position: absolute;
    right: -72px;
    top: 123px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-left: 20px solid #021636;
    border-right: 20px solid transparent;
    border-bottom: 20px solid transparent;
  }

  .zdqy-tk::before {
    content: "";
    position: absolute;
    right: -75px;
    top: 123px;
    width: 0;
    height: 0;
    border-bottom: 21px solid transparent;
    border-left: 21px solid #00ffde;
    border-right: 21px solid transparent;
    border-top: 21px solid transparent;
  }

  .no-icon::after {
    content: "";
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }

  .no-icon::before {
    content: "";
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
  }

  .gctj-div1 {
    width: 26.5rem;
    height: 19rem;

    .tk-tit {
      margin-bottom: 1rem;
    }

    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .gctj-div2 {
    width: 39rem;
    height: 19rem;
    text-align: left;
    padding-top: 2.5rem;

    h5 {
      color: #fff;
      font-size: 0.9rem;
      font-weight: bold;
      padding-bottom: 0.5rem;
    }

    p {
      color: #fff;
      font-size: 0.6rem;
      line-height: 1.2rem;
      margin-bottom: 0.2rem;
      text-indent: 1.8rem;
    }
  }

  .sztj-div2 {
    width: 67rem;
    height: 20rem;
  }

  .sztj-div3 {
    width: fit-content;
    height: 27rem;
  }

  .pop {
    width: 100%;
    height: 100%;
    z-index: 2;
  }

  bor-on {
    border: 1px solid #00ffde;
  }

  #tkCharts1 {
    width: 25rem;
    height: 21.5rem;
  }

  #tkCharts2 {
    width: 40rem;
    height: 17.4rem;
  }

  #tkCharts3 {
    width: 25rem;
    height: 20rem;
  }

  #tkCharts4 {
    width: 39rem;
    height: 20rem;
  }

  #sjCharts1 {
    width: 22rem;
    height: 12rem;
  }

  #sjCharts2 {
    width: 45rem;
    height: 12rem;
  }

  #tbCharts1 {
    width: 25rem;
    height: 12rem;
  }

  #tbCharts2 {
    width: 40rem;
    height: 12rem;
  }

  #szCharts1 {
    width: 67rem;
    height: 18rem;
  }

  #szCharts2 {
    width: 20rem;
    height: 22rem;
  }

  #szCharts3 {
    width: 20rem;
    height: 20rem;
  }

  /*机器人*/
  .leader-ai {
    position: fixed;
    bottom: 2rem;
    right: 25%;
    z-index: 10;
  }

  .sj-layer-switch {
    position: fixed;
    bottom: 4rem;
    display: flex;
    left: 21%;
    z-index: 10;
  }

  /*图层切换*/
  .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;
    }
  }

  .leader-tcqh:hover {
    color: #fff !important;
  }

  //地图
  .map {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    // z-index: 1;
  }

  //重点区域
  .zdqy {
    .el-tabs__header {
      margin-bottom: 0 !important;
    }

    .el-tabs__item.is-active {
      background: url("../assets/images/leader-iconbg8-on.png") no-repeat center !important;
      background-size: 100% 100% !important;
      font-weight: bold;
      color: #fff !important;
    }

    //如果不需要超过4个横向滚动,用此样式
    .el-tabs__nav {
      width: auto;
    }

    .el-tabs__item {
      // cursor: pointer;
      // padding:0 .9rem !important;
      padding: 0 !important;
      /*width: 25%;*/
      width: 100px;
      text-align: center;
      // display: block;
      background: url("../assets/images/leader-iconbg8.png") no-repeat center !important;
      background-size: 100% 100% !important;
      color: #ffffff !important;
      font-size: 0.8rem;
      height: 2rem;
      line-height: 2rem;
    }

    // 如果需要超过4个横向滚动,用此样式
    // .el-tabs__item{
    // 	// cursor: pointer;
    // 	padding:0 .9rem !important;
    // 	text-align: center;
    // 	// display: block;
    // 	background: url("../assets/images/leader-iconbg8.png") no-repeat center !important;
    // 	background-size: 100% 100% !important;
    // 	color:#ffffff !important;
    // }
    .el-tabs__nav-wrap::after {
      display: none;
    }

    .el-tabs__active-bar {
      display: none;
    }
  }

  /*事件统计 弹框日期样式*/
  #leader-tkbg3 .el-date-editor.el-input__inner {
    width: 720px !important;
    background: rgb(2 22 54);
    border: 1px solid #0155a3;
  }

  .sj-data-picker-input {
    .el-range-input {
      font-size: 14px;
      background: #061d42;
      color: #fff;
      width: 45%;
    }

    .el-range__close-icon {
      width: 0px;
    }

    .el-range-separator {
      color: #fff;
    }

    .el-range__icon {
      line-height: 24px;
      color: #fff;
      font-size: 16px;
    }

  }

  .sj-data-picker {
    width: 720px !important;
    background: #021636;
    color: #fff !important;
    border: 1px solid #0155a3;

    .el-picker-panel {
      color: #fff !important;
      border: 1px solid #0155a3;
      background: #021636;
    }

    .popper__arrow::after {
      top: 0px !important;
      border-bottom-color: #17386e !important;
    }

    .el-input__inner {
      background-color: #061d42;
      border: 1px solid #17386e;
      color: #ffffff;
    }

    .el-date-range-picker__time-header {
      border-bottom: 1px solid #17386e;
    }

    .el-date-range-picker__content.is-left {
      border-right: 1px solid #17386e;
    }

    .el-icon-arrow-right {
      color: #ffffff;
    }

    .el-input.is-disabled .el-input__inner {
      background-color: #061d42;
      border: 1px solid #17386e;
      color: #ffffff;
    }

    .el-picker-panel__icon-btn {
      color: #fff;

    }

    .el-date-table th {
      color: #ffffff;
      border-bottom: solid 1px #17386e;
    }

    .el-date-table td.in-range div {
      background-color: #143260;
    }

    .el-picker-panel__footer {
      border-top: 1px solid #17386e;
      background-color: #021636;
    }

    .el-button.is-plain {
      background: #143260;
      border: 1px solid #2d4791;
      color: #4890fb;
    }

    .el-time-panel {
      border: solid 1px #17386e;
      background-color: #072554;
    }

    .el-time-spinner__item {
      color: #fff;
    }

    .el-time-spinner__item:hover:not(.disabled):not(.active) {
      background: #10408b;
    }

    .el-time-panel__content::after,
    .el-time-panel__content::before {
      border-top: 1px solid #113474;
      border-bottom: 1px solid #113474;
    }

    .el-time-spinner__item.active:not(.disabled) {
      color: #57ceff;
      font-weight: bold;
    }

    .el-time-panel__btn.cancel {
      color: #f7f7f7;
    }

    .el-time-panel__footer {
      border-top: 1px solid #17386e;
    }
  }

  /*时间日历*/
  .el-picker-panel {
    border: 1px solid #1d6895;
    background: #082242;
    color: #fff;

    .el-popper[x-placement^=bottom] .popper__arrow::after {
      border-bottom-color: #082242;
    }

    .el-popper[x-placement^=bottom] .popper__arrow {
      border-bottom-color: #1d6895;
    }

    .el-date-picker__header-label {
      color: #ffffff;
    }

    .el-picker-panel__icon-btn {
      color: #ffffff;
    }

    .el-date-table th {
      color: #ffffff;
      border-bottom: solid 1px #98a9cb;
    }

    .el-picker-panel {
      color: #ffffff;
    }

    .el-date-table td.next-month,
    .el-date-table td.prev-month {
      color: #878d9b;
    }
  }

  .sj-container .el-input__inner {
    color: #2d8fed !important;
    border: solid 1px #2665a1 !important;
  }

  .el-tabs__nav-next,
  .el-tabs__nav-prev {
    line-height: 30px;
  }
</style>