<template>
  <div class="home">
    <div class="head-wrapper">
      <div class="maps-wrapper">
        <div :class="{active: mapActiveIndex === 1}" class="urgent" @click="emmapShow">应急一张图</div>
        <div :class="{active: mapActiveIndex === 2}" class="envpro" @click="toSTLink">安全教育培训</div>
        <div :class="{active: mapActiveIndex === 3}" class="occupational" />
      </div>
      <div :class="{active: mapActiveIndex === 4}" class="hd-wrapper">
        <div class="hidedanger" @click="dangermapShow">风险隐患排查</div>
      </div>
      <div class="title" />
      <div class="backstage-wrapper" @click="tobackstage">
        <div class="backstage">后台管理</div>
      </div>
      <div class="run-time-wrapper"><i class="el-icon-time toscale" />{{ curTime }}</div>
    </div>
    <div class="container-wrapper">
      <div class="map-wrapper">
        <!--地图容器-->
        <div id="container" />
        <!--右下角的地图类型切换和隐患标识-->
        <div class="satelliteorgis-wrapper">
          <div :class="{active: isregularMap}" class="regularmapstyle" @click="changemapstyle(true)">常规地图</div>
          <div :class="{active: !isregularMap}" class="satellitemapstyle" @click="changemapstyle(false)">卫星地图</div>
          <!-- <div class="hidedanger-identification" @click="hdidentifychange">
            <div :class="{active: isShowhdidentify}" class="hd-block" />
            <div class="hd-title">隐患标识</div>
          </div> -->
        </div>
        <!-- <div id="filterclick"></div> -->
        <!--下方的 6 个按钮 风险-隐患 -->
        <div v-show="isInitAllHDRisk" class="check-indus-enter-wrapper" @click.stop="">
          <div :class="{active: activeRiskHDIndex === 1}" class="majorrisk-indus-enter-wrapper" @click="majorRiskClick">
            <div class="majorrisk-indus-enter-degrees">{{ majorRiskAllDegrees }}</div>
            <div class="majorrisk-indus-enter-title">重大风险</div>
          </div>
          <div :class="{active: activeRiskHDIndex === 2}" class="greaterrisk-indus-enter-wrapper" @click="greaterRiskClick">
            <div class="greaterrisk-indus-enter-degrees">{{ greaterRiskAllDegrees }}</div>
            <div class="greaterrisk-indus-enter-title">较大风险</div>
          </div>
          <div :class="{active: activeRiskHDIndex === 3}" class="generalrisk-indus-enter-wrapper" @click="generalRiskClick">
            <div class="generalrisk-indus-enter-degrees">{{ generalRiskAllDegrees }}</div>
            <div class="generalrisk-indus-enter-title">一般风险</div>
          </div>
          <div :class="{active: activeRiskHDIndex === 4}" class="lowrisk-indus-enter-wrapper" @click="lowRiskClick">
            <div class="lowrisk-indus-enter-degrees">{{ lowRiskAllDegrees }}</div>
            <div class="lowrisk-indus-enter-title">低风险</div>
          </div>
          <div :class="{active: activeRiskHDIndex === 5}" class="majorhd-indus-enter-wrapper" @click="majorHDClick">
            <div class="majorhd-indus-enter-degrees">{{ majorHDDegrees }}</div>
            <div class="majorhd-indus-enter-title">重大隐患</div>
          </div>
          <div :class="{active: activeRiskHDIndex === 6}" class="generalhd-indus-enter-wrapper" @click="generalHDClick">
            <div class="generalhd-indus-enter-degrees">{{ generalHDDegrees }}</div>
            <div class="generalhd-indus-enter-title">一般隐患</div>
          </div>
        </div>
        <!--行业类别列表-->
        <div v-show="activeRiskHDIndex > 0" class="check-indus-enter-indus-wrapper" @click.stop="">
          <div class="indus-type-list-wrapper">行业类别列表</div>
          <div v-show="activeRiskHDIndex === 1" class="check-indus-enter-indus-item-wrapper">
            <div v-for="(item, index) in majorRiskIndus" :key="item.indus" class="check-indus-enter-indus-item" :class="{active: activeRiskHDIndex === 1 && riskhdIndusIndex === index}" @click="showCurHDRiskEnter(item.coms, index)">{{ item.indus + '(' + item.coms.length +')' }}</div>
          </div>
          <div v-show="activeRiskHDIndex === 2" class="check-indus-enter-indus-item-wrapper">
            <div v-for="(item, index) in greaterRiskIndus" :key="item.indus" class="check-indus-enter-indus-item" :class="{active: activeRiskHDIndex === 2 && riskhdIndusIndex === index}" @click="showCurHDRiskEnter(item.coms, index)">{{ item.indus + '(' + item.coms.length +')' }}</div>
          </div>
          <div v-show="activeRiskHDIndex === 3" class="check-indus-enter-indus-item-wrapper">
            <div v-for="(item, index) in generalRiskIndus" :key="item.indus" class="check-indus-enter-indus-item" :class="{active: activeRiskHDIndex === 3 && riskhdIndusIndex === index}" @click="showCurHDRiskEnter(item.coms, index)">{{ item.indus + '(' + item.coms.length +')' }}</div>
          </div>
          <div v-show="activeRiskHDIndex === 4" class="check-indus-enter-indus-item-wrapper">
            <div v-for="(item, index) in lowRiskIndus" :key="item.indus" class="check-indus-enter-indus-item" :class="{active: activeRiskHDIndex === 4 && riskhdIndusIndex === index}" @click="showCurHDRiskEnter(item.coms, index)">{{ item.indus + '(' + item.coms.length + ')' }}</div>
          </div>
          <div v-show="activeRiskHDIndex === 5" class="check-indus-enter-indus-item-wrapper">
            <div v-for="(item, index) in majorHDIndus" :key="item.indus" class="check-indus-enter-indus-item" :class="{active: activeRiskHDIndex === 5 && riskhdIndusIndex === index}" @click="showCurHDRiskEnter(item.coms, index)">{{ item.indus + '(' + item.coms.length + ')' }}</div>
          </div>
          <div v-show="activeRiskHDIndex === 6" class="check-indus-enter-indus-item-wrapper">
            <div v-for="(item, index) in generalHDIndus" :key="item.indus" class="check-indus-enter-indus-item" :class="{active: activeRiskHDIndex === 6 && riskhdIndusIndex === index}" @click="showCurHDRiskEnter(item.coms, index)">{{ item.indus + '(' + item.coms.length + ')' }}</div>
          </div>
        </div>
        <!-- 风险-隐患 行业 企业-->
        <div v-show="isShowRiskHDEnterList" class="check-indus-enter-enter-wrapper" @click.stop="">
          <div class="check-indus-enter-enter-tools-wrapper">
            <div class="check-indus-enter-enter-list-wrapper">企业列表</div>
            <!-- <div class="check-indus-enter-enter-search-wrapper">
              <div class="check-indus-enter-enter-search-icon-place" />
              <div class="check-indus-enter-enter-search" contenteditable="true" spellcheck="false" />
            </div> -->
          </div>
          <div class="check-indus-enter-enter-item-wrapper">
            <div v-for="(item) in riskhdEnter" :key="item.companyId" class="check-indus-enter-enter-item" @click="mapToEnterPos(item)">{{ item.companyName }}</div>
          </div>
        </div>
        <!-- 大屏统计图 -->
        <div v-show="mapActiveIndex === 4" class="supervise-wrapper" @click.stop="">
          <div class="supervise-title-wrapper">
            <div class="supervise-title">安全监管指标</div>
          </div>
          <div class="supervise-content-wrapper">
            <div class="enter-degree-wrapper">
              <div class="enter-degree-icon1" />
              <div class="enter-degree-sum-wrapper">
                <div class="enter-degree-sum">23130</div>
                <div class="enter-degree-sum-title">企业数量</div>
              </div>
            </div>
            <div class="enter-degree-wrapper">
              <div class="enter-degree-icon2" />
              <div class="enter-degree-sum-wrapper">
                <div class="enter-degree-sum">45485</div>
                <div class="enter-degree-sum-title">重大风险企业</div>
              </div>
            </div>
            <div class="enter-degree-wrapper">
              <div class="enter-degree-icon3" />
              <div class="enter-degree-sum-wrapper">
                <div class="enter-degree-sum">55252</div>
                <div class="enter-degree-sum-title">风险总量</div>
              </div>
            </div>
            <div class="enter-degree-wrapper">
              <div class="enter-degree-icon4" />
              <div class="enter-degree-sum-wrapper">
                <div class="enter-degree-sum">13256</div>
                <div class="enter-degree-sum-title">重大风险</div>
              </div>
            </div>
            <div class="enter-degree-wrapper">
              <div class="enter-degree-icon5" />
              <div class="enter-degree-sum-wrapper">
                <div class="enter-degree-sum">32651</div>
                <div class="enter-degree-sum-title">年隐患数量</div>
              </div>
            </div>
            <div class="enter-degree-wrapper">
              <div class="enter-degree-icon6" />
              <div class="enter-degree-sum-wrapper">
                <div class="enter-degree-sum">2365</div>
                <div class="enter-degree-sum-title">未整改隐患</div>
              </div>
            </div>
            <div class="enter-degree-wrapper">
              <div class="enter-degree-icon7" />
              <div class="enter-degree-sum-wrapper">
                <div class="enter-degree-sum">98%</div>
                <div class="enter-degree-sum-title">年隐患整改率</div>
              </div>
            </div>
            <div class="enter-degree-wrapper">
              <div class="enter-degree-icon8" />
              <div class="enter-degree-sum-wrapper">
                <div class="enter-degree-sum">0</div>
                <div class="enter-degree-sum-title">月增新隐患</div>
              </div>
            </div>
            <div class="enter-degree-wrapper">
              <div class="enter-degree-icon9" />
              <div class="enter-degree-sum-wrapper">
                <div class="enter-degree-sum">100</div>
                <div class="enter-degree-sum-title">月新增重大隐患</div>
              </div>
            </div>
            <div class="enter-degree-wrapper">
              <div class="enter-degree-icon10" />
              <div class="enter-degree-sum-wrapper">
                <div class="enter-degree-sum">99%</div>
                <div class="enter-degree-sum-title">月隐患整改率</div>
              </div>
            </div>
            <div class="enter-degree-wrapper">
              <div class="enter-degree-icon11" />
              <div class="enter-degree-sum-wrapper1">
                <div class="enter-degree-sum">威海市</div>
                <div class="enter-degree-sum-title">年隐患整改率最低区域</div>
              </div>
            </div>
            <div class="enter-degree-wrapper" />
          </div>
        </div>
        <div v-show="mapActiveIndex === 4" class="annual-region-dgsumrank" @click.stop="">
          <div class="annual-region-dgsumrank-title-wrapper">
            <div class="annual-region-dgsumrank-title">各地区本年度隐患数量排行</div>
          </div>
          <div class="annual-region-dgsumrank-content-wrapper" />
        </div>
        <div v-show="mapActiveIndex === 4" :class="{movetoright: !isPullMenuShow}" class="risk-dg-statistics-wrapper" @click.stop="">
          <div class="levels-risk-dg-statistics-wrapper">
            <div class="levels-risk-dg-title-wrapper">
              <div class="levels-risk-dg-title">不同等级风险数量统计</div>
            </div>
            <div class="levels-risk-dg-content-wrapper" />
          </div>
          <div class="annual-risk-dg-rect-statistics-wrapper">
            <div class="annual-risk-dg-rect-statistics-title-wrapper">
              <div class="annual-risk-dg-rect-statistics-title">年度隐患数量及整改情况统计</div>
            </div>
            <div class="annual-risk-dg-rect-tatistics-content-wrapper" />
          </div>
        </div>
        <div v-show="mapActiveIndex === 4" :class="{movetoright: !isPullMenuShow}" class="all-region-risk-sum-statistics-wrapper" @click.stop="">
          <div class="all-region-risk-sum-statistics-title-wrapper">
            <div class="all-region-risk-sum-statistics-title">各地区风险数量统计</div>
          </div>
          <div class="all-region-risk-sum-statistics-content-wrapper" />
        </div>
        <div v-show="mapActiveIndex === 4" :class="{movetoright: !isPullMenuShow}" class="hide-danger-sum-statistics-wrapper" @click.stop="">
          <div class="hide-danger-sum-statistics-title-wrapper">
            <div class="hide-danger-sum-statistics-title">隐患数量统计</div>
          </div>
          <div class="hide-danger-sum-statistics-content-wrapper" />
        </div>
        <div v-show="mapActiveIndex === 4" class="curyear-select-wrapper" @click.stop="">
          <div class="curyear-wrapper">
            <div class="curyear-title">统计年度</div>
            <div class="curyear-degree">2021</div>
          </div>
          <div class="arrow-wrapper">
            <div class="up-arrow-wrapper" />
            <div class="down-arrow-wrapper" />
          </div>
        </div>
        <!--弹出层-->
        <!-- 企业信息弹出 -->
        <div class="curSelect-enter-info-wrapper">
          <div class="curSelect-enter-info-title-wrapper">
            <div class="cusSelect-enter-info-star" />
            <div class="curSelect-enter-info-title">企业基本信息</div>
          </div>
          <div class="curSelect-enter-content-wrapper">
            <div class="curSelect-enter-name-star-wrapper">
              <div class="curSelect-enter-info-name">山东天弘质量检验中心</div>
              <div class="curSelect-enter-info-star">
                <div class="sc-check-star" />
              </div>
            </div>
            <div class="curSelect-enter-charger-wrapper">
              <div class="curSelect-enter-charger-name">刘语嫣</div>
              <div class="curSelect-enter-charger-phone">1</div>
            </div>
          </div>
          <div class="enter-brief-introduction-title">企业简介</div>
          <div class="enter-brief-introduction">该企业目前状态在营，该企业目前状态在营，该企业目前状态在营，该企业目前状态在营，该企业目前状态在营，该企业目前状态在营，该企业目前状态在营</div>
          <div class="to-enter-detail">查看详情</div>
        </div>
        <!-- 企业隐患 -->
        <div class="curSelect-enter-hd-wrapper">
          <div class="curSelect-enter-hd-title-wrapper">
            <div class="curSelect-enter-hd-star" />
            <div class="curSelect-enter-hd-title">企业隐患</div>
          </div>
          <div class="curSelect-enter-hd-info-wrapper">
            <div class="curSelect-enter-hd-generalhd-wrapper">
              <div class="curSelect-enter-hd-generalhd-sum">100</div>
              <div class="curSelect-enter-hd-generalhd-title">一般隐患</div>
            </div>
            <div class="curSelect-enter-hd-majorhd-wrapper">
              <div class="curSelect-enter-hd-majorhd-sum">158</div>
              <div class="curSelect-enter-hd-majorhd-title">重大隐患</div>
            </div>
            <div class="curSelect-enter-hd-norect-wrapper">
              <div class="curSelect-enter-hd-norect-sum">23</div>
              <div class="curSelect-enter-hd-norect-title">未整改</div>
            </div>
            <div class="curSelect-enter-hd-rectpercent-wrapper">
              <div class="curSelect-enter-hd-rectpercent-num">98%</div>
              <div class="curSelect-enter-hd-rectpercent-title">整改率</div>
            </div>
          </div>
          <div class="curSelect-enter-hd-content-wrapper">
            <div class="curSelect-enter-hd-content-title">隐患名称</div>
            <div class="curSelect-enter-hd-content">
              <div class="curSelect-enter-hd-content-item">3月8日隐患内容整改时间缺少验收人的签字</div>
              <div class="curSelect-enter-hd-content-item">3月8日隐患内容整改时间缺少验收人的签字</div>
              <div class="curSelect-enter-hd-content-item">3月8日隐患内容整改时间缺少验收人的签字</div>
              <div class="curSelect-enter-hd-content-item">3月8日隐患内容整改时间缺少验收人的签字</div>
            </div>
          </div>
        </div>
        <!-- 企业风险 -->
        <div class="curSelect-enter-risk-wrapper">
          <div class="curSelect-enter-risk-title-wrapper">
            <div class="curSelect-enter-risk-star" />
            <div class="curSelect-enter-risk-title">企业风险</div>
          </div>
          <div class="curSelect-enter-risk-info-wrapper">
            <div class="curSelect-enter-risk-major-wrapper">
              <div class="curSelect-enter-risk-major-sum">100</div>
              <div class="curSelect-enter-risk-major-title">重大隐患</div>
            </div>
            <div class="curSelect-enter-risk-greater-wrapper">
              <div class="curSelect-enter-risk-greater-sum">120</div>
              <div class="curSelect-enter-risk-greater-title">较大隐患</div>
            </div>
            <div class="curSelect-enter-risk-general-wrapper">
              <div class="curSelect-enter-risk-general-sum">150</div>
              <div class="curSelect-enter-risk-general-title">一般风险</div>
            </div>
            <div class="curSelect-enter-risk-low-wrapper">
              <div class="curSelect-enter-risk-low-sum">100</div>
              <div class="curSelect-enter-risk-low-title">低风险</div>
            </div>
          </div>
          <div class="curSelect-enter-risk-content-wrapper">
            <div class="curSelect-enter-risk-title-wrapper">
              <div class="curSelect-enter-risk-point">风险点</div>
              <div class="curSelect-enter-risk-area">区域位置</div>
              <div class="curSelect-enter-risk-department">责任单位</div>
              <div class="curSelect-enter-risk-charger">责任人</div>
              <div class="curSelect-enter-risk-video">监控视频</div>
            </div>
            <div class="curSelect-enter-risk-content-wrapper">
              <div class="curSelect-enter-risk-content-item">
                <div class="curSelect-enter-risk-content-point">电压</div>
                <div class="curSelect-enter-risk-content-area">车间</div>
                <div class="curSelect-enter-risk-content-department">管委部门</div>
                <div class="curSelect-enter-risk-content-charger">责任人</div>
                <div class="curSelect-enter-risk-content-video" />
              </div>
            </div>
          </div>
          <div class="curSelect-enter-risk-video" />
        </div>
        <!-- 安全检查 -->
        <div class="curSelect-enter-sc-wrapper">
          <div class="curSelect-enter-sc-star-wrapper">
            <div class="curSelect-enter-sc-star" />
          </div>
          <div class="curSelect-enter-sc-content-wrapper">
            <div class="curSelect-enter-sc-content">
              <div class="curSelect-enter-sc-title-wrapper">
                <div class="curSelect-enter-sc-point-title-wrapper">
                  <div class="curSelect-enter-sc-point" />
                  <div class="curSelect-enter-sc-title">组织机构及目标</div>
                </div>
                <div class="curSelect-enter-sc-arrow" />
              </div>
              <div class="curSelect-enter-sc-item-wrapper">
                <p class="curSelect-enter-sc-item">是否指定年度公司安全生产目标和计划，并以正式文件进行公示并落实</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 隐患详情子项-->
        <div class="enter-hd-child-wrapper">
          <div class="enter-hd-child-title-wrapper">
            <div class="enter-hd-child-title">塔式起重器安装验收</div>
            <div class="enter-hd-child-grade">一般隐患</div>
          </div>
          <div class="enter-hd-child-content-wrapper">
            <div class="enter-hd-child-content-norect-wrapper">
              <div class="enter-hd-child-content-norect-title">整改前</div>
              <div class="enter-hd-child-content-hdimg-wrapper">
                <img src="https://img2.baidu.com/it/u=3587102432,3379071727&fm=26&fmt=auto&gp=0.jpg" alt="">
              </div>
              <div class="enter-hd-child-content-checktime-wrapper">
                <div class="enter-hd-child-content-checktime-title">检查日期:</div>
                <div class="enter-hd-child-content-checktime-time">2021-08-07</div>
              </div>
              <div class="enter-hd-child-content-checkpro-wrapper">
                <div class="enter-hd-child-content-checkpro-title">检查专家</div>
                <div class="enter-hd-child-content-checkpro-name">张平 洋洋</div>
              </div>
              <div class="enter-hd-child-content-rectsup-wrapper">
                <div class="enter-hd-child-content-rectsup-title">整改建议</div>
                <div class="enter-hd-child-content-rectsup-content">这里是整改建议，这里是整改建议，这里是整改建议...</div>
              </div>
              <div class="enter-hd-child-content-hddec-wrapper">
                <div class="enter-hd-child-content-hddec-title">隐患描述</div>
                <div class="enter-hd-child-content-hddec-content">3月8日隐患内容整改时缺少验收人的签字</div>
              </div>
            </div>
            <div class="enter-hd-child-content-rect-wrapper">
              <div class="enter-hd-child-content-rect-title">整改后</div>
              <div class="enter-hd-child-content-rectimg-wrapper">
                <img src="https://img2.baidu.com/it/u=3587102432,3379071727&fm=26&fmt=auto&gp=0.jpg" alt="">
              </div>
              <div class="enter-hd-child-content-recttime-wrapper">
                <div class="enter-hd-child-content-recttime-title">检查日期:</div>
                <div class="enter-hd-child-content-recttime-time">2021-08-07</div>
              </div>
              <div class="enter-hd-child-content-rectstatus-wrapper">
                <div class="enter-hd-child-content-rectstatus-title">状态:</div>
                <div class="enter-hd-child-content-rectstatus-status">整改完成</div>
              </div>
              <div class="enter-hd-child-content-acceptor-wrapper">
                <div class="enter-hd-child-content-acceptor-title">验收人:</div>
                <div class="enter-hd-child-content-acceptor-person">张平</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 风险点详情子项-->
        <div class="enter-risk-child-wrapper">
          <div class="enter-risk-child-title-wrapper">
            <div class="enter-risk-child-title">锯割加工</div>
          </div>
          <div class="enter-risk-child-type-wrapper">
            <div class="enter-risk-child-type-title">风险类型</div>
            <div class="enter-risk-child-type-desc">电压过高 电流过高</div>
          </div>
          <div class="enter-risk-child-poscase-wrapper">
            <div class="enter-risk-child-poscase-title">可发生的事故类型及后果</div>
            <div class="enter-risk-child-poscase-desc">融冠企业重大降雨事件导致坍塌轻伤1至2人</div>
          </div>
          <div class="enter-risk-child-control-wrapper">
            <div class="enter-risk-child-control-title">风险管控措施</div>
            <div class="enter-risk-child-control-desc">
              制定岗位安全操作流程；张贴"当心机械伤害"、"噪声有害"、"戴护耳器"标识。上料时石料周边严禁人员停留；禁止在设备运转或已切断电源但仍在惯性运转时，将手伸到锯片下方清理石屑；锯片机运行时应禁止非操作人员或非维修人员接触。严禁人员湿手操作
            </div>
          </div>
        </div>
        <!-- 企业详情子项 -->
        <div class="enter-info-child-wrapper">
          <!-- enter detail -->
        </div>
      </div>
      <!-- 右边的所有区域和行业 -->
      <div :class="{hide: !isPullMenuShow}" class="selection-wrapper" @click.stop="">
        <div class="radio-wrapper">
          <div class="region-wrapper" @click="showreorinClick(true)">
            <div :class="{active: isShowrenoin}" class="region-block" />
            <div class="region-title">区域</div>
          </div>
          <div class="industry-wrapper" @click="showorhidePullDown">
            <div v-show="isShowPullDown" class="indus-kind-wrapper">
              <div :class="{active: isemornation === 1}" class="emergency" @click="showEmergencyIndustryEyes">应急行业</div>
              <div :class="{active: isemornation === 2}" class="nation" @click="showNationIndustryEyes">国民经济行业</div>
              <div class="trangle" />
            </div>
            <div class="induspulldownselect">
              <div class="pulldownselect" />
            </div>
            <div class="industry-title">行业</div>
          </div>
        </div>
        <div class="isshowall-wrapper" @click="isShowClick">
          <div :class="{active: isShowAll}" class="showall-icon" />
          <div class="showall-title">全部显示</div>
        </div>
        <div class="wrapper-region">
          <div v-for="(item, index) in regionmarkers" v-show="isShowrenoin" :key="item.county" :ref="`regionmarkers${index}`" :class="{active: regionmarkers[index].isShow}" class="select-item-wrapper" @click="hideorshowmarker(index)">
            <div :class="{active: regionmarkers[index].isShow}" class="eye-icon" />
            <div :class="{active: regionmarkers[index].isShow}" class="region-info-wrapper">
              <div :class="{active: regionmarkers[index].isShow}" class="region-enter-title">{{ item.county }}</div>
              <div class="region-enter-degree-wrapper">
                <div class="region-enter-degree">{{ item.markers.length }}<span>处</span></div>
              </div>
            </div>
          </div>
          <div v-for="(item, index) in emergencyIndustryNames" v-show="!isShowrenoin && isShowEmergencyOrNation && (item.sum > 0)" :ref="`eginmarkers${index}`" :key="item.name" :class="{active: item.isShow}" class="select-item-wrapper" @click="hideorshowindusMarkers(index)">
            <div :class="{active: item.isShow}" class="eye-icon" />
            <div :class="{active: item.isShow}" class="region-info-wrapper">
              <div :class="{active: item.isShow}" class="region-enter-title">{{ item.name }}</div>
              <div class="region-enter-degree-wrapper">
                <div class="region-enter-degree">{{ item.sum }}<span>处</span></div>
              </div>
            </div>
          </div>
          <div v-for="(item, index) in nationIndustryNames" v-show="!isShowrenoin && !isShowEmergencyOrNation && (item.sum > 0)" :ref="`ntinmarkers${index}`" :key="index" :class="{active: item.isShow}" class="select-item-wrapper" @click="hideorshownationMarker(index)">
            <div :class="{active: item.isShow}" class="eye-icon" />
            <div :class="{active: item.isShow}" class="region-info-wrapper">
              <div :class="{active: item.isShow}" class="region-enter-title">{{ item.name }}</div>
              <div class="region-enter-degree-wrapper">
                <div class="region-enter-degree">{{ item.sum }}<span>处</span></div>
              </div>
            </div>
          </div>
        </div>
        <div class="btn-pull" @click="changePullMenuShow">
          <div v-if="!isPullMenuShow" class="btn-pull-down">
            <svg t="1625212214001" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" width="32" height="32"><path d="M272.9 512l265.4-339.1c4.1-5.2 0.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L186.8 492.3c-9.1 11.6-9.1 27.9 0 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H532c6.7 0 10.4-7.7 6.3-12.9L272.9 512z m304 0l265.4-339.1c4.1-5.2 0.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L490.8 492.3c-9.1 11.6-9.1 27.9 0 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H836c6.7 0 10.4-7.7 6.3-12.9L576.9 512z" p-id="5718" fill="#00ffff" /></svg>
          </div>
          <div v-else class="btn-pull-down">
            <svg t="1625212176984" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5318" width="32" height="32"><path d="M608 896h-128l256-381.44L480 128h128l256 378.56zM288 896H160l256-381.44L160 128h128l256 378.56z" fill="#00ffff" p-id="5319" /></svg>
          </div>
        </div>
      </div>
      <div class="icontianhong">技术支撑单位:<span class="iconicc">ICC&nbsp;&nbsp;</span>山东天弘质量检验中心
        <div class="iconR" />
      </div>
    </div>
    <div class="popup">
      <!--企业基本信息-->
      <div v-show="isShowEnterInfo" class="pop-layer type1 layer1" @click.stop="">
        <div class="in-box">
          <div class="title-inbox mark">
            <h3>企业基本信息</h3>
          </div>
          <div class="info1">
            <div class="row1">
              <span>{{ curSelectEnter.companyName }}</span>
              <div class="grade" @click="isShowSCWindow = true">
                <i />
                <i />
                <i />
                <!-- <i />
                <i /> -->
              </div>
            </div>
            <div class="row2">
              <span>{{ curSelectEnter.companyChargePer }}</span>
              <span>{{ curSelectEnter.companyChargeTel }}</span>
            </div>
          </div>
          <div class="introduce">
            <h4>企业简介：</h4>
            <p>{{ (curSelectEnter.companyIntroduction + '').substr(0, 54) }}</p>
          </div>
          <div class="link1">
            <a href="javascript:void(0)" @click.stop="isShowEnterItem = true">查看详情</a>
          </div>
        </div>
      </div>
      <!--企业隐患-->
      <div v-show="isShowEnterInfo" class="pop-layer type1 layer2" @click.stop="">
        <div class="in-box">
          <div class="title mark">
            <h3>企业隐患</h3>
          </div>
          <div class="info2">
            <div>
              <div class="ctn-place">
                <p>{{ curSelectHDGenSum }}</p>
                <span>一般隐患</span>
              </div>
            </div>
            <div>
              <div class="ctn-place">
                <p>{{ curSelectHDMajorSum }}</p>
                <span>重大隐患</span>
              </div>
            </div>
            <div>
              <div class="ctn-place">
                <p>{{ curSelectHDNorectSum }}</p>
                <span>未整改</span>
              </div>
            </div>
            <div>
              <div class="ctn-place">
                <p>{{ curSelectHDRectPercentSum }}%</p>
                <span>整改率</span>
              </div>
            </div>
          </div>
          <div class="list1">
            <div class="ctn-abs">
              <h4>隐患名称</h4>
              <dl>
                <!-- <dd style="color:#733539">3月8日隐患内容整改时候缺少验收人的签字</dd>
                <dd style="color:#FFF330">3月8日隐患内容整改时候缺少验收人的签字</dd>
                <dd style="color:#FA6705">3月8日隐患内容整改时候缺少验收人的签字</dd>
                <dd style="color:#8A8640">3月8日隐患内容整改时候缺少验收人的签字</dd> -->
                <dd v-for="item in curSelectHD" :key="item.hdId" :style="{color: item.hdLevel === 1 ? '#FFF330' : '#FA6705'}" @click="showHDItem(item)" v-text="item.hdName" />
              </dl>
            </div>
          </div>
        </div>
      </div>
      <!--企业风险-->
      <div v-show="isShowEnterInfo" class="pop-layer type2 layer3" @click.stop="">
        <div class="in-box">
          <div class="title mark">
            <h3>企业风险</h3>
          </div>
          <div class="info2">
            <div>
              <div class="ctn-place">
                <p style="color:#FB0610">{{ riskMajorRiskSum }}</p>
                <span>重大风险</span>
              </div>
            </div>
            <div>
              <div class="ctn-place">
                <p style="color:#FD6601">{{ riskGreaterRiskSum }}</p>
                <span>较大风险</span>
              </div>
            </div>
            <div>
              <div class="ctn-place">
                <p style="color:#FFF332">{{ riskNormalRiskSum }}</p>
                <span>一般风险</span>
              </div>
            </div>
            <div>
              <div class="ctn-place">
                <p style="color:#32B4FF">{{ riskLowRiskSum }}</p>
                <span>低风险</span>
              </div>
            </div>
          </div>
          <div class="table">
            <div class="scrolling">
              <dl>
                <dt><div>风险点</div><div>区域位置</div><div>责任单位</div><div>责任人</div><div>监控视频</div></dt>
                <dd v-for="item in curSelectRisk" :key="item.riskId"><div @click="showRiskItem(item)">{{ item.riskPoint }}</div><div @click="showRiskItem(item)">{{ item.riskArea }}</div><div @click="showRiskItem(item)">{{ item.riskChargeDepartment }}</div><div @click="showRiskItem(item)">{{ item.riskChargePer }}</div><div @click="showVideo"><i /></div></dd>
              </dl>
            </div>
          </div>
          <div class="video">
            <div @click="showVideo"><i /></div>
          </div>
        </div>
      </div>
      <!--安全检查-->
      <div v-show="isShowSCWindow" class="sc-window" @click.stop="">
        <!-- 五角星 和 x-->
        <div class="star-x-wrapper" @click="isShowSCWindow = false">
          <div class="grade1">
            <i />
            <i />
            <i />
          </div>
        </div>
        <div v-for="(item) in curSelectSC" :key="item.rsbtType" class="sc-basic-item-wrapper">
          <div class="sc-basic-top-wrapper">
            <div class="point-title-wrapper">
              <div class="point-title-point" />
              <div class="point-title-title">{{ item.rsbtType + '(' + item.items.length + ')' }}</div>
            </div>
            <div :class="{hide: !item.isShow}" class="pulldownbtn" @click.stop="item.isShow = !item.isShow">
              <svg t="1628634168701" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1978" width="16" height="16"><path d="M558.3051283 756.48113778c-13.66789689 13.66789689-32.21579852 26.36003555-49.78915555 22.45457541-17.57214341 2.9284883-34.16852859-10.73940859-47.83521186-22.45457541L37.96870637 331.81635319c-21.47760355-21.47638992-21.47760355-56.62189037 0-78.09949393s56.62189037-21.47638992 78.0982803 0l393.42595793 404.16415289 394.40171615-404.16293926c21.47638992-21.47760355 56.62189037-21.47760355 78.09828028 0s21.47760355 56.62189037 0 78.0982803L558.3051283 756.48113778z" p-id="1979" fill="#00C9FD" /></svg>
            </div>
          </div>

          <div v-for="item1 in item.items" v-show="item.isShow" :key="item1.rsbId" :style="{color: item1.rsbInspectCase === 1 ? '#A6F6F9': '#FFF330'}" class="sc-basic-item"><p>{{ item1.rsbInspectContent }}</p></div>
        </div>
      </div>
      <!--企业详细信息子项-->
      <div v-show="isShowEnterItem" class="pop-layer type1 layer7" @click.stop="isShowEnterItem = false">
        <div class="in-box">
          <div class="title mark">
            <h3>企业信息</h3>
          </div>
          <div class="introduce">
            <h4>企业简介: </h4>
            <p>{{ curSelectEnter.companyIntroduction }}</p>
          </div>
        </div>
      </div>
      <!--风险详情子项-->
      <div v-show="isShowRiskDetailItem" class="pop-layer type3 layer4" @click.stop="isShowRiskDetailItem = false">
        <div class="in-box">
          <div class="title1">
            <h3>{{ curSelectRiskDetail.riskPoint }}</h3>
          </div>
          <div class="info3">
            <div class="row">
              <h5>风险类型</h5>
              <p>{{ curSelectRiskDetail.riskType }}</p>
            </div>
            <div class="row">
              <h5>可发生的事故类型及后果</h5>
              <p>{{ curSelectRiskDetail.riskPossibleCase }}</p>
            </div>
            <div class="row">
              <h5>风险管控措施</h5>
              <p>{{ curSelectRiskDetail.riskMeasure }}</p>
            </div>
          </div>
        </div>

        <i class="close" />
      </div>
      <!--对应安全检查子项-->
      <div v-show="isShowSCItem" class="pop-layer type4 layer5" @click.stop="isShowSCItem = false">
        <div class="in-box">
          <div class="title1">
            <h3 class="nowrap">组织机构及目标</h3>
            <div class="flag">检查情况：符合</div>
          </div>
          <div class="info3">
            <div class="row">
              <h5>检查内容</h5>
              <p>是否制定年度公司安全生产目标和计划，并以正式文件进行公 示并落实到位。</p>
              <p>是否制定年度公司安全生产目标和计划，并以正式文件进行公 示并落实到位。</p>
            </div>
            <div class="row">
              <h6>备注</h6>
              <div class="remarks">
                备注内容
              </div>
            </div>
          </div>
        </div>
        <i class="close" />
      </div>
      <!--对应隐患检查项-->
      <div v-show="isShowHDCheckItem" class="pop-layer type4 layer6" @click.stop="isShowHDCheckItem = false">
        <div class="in-box">
          <div class="title1">
            <h3 class="nowrap">{{ curSelectHDDetail.hdName }}</h3>
            <div class="flag">检查情况：{{ curSelectRiskDetail.hdStatus === 0 ? '未符合' : '符合' }}</div>
          </div>
          <div class="body1">
            <div class="panel">
              <h4>整改前</h4>
              <div class="figure">
                <!-- <img v-show="curSelectRiskDetail.hdPic && curSelectRiskDetail.hdPic.length" :src="'data:image/jpg;base64,' + curSelectHDDetail.hdPic"> -->
                <div v-show="curSelectHDDetail.hdPic">
                  <img :src="'data:image/jpg;base64,' + curSelectHDDetail.hdPic">
                </div>
              </div>
              <dl>
                <dd class="item1">{{ curSelectHDDetail.hdInspectDate }}</dd>
                <dd class="item2">{{ curSelectHDDetail.hdInspectExpert }}</dd>
                <dd class="item3">{{ curSelectHDDetail.hdRectificationSug }}</dd>
                <dd class="item4">{{ curSelectHDDetail.hdDesc }}</dd>
              </dl>
            </div>
            <div class="panel">
              <h4>整改后</h4>
              <div class="figure">
                <!-- <img v-show="curSelectRiskDetail.hdRectificationPic && curSelectRiskDetail.hdRectificationPic.length" :src="'data:image/jpg;base64,' + curSelectRiskDetail.hdRectificationPic"> -->
                <div v-show="curSelectHDDetail.hdRectificationPic">
                  <img :src="'data:image/jpg;base64,' + curSelectRiskDetail.hdRectificationPic">
                </div>
              </div>
              <dl>
                <dd class="item1">{{ curSelectHDDetail.hdRectificationDate }}</dd>
                <dd class="item5">整改完成</dd>
                <dd class="item6">{{ curSelectHDDetail.hdAcceptancePerson }}</dd>
              </dl>
            </div>
          </div>
        </div>
        <!-- <i class="close" /> -->
      </div>
      <!-- 监控部分 -->
      <div v-show="isShowVideo" id="popupVideo" class="popup-video">
        <div class="videoWrap">
          <div class="video" />
          <div class="spinner">
            <div class="rect1" />
            <div class="rect2" />
            <div class="rect3" />
            <div class="rect4" />
            <div class="rect5" />
          </div>
          <a class="close" @click="hideVideo">+</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { getAll } from '@/api/system/role'
import * as echarts from 'echarts'
import { findDimindustry, getindustry, getHideDangeByIdOrderHdLevel, getriskNumAnalysis, getthRisk, getRiskStandingBook, getTownComs, getHDRigionEnterSum, getRiskRegionEnterSum, getHideDangerBychIds } from '../api/industry'
export default {
  data() {
    return {
      // 四张大屏中的哪个被激活
      mapActiveIndex: 0,
      // 当前是常规地图或者是卫星地图
      isregularMap: false,
      // 显示区域还是行业
      isShowrenoin: true,
      // 显示国民经济行业或者应急行业
      isShowEmergencyOrNation: true,
      // 显示所有
      isShowAll: false,
      // 显示行业类型下拉框
      isShowPullDown: false,
      // 是否显示隐患标识
      isShowhdidentify: false,
      // 是否显示菜单
      isPullMenuShow: false,
      // 获取当前所有应急行业
      emergencyIndustryNames: [],
      // 获取当前所有国民经济行业
      nationIndustryNames: [],
      // 当前时间
      curTime: '',
      // 当前所有区域以及对应的公司和 marker
      regionmarkers: [],
      // 是应急行业，还是国民经济行业
      isemornation: 0,
      // 检查timer , 用于看当前是否已经获取完毕隐患列表和
      checkTimer: null,
      // 所有的隐患和风险是否已经初始化完毕
      isInitAllHDRisk: true,
      // 重大风险-行业-企业
      majorRiskIndusEnter: [],
      majorRiskAllDegrees: 0,
      majorRiskIndus: [],
      majorRiskEnter: [],
      // 较大风险-行业-企业
      GreaterRiskIndusEnter: [],
      greaterRiskAllDegrees: 0,
      greaterRiskIndus: [],
      greaterRiskEnter: [],
      // 一般风险-行业-企业
      GeneralRiskIndusEnter: [],
      generalRiskAllDegrees: 0,
      generalRiskIndus: [],
      generalRiskEnter: [],
      // 低风险-行业-企业
      LowRiskIndusEnter: [],
      lowRiskAllDegrees: 0,
      lowRiskIndus: [],
      lowRiskEnter: [],
      // 重大隐患-行业-企业
      MajorHDIndusEnter: [],
      majorHDIndus: [],
      majorHDDegrees: 0,
      // 一般隐患-行业-企业
      GeneralHDIndusEnter: [],
      generalHDIndus: [],
      generalHDDegrees: 0,
      // 六个风险 隐患
      activeRiskHDIndex: 0,
      // 风险隐患对应的 企业
      isShowRiskHDEnterList: false,
      riskhdEnter: [],
      // 企业重大风险数量
      riskMajorRiskSum: 0,
      // 企业较大风险数量
      riskGreaterRiskSum: 0,
      // 企业一般风险数量
      riskNormalRiskSum: 0,
      // 企业低风险数量
      riskLowRiskSum: 0,
      // 行业对应的下标
      riskhdIndusIndex: -1,
      // 当前 marker 选中的企业的企业信息
      curSelectEnter: {},
      // 当前 marker 选中的企业的企业风险
      curSelectRisk: [],
      // 当前 marker 选中的企业的企业隐患
      curSelectHD: [],
      // 一般隐患数量
      curSelectHDGenSum: 0,
      // 重大隐患数量
      curSelectHDMajorSum: 0,
      // 未整改的数量
      curSelectHDNorectSum: 0,
      // 整改率
      curSelectHDRectPercentSum: 0,
      // 当前 marker 选中的企业的安全检查
      curSelectSC: [],
      // 当前选择的风险详情子项
      curSelectRiskDetail: {},
      // 当前选择的隐患详情子项
      curSelectHDDetail: {},
      // 当前选择的安全检查子项
      curSelectSCDetail: {},
      // 是否显示企业信息弹窗
      isShowEnterInfo: false,
      // 是否显示安全检查弹窗
      isShowSCWindow: false,
      // 显示风险详情子项
      isShowRiskDetailItem: false,
      // 显示安全检查子项
      isShowSCItem: false,
      // 显示隐患检查子项
      isShowHDCheckItem: false,
      // 显示企业详情子项
      isShowEnterItem: false,
      // 是否显示监控
      isShowVideo: 0
    }
  },
  mounted() {
    this.initMap()
    this.initIndustry()
    this.initRegion()
    // 事件间隔
    this.timer1 = setInterval(() => {
      const curDate = new Date()
      this.curTime = `${curDate.getFullYear()}-${(curDate.getMonth() + 1) < 10 ? '0' + (curDate.getMonth() + 1) : (curDate.getMonth() + 1)}-${curDate.getDate() < 10 ? '0' + curDate.getDate() : curDate.getDate()} ${curDate.getHours() < 10 ? '0' + curDate.getHours() : curDate.getHours()}:${curDate.getMinutes() < 10 ? '0' + curDate.getMinutes() : curDate.getMinutes()}:${curDate.getSeconds() < 10 ? '0' + curDate.getSeconds() : curDate.getSeconds()}`
    }, 1000)
    //
    var popupVideo = this.$el.querySelector('#popupVideo')
    this.videoEl = popupVideo.firstElementChild.firstElementChild
    this.videoPlayer()
  },
  methods: {
    // 展示应急地图
    emmapShow() {
      this.mapActiveIndex = 1
    },
    // 展示隐患地图
    dangermapShow() {
      this.mapActiveIndex = 4
      // 显示统计图
      this.$nextTick(() => {
        // 设置本地区本年度隐患数量排行图标
        const charDom1 = document.querySelector('.annual-region-dgsumrank-content-wrapper')
        const myChart1 = echarts.init(charDom1)
        const option1 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {// Use axis to trigger tooltip
              type: 'shadow'// 'shadown' as default; can also be 'line' or 'shadow'
            }
          },
          legend: {
            data: ['一般隐患', '重大隐患'],
            right: '10%',
            textStyle: {
              color: '#A6F6F9'
            }
          },
          grid: {
            top: '10%',
            left: '3%',
            right: '4%',
            bottom: '8%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true
            },
            splitLine: {
              lineStyle: {
                opacity: '0.6'
              }
            }
          },
          yAxis: {
            type: 'category',
            data: ['威海市', '荣成市', '乳山市', '文登市', '环翠区', '临港区', '直辖市', '高区', '经区'],
            axisLabel: {
              color: '#A6F6F9',
              fontSize: '14'
            }
          },
          series: [
            {
              name: '重大隐患',
              type: 'bar',
              stack: 'total',
              label: {
                show: false
              },
              emphasis: {
                focus: 'series'
              },
              data: [5, 11, 4, 9, 6, 5, 5, 4, 2]
            },
            {
              name: '一般隐患',
              type: 'bar',
              stack: 'total',
              label: {
                show: true,
                position: 'right',
                // distance: '5',
                color: '#fff',
                fontSize: '14'
              },
              emphasis: {
                focus: 'series'
              },
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 1, 0,
                  [
                    { offset: 0, color: '#0988FE' },
                    { offset: 1, color: '#07FFF6' }
                  ]
                ),
                barBorderRadius: [0, 3, 3, 0]
              },
              barWidth: '60%',
              barGap: '30%',
              data: [10, 22, 9, 19, 17, 13, 12, 12, 12]
            }
          ]
        }
        myChart1.setOption(option1)
        // 设置不同等级风险数量统计
        const charDom2 = document.querySelector('.levels-risk-dg-content-wrapper')
        const myChart2 = echarts.init(charDom2)
        const option2 = {
          title: {
            text: '总数量',
            subtext: '11512',
            left: 'center',
            top: '40%',
            textStyle: {
              color: '#0FFFFF',
              fontSize: '16'
            },
            subtextStyle: {
              color: '#0FFFFF',
              fontSize: '16'
            }
          },
          // grid: {
          //   left: '10%',
          //   top: '10%',
          //   right: '10%',
          //   bottom: '10%'
          // },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            show: false
          },
          series: [
            {
              type: 'pie',
              radius: ['38%', '72%'],
              avoidLabelOverlaop: true,
              data: [
                {
                  value: 1048,
                  name: '低风险',
                  itemStyle: {
                    color: '#057AFD'
                  }
                },
                {
                  value: 12132,
                  name: '一般风险',
                  itemStyle: {
                    color: '#FDFA02'
                  }
                },
                {
                  value: 12132,
                  name: '较大风险',
                  itemStyle: {
                    color: '#F88F12'
                  }
                },
                {
                  value: 12132,
                  name: '重大风险',
                  itemStyle: {
                    color: '#FF414A'
                  }
                }
              ],
              label: {
                align: 'left',
                normal: {
                  formatter(v) {
                    return `${v.name}\n${v.value}`
                  },
                  textStyle: {
                    fontSize: 10
                  }
                }
              },
              labelLine: {
                length: 5,
                length2: 10
              }
            }
          ]
        }
        myChart2.setOption(option2)
        // 年度隐患数量及整改情况统计
        const charDom3 = document.querySelector('.annual-risk-dg-rect-tatistics-content-wrapper')
        const myChart3 = echarts.init(charDom3)
        const option3 = {
          title: {
            text: '总数量',
            subtext: '11512',
            left: 'center',
            top: '40%',
            textStyle: {
              color: '#F88F12',
              fontSize: '16'
            },
            subtextStyle: {
              color: '#F88F12',
              fontSize: '16'
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            show: false
          },
          series: [
            {
              type: 'pie',
              radius: ['40%', '72%'],
              avoidLabelOverlaop: true,
              data: [
                {
                  value: 12132,
                  name: '一般隐患未闭环',
                  itemStyle: {
                    color: '#FDFA02'
                  }
                },
                {
                  value: 35667,
                  name: '一般隐患已闭环',
                  itemStyle: {
                    color: '#F88F12'
                  }
                }
              ],
              label: {
                align: 'left',
                normal: {
                  formatter(v) {
                    return `${v.name}\n${v.value}`
                  },
                  textStyle: {
                    fontSize: 10
                  }
                }
              },
              labelLine: {
                length: 5,
                length2: 10
              }
            }
          ]
        }
        myChart3.setOption(option3)
        // 各地区风险数量统计
        const charDom4 = document.querySelector('.all-region-risk-sum-statistics-content-wrapper')
        const mychart4 = echarts.init(charDom4)
        const option4 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['低风险', '一般风险', '较大隐患', '重大隐患'],
            left: '35%',
            textStyle: {
              color: '#A6F6F9'
            }
          },
          grid: {
            top: '12%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['威海市', ' 荣成市', '文登区', '乳山市', '环翠区', '威海高区', '威海经区'],
              axisTick: {
                show: false,
                alignWithLabel: true
              },
              axisLabel: {
                color: '#A6F6F9'
              },
              axisLine: {
                show: false
              }
            }
          ],
          yAxis: [{
            type: 'value',
            axisLabel: {
              color: '#A6F6F9'
            },
            axisLine: {
              lineStyle: {
                color: '#fff',
                opacity: '0.7'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#fff',
                opacity: '0.4'
              }
            },
            axisTick: {
              show: false
            }
          }],
          series: [
            {
              name: '重大隐患',
              type: 'bar',
              barWidth: '30%',
              stack: 'total',
              data: [75, 85, 60, 70, 50, 80, 75],
              itemStyle: {
                color: '#FF1507'
              }
            },
            {
              name: '较大隐患',
              type: 'bar',
              barWidth: '30%',
              stack: 'total',
              data: [150, 175, 125, 150, 100, 160, 170],
              itemStyle: {
                color: '#F88F12'
              }
            },
            {
              name: '一般风险',
              type: 'bar',
              barWidth: '30%',
              stack: 'total',
              data: [300, 350, 250, 300, 200, 320, 340],
              itemStyle: {
                color: '#FDFA02'
              }
            },
            {
              name: '低风险',
              type: 'bar',
              barWidth: '30%',
              stack: 'total',
              data: [600, 700, 500, 600, 400, 640, 680],
              itemStyle: {
                color: '#057AFD',
                barBorderRadius: [3, 3, 0, 0]
              }
            }
          ]
        }
        mychart4.setOption(option4)
        // 隐患数量统计
        const charDom5 = document.querySelector('.hide-danger-sum-statistics-content-wrapper')
        const mychart5 = echarts.init(charDom5)
        const option5 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['一般隐患', '重大隐患'],
            left: '35%',
            textStyle: {
              color: '#A6F6F9'
            }
          },
          grid: {
            top: '12%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['威海市', ' 荣成市', '文登区', '乳山市', '环翠区', '威海高区', '威海经区'],
              axisTick: {
                show: false,
                alignWithLabel: true
              },
              axisLabel: {
                color: '#A6F6F9'
              },
              axisLine: {
                show: false
              }
            }
          ],
          yAxis: [{
            type: 'value',
            axisLabel: {
              color: '#A6F6F9'
            },
            axisLine: {
              lineStyle: {
                color: '#fff',
                opacity: '0.7'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#fff',
                opacity: '0.4'
              }
            },
            axisTick: {
              show: false
            }
          }],
          series: [
            {
              name: '重大隐患',
              type: 'bar',
              barWidth: '30%',
              stack: 'total',
              data: [75, 85, 60, 70, 50, 80, 75],
              itemStyle: {
                color: '#FF1507'
              }
            },
            {
              name: '一般隐患',
              type: 'bar',
              barWidth: '30%',
              stack: 'total',
              data: [600, 700, 500, 600, 400, 640, 680],
              itemStyle: {
                color: '#057AFD',
                barBorderRadius: [3, 3, 0, 0]
              }
            }
          ]
        }
        mychart5.setOption(option5)
      })
    },
    // 去后台
    tobackstage() {
      if (this.$router) {
        this.$router.push({ path: '/' })
      }
    },
    // 改变地图类型
    changemapstyle(trueorfalse) {
      this.isregularMap = trueorfalse
      if (trueorfalse === false) {
        this.satellitelayer.show()
        this.TileLayer.hide()
      } else {
        this.satellitelayer.hide()
        this.TileLayer.show()
      }
    },
    // 切换行业的显示
    showorhidePullDown() {
      this.isShowPullDown = !this.isShowPullDown
    },
    // 下拉框箭头方向替换
    changePullMenuShow() {
      this.isPullMenuShow = !this.isPullMenuShow
    },
    // 威海轮廓
    boundWeihai() {
      const AMap = window.AMap || this.AMap
      const map = this.map || {}
      AMap.plugin('AMap.DistrictSearch', function() {
        // 创建行政区查询对象
        var district = new AMap.DistrictSearch({
          // 返回行政区边界坐标等具体信息
          extensions: 'all',
          // 设置查询行政级别为 区
          level: 'district'
        })
        district.search('环翠区', function(status, result) {
          // 获取环翠区的边界信息
          var bounds = result.districtList[0].boundaries
          const polygons = []
          if (bounds) {
            for (let i = 0, l = bounds.length; i < l; i++) {
              // 生成行政区划polygon
              const polygon = new AMap.Polygon({
                map: map,
                strokeWeight: 3,
                path: bounds[i],
                fillOpacity: 0.7,
                fillColor: 'transparent',
                strokeColor: '#00eeff'
              })
              polygons.push(polygon)
            }
          }
        })
        district.search('荣成市', function(status, result) {
          // 获取荣成市的边界信息
          var bounds = result.districtList[0].boundaries
          const polygons = []
          if (bounds) {
            for (let i = 0, l = bounds.length; i < l; i++) {
              // 生成行政区划polygon
              const polygon = new AMap.Polygon({
                map: map,
                strokeWeight: 3,
                path: bounds[i],
                fillOpacity: 0.7,
                fillColor: 'transparent',
                strokeColor: '#00eeff'
              })
              polygons.push(polygon)
            }
          }
        })
        district.search('乳山市', function(status, result) {
          // 获取乳山市的边界信息
          var bounds = result.districtList[0].boundaries
          const polygons = []
          if (bounds) {
            for (let i = 0, l = bounds.length; i < l; i++) {
              // 生成行政区划polygon
              const polygon = new AMap.Polygon({
                map: map,
                strokeWeight: 3,
                path: bounds[i],
                fillOpacity: 0.7,
                fillColor: 'transparent',
                strokeColor: '#00eeff'
              })
              polygons.push(polygon)
            }
          }
        })
        district.search('文登区', function(status, result) {
          // 获取文登区的边界信息
          var bounds = result.districtList[0].boundaries
          const polygons = []
          if (bounds) {
            for (let i = 0, l = bounds.length; i < l; i++) {
              // 生成行政区划polygon
              const polygon = new AMap.Polygon({
                map: map,
                strokeWeight: 3,
                path: bounds[i],
                fillOpacity: 0.7,
                fillColor: 'transparent',
                strokeColor: '#00eeff'
              })
              polygons.push(polygon)
            }
          }
        })
        var district2 = new AMap.DistrictSearch({
          // 返回市坐标等具体信息
          extensions: 'all',
          // 设置查询行政区级别为 市
          level: 'city'
        })
        district2.search('威海市', function(status, result) {
          // 获取威海市的边界信息
          // const bounds = result.districtList[0].boundaries
          // if (bounds) {
          //   for (let i = 0, l = bounds.length; i < l; i++) {
          //     // 生成市polygon
          //     var polygon = new AMap.Polygon({
          //       map: map,
          //       strokeWeight: 1,
          //       path: bounds[i],
          //       fillOpacity: 0.7,
          //       fillColor: '#fff',
          //       strokeColor: '#ff0000'
          //     })
          //   }
          // }
          const outer = [
            new AMap.LngLat(-360, 90, true),
            new AMap.LngLat(-360, -90, true),
            new AMap.LngLat(360, -90, true),
            new AMap.LngLat(360, 90, true)
          ]
          const holes = result.districtList[0].boundaries
          const pathArray = [
            outer
          ]
          pathArray.push.apply(pathArray, holes)
          const polygon = new AMap.Polygon({
            path: pathArray,
            strokeColor: '#00eeff',
            strokeWeight: 3,
            fillColor: '#03176D',
            fillOpacity: 0.7
          })
          polygon.setPath(pathArray)
          map.add(polygon)
        })
      })
    },
    // 切换隐患标识
    hdidentifychange() {
      this.isShowhdidentify = !this.isShowhdidentify
      // 进行 dom 操作
      if (this.isShowhdidentify) {
        document.querySelectorAll('.markHDPos').forEach(item => {
          if (item.classList.contains('hidemarkHDPos')) {
            item.classList.remove('hidemarkHDPos')
          }
        })
      } else {
        document.querySelectorAll('.markHDPos').forEach(item => {
          if (!item.classList.contains('hidemarkHDPos')) {
            item.classList.add('hidemarkHDPos')
          }
        })
      }
    },
    // 显示应急行业
    showEmergencyIndustryEyes() {
      // 设置当前行业状态
      this.isemornation = 1
      this.isShowrenoin = false
      this.isShowEmergencyOrNation = true
    },
    // 显示国民经济行业
    showNationIndustryEyes() {
      this.isemornation = 2
      this.isShowrenoin = false
      this.isShowEmergencyOrNation = false
    },
    // 是否显示所有
    isShowClick() {
      this.isShowAll = !this.isShowAll
    },
    // 显示所有区域
    showreorinClick(reorin) {
      if (this.isShowrenoin !== reorin) {
        this.isShowrenoin = reorin
        this.isemornation = 0
      }
    },
    // 初始化所有行业
    async initIndustry() {
      // 获取当前所有应急行业
      await getindustry().then(res => {
        this.industryNames = [...res.content]
      })
      // 获取当前所有国民经济行业
      let nationIndusNamesLevel1 = []
      await findDimindustry().then(res => {
        nationIndusNamesLevel1 = [...res]
      })
      const nationIndustryNames2 = []
      const promiseNationArray = []
      for (let i = 0; i < nationIndusNamesLevel1.length; i++) {
        const promise1 = findDimindustry(nationIndusNamesLevel1[i].industryId).then(res => {
          nationIndustryNames2.push(...res)
        })
        promiseNationArray.push(promise1)
      }
      await Promise.all(promiseNationArray).then(res => {})
      // 初始化一个新的应急行业和国民经济行业的列表
      // 初始化应急行业
      const newIndusName1 = []
      for (let i = 0; i < this.industryNames.length; i++) {
        newIndusName1.push({
          isShow: false,
          name: this.industryNames[i].industryName,
          sum: 0,
          indusmarkers: [],
          coms: []
        })
      }
      this.emergencyIndustryNames = [...newIndusName1]
      // 初始化国民经济行业
      for (let i = 0; i < nationIndustryNames2.length; i++) {
        this.nationIndustryNames.push({
          isShow: false,
          name: nationIndustryNames2[i].name,
          sum: 0,
          indusmarkers: [],
          coms: []
        })
      }
    },
    // 根据风险等级、隐患等级、隐患超期返回content
    getContentLighter(riskLevel, hdLevel, hdOverTime) {
      // 不包含隐患的 企业图标 蓝 黄 橙 红
      const tempnohdIcons = [
        'data:image/png;base64, ',
        'data:image/png;base64, ',
        'data:image/png;base64, ',
        'data:image/png;base64, '
      ]
      // 包含隐患的 企业图标
      const temphdIcons = [
        'data:image/png;base64, ',
        'data:image/png;base64, ',
        'data:image/png;base64, ',
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAAzCAYAAAAHM1FMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQ0QyQzVBOUY4QUQxMUVCQUQwQ0I5RTAzNTBGQjQyMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQ0QyQzVBQUY4QUQxMUVCQUQwQ0I5RTAzNTBGQjQyMCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkNDRDJDNUE3RjhBRDExRUJBRDBDQjlFMDM1MEZCNDIwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNDRDJDNUE4RjhBRDExRUJBRDBDQjlFMDM1MEZCNDIwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+AsWE4QAACFFJREFUeNrEWn1wVNUV/937NrtLssmSBKQwCjMdhCml02iLJlXbadRMEZTxg1H/aOsHokCnY6ZOB6ZUa6fF0Vpr26EVlU5hpq0VdUpx6h/MhBoSYNoBSuVDrBgjSaAJMYT9yn68e3ve2w/ue/ve7ma7m9yZs+/tvt17f+f3zjn3nPOW+XxeVHCwEr4jK7WYp1JARwK8yc+wgD5s1AFOCBO6xFi/xEfXRkRUAc0qpRArg3lz8bF6fpUPuJtWbacP2ujY7IaGrvcJoJeU2nta4K/XR8QlF9CyWuDZZi9jm3xsBZ13EqCv0UpcXVEWWZ2lJUaK7IpIPD83LE7afj4pJUoBbzIdqufXENKt9KZVKkDtwGURG2OXRdJ3dwwIPLkkIobKUaIYeHaglntaNDxF5xtpJs0OPCvCeGmeBXbFHMDrhYxGIYcGISNhO2gwZnk/lpBYNyss3nC5gbIc8Gw4wBvrGN7KmEgapHqsDUC7405o31gJrfUGsObmvElEfx+SPd1I7vkLUvv2guu6CZpnwPOMIjTfL9bE5MY3U1IvVQE38OxCgM+uZdhHv1piYdiQGXXwfPd7qFm7HqwhWLKD6X1nMPH8M0i8/kcKR9JUgCsK0Px/+kFcPvibhEyVooATeHY+wIMNaeAtFtDGxbab4N36KvhV88uOscmDPQivewhy4Cy0jAJaRgkyv1eawmKDcpNdFeBOESXIsN0JOH9gLfxv/e3/Am6MmrYbEew6BH5dKwwbMcSgWpemAo+QuW5QLIuVavMsWs/X0XGrCtoEvv5x+J5+ppK7MTl1BGN3Loc4/E+T+ZwwJIYFWhdFxHsugS0PPKONZx5tPCfoajAL3mCF3XYH/L9/LR0mKjzE6AWMdtwE1v+xSbUnowCt9I9lUfHVMwK6Q3DLNxsCvkkFbhrdvCvh++W2qgA3AVB4Db68E0lNM9dLZQijcV1XLV/lYDrMDp6NBjgFaKyBaud0UvPjZ8FmzkQ1h/dLy+D/1sMm8OzdNiRAZKoY7fafY34GwzcJq89yfz7/BdRQHJ+K0fDEJui0uekKeTRajtfxFsV5LexzJQbda2fd+8j6qpmLfWhzPgPfqntM9lMK+00M99k2aCvzlM4206fXWDYjrw+eVXdhKkft6vvMcKmyT87bbgNusXlGO+n1Mp2D5/IUTnbI6humFPyMr9wI4fPl7F6kAS6lvafWqRbIprSLYcuK+LVfxlQP5p8BbclSk32RDaUEZYWHLXLYtFjW5ufaAylfeDWmY3hoXXVzNLDUM8xzyrB55iyQY12mj6yxeVrA85lNFvAZ06l3clqeuTXSbjaobGE+CcP3W0hEOvqknHIcTwbwQF45Fw5PC3YRCuWlkxclBl0dNilxJG+SocFpAZ+wrUsKRH6ekCedmDfBHxayhw4xS+HwwfvTAj5++pTl/QTw7u6UjDv6h/HSEZUxiqtvWwqGAz1TDjxJrCc/7rN8Niqxx622z6UHUapg1DgkqGRL2Vio9hh/522LYZPtX+icELtdI1PWtFbGxN/peEqNR7E/7JhS8J/SeupONC6xs1dH3K2zkmP+iA4Zk9iiXozt/B3ExYtTAvzSu12IHzuqBvLQtoTcVqirZilG7o3JN+jKiRz74RAubflR1YFLXcfQk5tyhbghFyR+9VJSjtk6LpZSkKuhvVuX+jiwMdeSMNjf8SomerurCv78C88hcfzfuTUJaV9nXLxiyxJkse6B/GxY7KXIsyfLvkasjD36AFJVivsXyUmHf/ZTSwF+UsjNh3QzdIsCBbjkTh8eF3iCgEeyTOD8OYzctaLiCoR6utG/5tsmQVpmu48Ab94dk/uUrLh05g1pj4p+UvuHXGkIiQ9P4/xt7Zj415GKAB/d9Ro+Wr0KfCJqgs48KBh6LiE3Z4ope34mCzmsJStui4iX6KQ7y4g5+cAnpMDN+PSFZyETifI2opER9D32ED559EHwxERubhJxTMjOP6edVFeYl27MW/o2ipikd9XyBUs5DtIMTdnakvKgdIo3fwGC33kcDavvh1ZCvzIxcBbD27dhdPvLZBshqKQYQgH5160RYYTqpK2M1W393Rz7dvBQwJv++kEdX9HIsItmY9m2nCkZJQRVP34q3/xtN8C3+HPwzL4CjOpfPRJG8twQYifeQ5hsO3r0MNWZwhIOs8BpnkMdUXHPoDQ3pJTSARQOdu8IPq+Nnr0DgwG+pQbotPQVM73FVAF67JOqPqRd7owN70jKW3+SkEPIn063xXmLzWsej+b0AMOeHO3v8LCv08JXQi0mWbqzy23A7AA9NqkxhH7nYUiSnd+/IS5POZiJKPakyLHF7eQD+8n+l3AcoBlnqbOr50LmU8TUNgUuK2so9V+JzmURsdMBtCgS44uCz1PgTIC3NwK7aVavKLKSdJskI2GJFxdHxNMOoGUpwAs+GXHzg3MB/rCf4bdSlgY8rymaDievfzEi1o7JPBNxm0oWSonhlrnZJ5sbFtvJPF40br/G8u3ZTbTLG9GB78flYwRcDYnCJa6jkM3bHbbQHchNRKV51y0e1kKaL8o5Lct3Wvt7+soZSv5ufyoux11YLvlJYCGzKWpGR+p48GqOd4w+OkqjavA/AjeTg/bB+REuMMkHyZN6Am5/fzbAZzcxGMXuwiKrjpCZtM8Pi/ftSWA5oMsB76jEeD1fSHG7l05nu6w8TpHlljlhcbQIyEn/eYKXU/ioEgyJD8nTbiWNxpnN1kki9KXbCfjhAs4oUea/PsoBn6dMfUgcI+DLScJKXDXOlwdCYn8JjonpAm8Of0gcpMNKo4ti1Bkky/1p4NVriVf4n06YqOcdRkFEwHurXbj/T4ABAGV96ZmsmUXmAAAAAElFTkSuQmCC'
      ]
      // 隐患等级的图标
      const overtimeIcons = [
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAdCAYAAABmH3YuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDNTEzNEJEN0Y5N0UxMUVCQjBBNkZDOTRGNjU4RTA0RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDNTEzNEJEOEY5N0UxMUVCQjBBNkZDOTRGNjU4RTA0RCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkM1MTM0QkQ1Rjk3RTExRUJCMEE2RkM5NEY2NThFMDREIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkM1MTM0QkQ2Rjk3RTExRUJCMEE2RkM5NEY2NThFMDREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+fYPh1gAAAPNJREFUeNpi/P//P8PED1w6DAwMjUDsCMQ3gbgvX+DbasZJ7zllgJzbQMzBgAo8WZgYGGKwSIBAEwszAwMXA3bABZL8hUPyO1CSkQEXAOnELcky6CT/k6uTlYCduIKIEaSTE4ckD0jnDRyS15mAkkuAeDfIYUj4ORDnMYKSCVjZe+50IKUNxC+BeJqm4Nf3cElsgIkBn1dAxOP33DxAqhSITYD4AxAvkhX8upPx2TsuKSDnFBBLo2lsYXz5jms7kOGBK5nY40pgTMAE9hKUyLBgTqAkQx4okWHBJ5h4Bb9sBvonAoiPA/FHIH4ExLOA2B4gwAAuGDZOid/uPAAAAABJRU5ErkJggg==',
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAaCAYAAAB7GkaWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDNDgwRkIyQUY4QUQxMUVCQUZFMEQ3Njg5MEM0MENENiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDNDgwRkIyQkY4QUQxMUVCQUZFMEQ3Njg5MEM0MENENiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkM0ODBGQjI4RjhBRDExRUJBRkUwRDc2ODkwQzQwQ0Q2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkM0ODBGQjI5RjhBRDExRUJBRkUwRDc2ODkwQzQwQ0Q2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+zyfDUgAAAMRJREFUeNpi/P//P8O/DFYFBgaGfiC2AeJ9QJzDNOP3a8a/6Sw8QM59IBZhQIBHQKzOBCRM0SRAQA6I9UGSrAzYATtI8g8OyT9MDHjACJFkBEmy45BkA0k+xSH5hAkYb5eAjI1oEouB4rcZQZENAsAIzwRSGkB8GSgxB2wpTJKga4G6URzHCE1DLkB2AyhpAPFjIO4GGr0clIZ0QPZgMdULZGw+DivzQZKM+EJoEg7JSbBA8ATiE0D8EYhB/Fig+FaAAAMAxh45OHmEBf4AAAAASUVORK5CYII='
      ]
      // const overtimeIcons = [
      //   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAaCAYAAAB7GkaWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDNDgwRkIyQUY4QUQxMUVCQUZFMEQ3Njg5MEM0MENENiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDNDgwRkIyQkY4QUQxMUVCQUZFMEQ3Njg5MEM0MENENiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkM0ODBGQjI4RjhBRDExRUJBRkUwRDc2ODkwQzQwQ0Q2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkM0ODBGQjI5RjhBRDExRUJBRkUwRDc2ODkwQzQwQ0Q2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+zyfDUgAAAMRJREFUeNpi/P//P8O/DFYFBgaGfiC2AeJ9QJzDNOP3a8a/6Sw8QM59IBZhQIBHQKzOBCRM0SRAQA6I9UGSrAzYATtI8g8OyT9MDHjACJFkBEmy45BkA0k+xSH5hAkYb5eAjI1oEouB4rcZQZENAsAIzwRSGkB8GSgxB2wpTJKga4G6URzHCE1DLkB2AyhpAPFjIO4GGr0clIZ0QPZgMdULZGw+DivzQZKM+EJoEg7JSbBA8ATiE0D8EYhB/Fig+FaAAAMAxh45OHmEBf4AAAAASUVORK5CYII=',
      //   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAaCAYAAAB7GkaWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDNDgwRkIyQUY4QUQxMUVCQUZFMEQ3Njg5MEM0MENENiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDNDgwRkIyQkY4QUQxMUVCQUZFMEQ3Njg5MEM0MENENiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkM0ODBGQjI4RjhBRDExRUJBRkUwRDc2ODkwQzQwQ0Q2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkM0ODBGQjI5RjhBRDExRUJBRkUwRDc2ODkwQzQwQ0Q2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+zyfDUgAAAMRJREFUeNpi/P//P8O/DFYFBgaGfiC2AeJ9QJzDNOP3a8a/6Sw8QM59IBZhQIBHQKzOBCRM0SRAQA6I9UGSrAzYATtI8g8OyT9MDHjACJFkBEmy45BkA0k+xSH5hAkYb5eAjI1oEouB4rcZQZENAsAIzwRSGkB8GSgxB2wpTJKga4G6URzHCE1DLkB2AyhpAPFjIO4GGr0clIZ0QPZgMdULZGw+DivzQZKM+EJoEg7JSbBA8ATiE0D8EYhB/Fig+FaAAAMAxh45OHmEBf4AAAAASUVORK5CYII=',
      //   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAdCAYAAABmH3YuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDNTEzNEJEN0Y5N0UxMUVCQjBBNkZDOTRGNjU4RTA0RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDNTEzNEJEOEY5N0UxMUVCQjBBNkZDOTRGNjU4RTA0RCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkM1MTM0QkQ1Rjk3RTExRUJCMEE2RkM5NEY2NThFMDREIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkM1MTM0QkQ2Rjk3RTExRUJCMEE2RkM5NEY2NThFMDREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+fYPh1gAAAPNJREFUeNpi/P//P8PED1w6DAwMjUDsCMQ3gbgvX+DbasZJ7zllgJzbQMzBgAo8WZgYGGKwSIBAEwszAwMXA3bABZL8hUPyO1CSkQEXAOnELcky6CT/k6uTlYCduIKIEaSTE4ckD0jnDRyS15mAkkuAeDfIYUj4ORDnMYKSCVjZe+50IKUNxC+BeJqm4Nf3cElsgIkBn1dAxOP33DxAqhSITYD4AxAvkhX8upPx2TsuKSDnFBBLo2lsYXz5jms7kOGBK5nY40pgTMAE9hKUyLBgTqAkQx4okWHBJ5h4Bb9sBvonAoiPA/FHIH4ExLOA2B4gwAAuGDZOid/uPAAAAABJRU5ErkJggg=='
      // ]
      // const overtimeIcons = [
      //   '',
      //   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAdCAYAAABmH3YuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBQjg3MTQxMUZBNjgxMUVCQUI5NUIyOEJGOEYzMjExNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBQjg3MTQxMkZBNjgxMUVCQUI5NUIyOEJGOEYzMjExNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkFCODcxNDBGRkE2ODExRUJBQjk1QjI4QkY4RjMyMTE3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkFCODcxNDEwRkE2ODExRUJBQjk1QjI4QkY4RjMyMTE3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+rJRmAQAAAMpJREFUeNpi+P//P8MXYQ4dIF4LxO+A+DgQh4LEGYEMGQYGhttAzMGACjyZgEQMFgkQaAJJcjFgB1wgyV84JL8zMeABo5JQSUYccowgSU4ckjwgyRs4JK+DIhukYAcQuyJJPAdic0ZQcgCBryKc6UBKG4hfAvE07jff38MlSfYKC9RIHiBVCsQmQPwBiBcBjd0JcpAUkHMKiKXRNLaAJLcDGR647LTHl8Be4pDkBEnm4ZA8wQR01WYgIwKIjwPxRyB+BMSzQNYBBBgA+2M49VukTB4AAAAASUVORK5CYII='
      // ]
      if (hdLevel === '一般隐患') {
        if (riskLevel === '低风险') {
          if (hdOverTime) {
            return `<div class='markernormal lighter'><img class='enterabnormal' src="${temphdIcons[0]}" /><img class='exclamation' src="${overtimeIcons[0]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal lighter'><img class='enterabnormal' src="${temphdIcons[0]}" /><img class='exclamation' src="${overtimeIcons[0]}" /></div>`
          }
        } else if (riskLevel === '一般风险') {
          if (hdOverTime) {
            return `<div class='markernormal lighter'><img class='enterabnormal' src="${temphdIcons[1]}" /><img class='exclamation' src="${overtimeIcons[0]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal lighter'><img class='enterabnormal' src="${temphdIcons[1]}" /><img class='exclamation' src="${overtimeIcons[0]}" /></div>`
          }
        } else if (riskLevel === '较大风险') {
          if (hdOverTime) {
            return `<div class='markernormal lighter'><img class='enterabnormal' src="${temphdIcons[2]}" /><img class='exclamation' src="${overtimeIcons[0]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal lighter'><img class='enterabnormal' src="${temphdIcons[2]}" /><img class='exclamation' src="${overtimeIcons[0]}" /></div>`
          }
        } else if (riskLevel === '重大风险') {
          if (hdOverTime) {
            return `<div class='markernormal lighter'><img class='enterabnormal' src="${temphdIcons[3]}" /><img class='exclamation' src="${overtimeIcons[0]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal lighter'><img class='enterabnormal' src="${temphdIcons[3]}" /><img class='exclamation' src="${overtimeIcons[0]}" /></div>`
          }
        } else {
          if (hdOverTime) {
            return `<div class='markernormal lighter'><img class='enterabnormal' src="${temphdIcons[0]}" /><img class='exclamation' src="${overtimeIcons[0]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal lighter'><img class='enterabnormal' src="${temphdIcons[0]}" /><img class='exclamation' src="${overtimeIcons[0]}" /></div>`
          }
        }
      } else if (hdLevel === '重大隐患') {
        if (riskLevel === '低风险') {
          if (hdOverTime) {
            return `<div class='markernormal lighter'><img class='enterabnormal' src="${temphdIcons[0]}" /><img class='exclamation' src="${overtimeIcons[1]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal lighter'><img class='enterabnormal' src="${temphdIcons[0]}" /><img class='exclamation' src="${overtimeIcons[1]}" /></div>`
          }
        } else if (riskLevel === '一般风险') {
          if (hdOverTime) {
            return `<div class='markernormal lighter'><img class='enterabnormal' src="${temphdIcons[1]}" /><img class='exclamation' src="${overtimeIcons[1]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal lighter'><img class='enterabnormal' src="${temphdIcons[1]}" /><img class='exclamation' src="${overtimeIcons[1]}" /></div>`
          }
        } else if (riskLevel === '较大风险') {
          if (hdOverTime) {
            return `<div class='markernormal lighter'><img class='enterabnormal' src="${temphdIcons[2]}" /><img class='exclamation' src="${overtimeIcons[1]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal lighter'><img class='enterabnormal' src="${temphdIcons[2]}" /><img class='exclamation' src="${overtimeIcons[1]}" /></div>`
          }
        } else if (riskLevel === '重大风险') {
          if (hdOverTime) {
            return `<div class='markernormal lighter'><img class='enterabnormal' src="${temphdIcons[3]}" /><img class='exclamation' src="${overtimeIcons[1]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal lighter'><img class='enterabnormal' src="${temphdIcons[3]}" /><img class='exclamation' src="${overtimeIcons[1]}" /></div>`
          }
        } else {
          if (hdOverTime) {
            return `<div class='markernormal lighter'><img class='enterabnormal' src="${temphdIcons[0]}" /><img class='exclamation' src="${overtimeIcons[1]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal lighter'><img class='enterabnormal' src="${temphdIcons[0]}" /><img class='exclamation' src="${overtimeIcons[1]}" /></div>`
          }
        }
      } else {
        if (riskLevel === '低风险') {
          if (hdOverTime) {
            return `<div class='markernormal lighter'><img class='enternormal' src="${tempnohdIcons[0]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal lighter'><img class='enternormal' src="${tempnohdIcons[0]}" /></div>`
          }
        } else if (riskLevel === '一般风险') {
          if (hdOverTime) {
            return `<div class='markernormal lighter'><img class='enternormal' src="${tempnohdIcons[1]}"/><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal lighter'><img class='enternormal' src="${tempnohdIcons[1]}"/></div>`
          }
        } else if (riskLevel === '较大风险') {
          if (hdOverTime) {
            return `<div class='markernormal lighter'><img class='enternormal' src="${tempnohdIcons[2]}"/><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal lighter'><img class='enternormal' src="${tempnohdIcons[2]}"/></div>`
          }
        } else if (riskLevel === '重大风险') {
          if (hdOverTime) {
            return `<div class='markernormal lighter'><img class='enternormal' src="${tempnohdIcons[3]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal lighter'><img class='enternormal' src="${tempnohdIcons[3]}"/></div>`
          }
        } else {
          if (hdOverTime) {
            return `<div class='markernormal lighter'><img class='enternormal' src="${tempnohdIcons[0]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal lighter'><img class='enternormal' src="${tempnohdIcons[0]}" /></div>`
          }
        }
      }
    },
    // 根据风险等级、隐患等级、隐患超期返回content
    getContent(riskLevel, hdLevel, hdOverTime) {
      // console.log(riskLevel, hdLevel, hdOverTime, 'hhhhhhhhh')
      // riskLevel = '重大风险'
      // hdLevel = '一般隐患'
      // hdOverTime = true
      // 不包含隐患的 企业图标 蓝 黄 橙 红
      const tempnohdIcons = [
        'data:image/png;base64, ',
        'data:image/png;base64, ',
        'data:image/png;base64, ',
        'data:image/png;base64, '
      ]
      // 包含隐患的 企业图标
      const temphdIcons = [
        'data:image/png;base64, ',
        'data:image/png;base64, ',
        'data:image/png;base64, ',
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAAzCAYAAAAHM1FMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQ0QyQzVBOUY4QUQxMUVCQUQwQ0I5RTAzNTBGQjQyMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQ0QyQzVBQUY4QUQxMUVCQUQwQ0I5RTAzNTBGQjQyMCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkNDRDJDNUE3RjhBRDExRUJBRDBDQjlFMDM1MEZCNDIwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNDRDJDNUE4RjhBRDExRUJBRDBDQjlFMDM1MEZCNDIwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+AsWE4QAACFFJREFUeNrEWn1wVNUV/937NrtLssmSBKQwCjMdhCml02iLJlXbadRMEZTxg1H/aOsHokCnY6ZOB6ZUa6fF0Vpr26EVlU5hpq0VdUpx6h/MhBoSYNoBSuVDrBgjSaAJMYT9yn68e3ve2w/ue/ve7ma7m9yZs+/tvt17f+f3zjn3nPOW+XxeVHCwEr4jK7WYp1JARwK8yc+wgD5s1AFOCBO6xFi/xEfXRkRUAc0qpRArg3lz8bF6fpUPuJtWbacP2ujY7IaGrvcJoJeU2nta4K/XR8QlF9CyWuDZZi9jm3xsBZ13EqCv0UpcXVEWWZ2lJUaK7IpIPD83LE7afj4pJUoBbzIdqufXENKt9KZVKkDtwGURG2OXRdJ3dwwIPLkkIobKUaIYeHaglntaNDxF5xtpJs0OPCvCeGmeBXbFHMDrhYxGIYcGISNhO2gwZnk/lpBYNyss3nC5gbIc8Gw4wBvrGN7KmEgapHqsDUC7405o31gJrfUGsObmvElEfx+SPd1I7vkLUvv2guu6CZpnwPOMIjTfL9bE5MY3U1IvVQE38OxCgM+uZdhHv1piYdiQGXXwfPd7qFm7HqwhWLKD6X1nMPH8M0i8/kcKR9JUgCsK0Px/+kFcPvibhEyVooATeHY+wIMNaeAtFtDGxbab4N36KvhV88uOscmDPQivewhy4Cy0jAJaRgkyv1eawmKDcpNdFeBOESXIsN0JOH9gLfxv/e3/Am6MmrYbEew6BH5dKwwbMcSgWpemAo+QuW5QLIuVavMsWs/X0XGrCtoEvv5x+J5+ppK7MTl1BGN3Loc4/E+T+ZwwJIYFWhdFxHsugS0PPKONZx5tPCfoajAL3mCF3XYH/L9/LR0mKjzE6AWMdtwE1v+xSbUnowCt9I9lUfHVMwK6Q3DLNxsCvkkFbhrdvCvh++W2qgA3AVB4Db68E0lNM9dLZQijcV1XLV/lYDrMDp6NBjgFaKyBaud0UvPjZ8FmzkQ1h/dLy+D/1sMm8OzdNiRAZKoY7fafY34GwzcJq89yfz7/BdRQHJ+K0fDEJui0uekKeTRajtfxFsV5LexzJQbda2fd+8j6qpmLfWhzPgPfqntM9lMK+00M99k2aCvzlM4206fXWDYjrw+eVXdhKkft6vvMcKmyT87bbgNusXlGO+n1Mp2D5/IUTnbI6humFPyMr9wI4fPl7F6kAS6lvafWqRbIprSLYcuK+LVfxlQP5p8BbclSk32RDaUEZYWHLXLYtFjW5ufaAylfeDWmY3hoXXVzNLDUM8xzyrB55iyQY12mj6yxeVrA85lNFvAZ06l3clqeuTXSbjaobGE+CcP3W0hEOvqknHIcTwbwQF45Fw5PC3YRCuWlkxclBl0dNilxJG+SocFpAZ+wrUsKRH6ekCedmDfBHxayhw4xS+HwwfvTAj5++pTl/QTw7u6UjDv6h/HSEZUxiqtvWwqGAz1TDjxJrCc/7rN8Niqxx622z6UHUapg1DgkqGRL2Vio9hh/522LYZPtX+icELtdI1PWtFbGxN/peEqNR7E/7JhS8J/SeupONC6xs1dH3K2zkmP+iA4Zk9iiXozt/B3ExYtTAvzSu12IHzuqBvLQtoTcVqirZilG7o3JN+jKiRz74RAubflR1YFLXcfQk5tyhbghFyR+9VJSjtk6LpZSkKuhvVuX+jiwMdeSMNjf8SomerurCv78C88hcfzfuTUJaV9nXLxiyxJkse6B/GxY7KXIsyfLvkasjD36AFJVivsXyUmHf/ZTSwF+UsjNh3QzdIsCBbjkTh8eF3iCgEeyTOD8OYzctaLiCoR6utG/5tsmQVpmu48Ab94dk/uUrLh05g1pj4p+UvuHXGkIiQ9P4/xt7Zj415GKAB/d9Ro+Wr0KfCJqgs48KBh6LiE3Z4ope34mCzmsJStui4iX6KQ7y4g5+cAnpMDN+PSFZyETifI2opER9D32ED559EHwxERubhJxTMjOP6edVFeYl27MW/o2ipikd9XyBUs5DtIMTdnakvKgdIo3fwGC33kcDavvh1ZCvzIxcBbD27dhdPvLZBshqKQYQgH5160RYYTqpK2M1W393Rz7dvBQwJv++kEdX9HIsItmY9m2nCkZJQRVP34q3/xtN8C3+HPwzL4CjOpfPRJG8twQYifeQ5hsO3r0MNWZwhIOs8BpnkMdUXHPoDQ3pJTSARQOdu8IPq+Nnr0DgwG+pQbotPQVM73FVAF67JOqPqRd7owN70jKW3+SkEPIn063xXmLzWsej+b0AMOeHO3v8LCv08JXQi0mWbqzy23A7AA9NqkxhH7nYUiSnd+/IS5POZiJKPakyLHF7eQD+8n+l3AcoBlnqbOr50LmU8TUNgUuK2so9V+JzmURsdMBtCgS44uCz1PgTIC3NwK7aVavKLKSdJskI2GJFxdHxNMOoGUpwAs+GXHzg3MB/rCf4bdSlgY8rymaDievfzEi1o7JPBNxm0oWSonhlrnZJ5sbFtvJPF40br/G8u3ZTbTLG9GB78flYwRcDYnCJa6jkM3bHbbQHchNRKV51y0e1kKaL8o5Lct3Wvt7+soZSv5ufyoux11YLvlJYCGzKWpGR+p48GqOd4w+OkqjavA/AjeTg/bB+REuMMkHyZN6Am5/fzbAZzcxGMXuwiKrjpCZtM8Pi/ftSWA5oMsB76jEeD1fSHG7l05nu6w8TpHlljlhcbQIyEn/eYKXU/ioEgyJD8nTbiWNxpnN1kki9KXbCfjhAs4oUea/PsoBn6dMfUgcI+DLScJKXDXOlwdCYn8JjonpAm8Of0gcpMNKo4ti1Bkky/1p4NVriVf4n06YqOcdRkFEwHurXbj/T4ABAGV96ZmsmUXmAAAAAElFTkSuQmCC'
      ]
      // 隐患等级的图标
      const overtimeIcons = [
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAdCAYAAABmH3YuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDNTEzNEJEN0Y5N0UxMUVCQjBBNkZDOTRGNjU4RTA0RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDNTEzNEJEOEY5N0UxMUVCQjBBNkZDOTRGNjU4RTA0RCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkM1MTM0QkQ1Rjk3RTExRUJCMEE2RkM5NEY2NThFMDREIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkM1MTM0QkQ2Rjk3RTExRUJCMEE2RkM5NEY2NThFMDREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+fYPh1gAAAPNJREFUeNpi/P//P8PED1w6DAwMjUDsCMQ3gbgvX+DbasZJ7zllgJzbQMzBgAo8WZgYGGKwSIBAEwszAwMXA3bABZL8hUPyO1CSkQEXAOnELcky6CT/k6uTlYCduIKIEaSTE4ckD0jnDRyS15mAkkuAeDfIYUj4ORDnMYKSCVjZe+50IKUNxC+BeJqm4Nf3cElsgIkBn1dAxOP33DxAqhSITYD4AxAvkhX8upPx2TsuKSDnFBBLo2lsYXz5jms7kOGBK5nY40pgTMAE9hKUyLBgTqAkQx4okWHBJ5h4Bb9sBvonAoiPA/FHIH4ExLOA2B4gwAAuGDZOid/uPAAAAABJRU5ErkJggg==',
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAaCAYAAAB7GkaWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDNDgwRkIyQUY4QUQxMUVCQUZFMEQ3Njg5MEM0MENENiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDNDgwRkIyQkY4QUQxMUVCQUZFMEQ3Njg5MEM0MENENiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkM0ODBGQjI4RjhBRDExRUJBRkUwRDc2ODkwQzQwQ0Q2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkM0ODBGQjI5RjhBRDExRUJBRkUwRDc2ODkwQzQwQ0Q2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+zyfDUgAAAMRJREFUeNpi/P//P8O/DFYFBgaGfiC2AeJ9QJzDNOP3a8a/6Sw8QM59IBZhQIBHQKzOBCRM0SRAQA6I9UGSrAzYATtI8g8OyT9MDHjACJFkBEmy45BkA0k+xSH5hAkYb5eAjI1oEouB4rcZQZENAsAIzwRSGkB8GSgxB2wpTJKga4G6URzHCE1DLkB2AyhpAPFjIO4GGr0clIZ0QPZgMdULZGw+DivzQZKM+EJoEg7JSbBA8ATiE0D8EYhB/Fig+FaAAAMAxh45OHmEBf4AAAAASUVORK5CYII='
      ]
      if (hdLevel === '一般隐患') {
        if (riskLevel === '低风险') {
          if (hdOverTime) {
            return `<div class='markernormal'><img class='enterabnormal' src="${temphdIcons[0]}" /><img class='exclamation' src="${overtimeIcons[0]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal'><img class='enterabnormal' src="${temphdIcons[0]}" /><img class='exclamation' src="${overtimeIcons[0]}" /></div>`
          }
        } else if (riskLevel === '一般风险') {
          if (hdOverTime) {
            return `<div class='markernormal'><img class='enterabnormal' src="${temphdIcons[1]}" /><img class='exclamation' src="${overtimeIcons[0]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal'><img class='enterabnormal' src="${temphdIcons[1]}" /><img class='exclamation' src="${overtimeIcons[0]}" /></div>`
          }
        } else if (riskLevel === '较大风险') {
          if (hdOverTime) {
            return `<div class='markernormal'><img class='enterabnormal' src="${temphdIcons[2]}" /><img class='exclamation' src="${overtimeIcons[0]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal'><img class='enterabnormal' src="${temphdIcons[2]}" /><img class='exclamation' src="${overtimeIcons[0]}" /></div>`
          }
        } else if (riskLevel === '重大风险') {
          if (hdOverTime) {
            return `<div class='markernormal'><img class='enterabnormal' src="${temphdIcons[3]}" /><img class='exclamation' src="${overtimeIcons[0]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal'><img class='enterabnormal' src="${temphdIcons[3]}" /><img class='exclamation' src="${overtimeIcons[0]}" /></div>`
          }
        } else {
          if (hdOverTime) {
            return `<div class='markernormal'><img class='enterabnormal' src="${temphdIcons[0]}" /><img class='exclamation' src="${overtimeIcons[0]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal'><img class='enterabnormal' src="${temphdIcons[0]}" /><img class='exclamation' src="${overtimeIcons[0]}" /></div>`
          }
        }
      } else if (hdLevel === '重大隐患') {
        if (riskLevel === '低风险') {
          if (hdOverTime) {
            return `<div class='markernormal'><img class='enterabnormal' src="${temphdIcons[0]}" /><img class='exclamation' src="${overtimeIcons[1]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal'><img class='enterabnormal' src="${temphdIcons[0]}" /><img class='exclamation' src="${overtimeIcons[1]}" /></div>`
          }
        } else if (riskLevel === '一般风险') {
          if (hdOverTime) {
            return `<div class='markernormal'><img class='enterabnormal' src="${temphdIcons[1]}" /><img class='exclamation' src="${overtimeIcons[1]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal'><img class='enterabnormal' src="${temphdIcons[1]}" /><img class='exclamation' src="${overtimeIcons[1]}" /></div>`
          }
        } else if (riskLevel === '较大风险') {
          if (hdOverTime) {
            return `<div class='markernormal'><img class='enterabnormal' src="${temphdIcons[2]}" /><img class='exclamation' src="${overtimeIcons[1]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal'><img class='enterabnormal' src="${temphdIcons[2]}" /><img class='exclamation' src="${overtimeIcons[1]}" /></div>`
          }
        } else if (riskLevel === '重大风险') {
          if (hdOverTime) {
            return `<div class='markernormal'><img class='enterabnormal' src="${temphdIcons[3]}" /><img class='exclamation' src="${overtimeIcons[1]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal'><img class='enterabnormal' src="${temphdIcons[3]}" /><img class='exclamation' src="${overtimeIcons[1]}" /></div>`
          }
        } else {
          if (hdOverTime) {
            return `<div class='markernormal'><img class='enterabnormal' src="${temphdIcons[0]}" /><img class='exclamation' src="${overtimeIcons[1]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal'><img class='enterabnormal' src="${temphdIcons[0]}" /><img class='exclamation' src="${overtimeIcons[1]}" /></div>`
          }
        }
      } else {
        if (riskLevel === '低风险') {
          if (hdOverTime) {
            return `<div class='markernormal'><img class='enternormal' src="${tempnohdIcons[0]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal'><img class='enternormal' src="${tempnohdIcons[0]}" /></div>`
          }
        } else if (riskLevel === '一般风险') {
          if (hdOverTime) {
            return `<div class='markernormal'><img class='enternormal' src="${tempnohdIcons[1]}"/><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal'><img class='enternormal' src="${tempnohdIcons[1]}"/></div>`
          }
        } else if (riskLevel === '较大风险') {
          if (hdOverTime) {
            return `<div class='markernormal'><img class='enternormal' src="${tempnohdIcons[2]}"/><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal'><img class='enternormal' src="${tempnohdIcons[2]}"/></div>`
          }
        } else if (riskLevel === '重大风险') {
          if (hdOverTime) {
            return `<div class='markernormal'><img class='enternormal' src="${tempnohdIcons[3]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal'><img class='enternormal' src="${tempnohdIcons[3]}"/></div>`
          }
        } else {
          if (hdOverTime) {
            return `<div class='markernormal'><img class='enternormal' src="${tempnohdIcons[0]}" /><div class='animationripple'></div></div>`
          } else {
            return `<div class='markernormal'><img class='enternormal' src="${tempnohdIcons[0]}" /></div>`
          }
        }
      }
    },
    // 初始化所有区域 和 所有 marker 的基本信息
    async initRegion() {
      const AMap = window.AMap || {}
      // 当前经济开发区所有的镇
      const ETDATown = ['皇冠街道', '凤林街道', '西苑街道', '崮山镇', '泊于镇']
      const ETDATownComs = []
      for (let i = 0; i < ETDATown.length; i++) {
        ETDATownComs.push({
          arr: ETDATown[i],
          coms: []
        })
      }
      const tempPromsieArr = []
      // 经济开发区西面所有镇对应的公司
      for (let i = 0; i < ETDATownComs.length; i++) {
        const p1 = getTownComs(ETDATownComs[i].arr).then(res => {
          ETDATownComs[i].coms = [...res]
        })
        tempPromsieArr.push(p1)
      }
      await Promise.all(tempPromsieArr)
      // 生成 markers
      for (let i = 0; i < ETDATownComs.length; i++) {
        const maskarr = {
          // 当前区域是否显示
          isShow: false,
          // markers 点标记
          markers: [],
          // 当前所有区域
          county: ETDATownComs[i].arr,
          // 当前区域所有公司
          coms: [...ETDATownComs[i].coms]
        }
        for (let j = 0; j < ETDATownComs[i].coms.length; j++) {
          // 根据企业id 和 企业
          const marker = new AMap.Marker({
            position: [Number(maskarr.coms[j].companyLng), Number(maskarr.coms[j].companyLat)],
            // offset: new AMap.Pixel(-14, -31),
            content: this.getContent(maskarr.coms[j].companyRiskLevel, maskarr.coms[j].companyHdLevel, maskarr.coms[j].companyOvertimeExist),
            title: maskarr.coms[j].companyName
          })
          marker.on('mouseover', () => {
            marker.setLabel({
              content: `<div>${maskarr.coms[j].companyName}</div>`,
              offset: new AMap.Pixel(0, -20)
            })
          })
          marker.on('mouseout', () => {
            marker.setLabel({
              content: ''
            })
          })
          marker.on('click', async() => {
            // 初始化当前选中的企业信息
            this.curSelectEnter = { ...maskarr.coms[j] }
            // 当前选中的企业风险
            await getthRisk(maskarr.coms[j].companyId, 0, 99999).then(res => {
              this.curSelectRisk = [...res.content]
            })
            await getriskNumAnalysis(maskarr.coms[j].companyId).then(res => {
              // console.log(res, 'hehehehhehehehehehe')
              // 初始化四个风险等级对应的数量
              this.riskMajorRiskSum = 0
              this.riskGreaterRiskSum = 0
              this.riskNormalRiskSum = 0
              this.riskLowRiskSum = 0
              if (res.totalElements > 3) {
                res.content.forEach(item => {
                  if (item.rnaLevel === '重大风险') {
                    this.riskMajorRiskSum = item.rnaNum
                  }
                  if (item.rnaLevel === '较大风险') {
                    this.riskGreaterRiskSum = item.rnaNum
                  }
                  if (item.rnaLevel === '一般风险') {
                    this.riskNormalRiskSum = item.rnaNum
                  }
                  if (item.rnaLevel === '低风险') {
                    this.riskLowRiskSum = item.rnaNum
                  }
                })
              }
            })
            // 当前选中的企业隐患
            await getHideDangeByIdOrderHdLevel(maskarr.coms[j].companyId).then(res => {
              this.curSelectHD = [...res.content]
              // 当前一般隐患数量
              this.curSelectHDGenSum = this.curSelectHD.filter(item => Number(item.hdLevel) === 1).length
              // 当前重大隐患数量
              this.curSelectHDMajorSum = this.curSelectHD.filter(item => Number(item.hdLevel) === 2).length
              // 未整改的数量
              this.curSelectHDNorectSum = this.curSelectHD.filter(item => Number(item.hdStatus) === 0).length
              // 初始化当前整改率
              this.curSelectHDRectPercentSum = 0
              if (this.curSelectHDMajorSum.length > 0 || this.curSelectHDGenSum.length > 0) {
                this.curSelectHDRectPercentSum = ((this.curSelectHDGenSum.length + this.curSelectHDMajorSum - this.curSelectHDNorectSum / (this.curSelectHDMajorSum + this.curSelectHDGenSum)) * 100).toFixed(0)
                if (isNaN(this.curSelectHDRectPercentSum)) {
                  this.curSelectHDRectPercentSum = 0
                }
              }
            })
            // 请求安全检查
            await getRiskStandingBook(maskarr.coms[j].companyId).then(res => {
              const tempSCCheck = [...res.content]
              this.curSelectSC = []
              for (let i = 0; i < tempSCCheck.length; i++) {
                const getTempArr = this.curSelectSC.filter(item => item.rsbtType === tempSCCheck[i].rsbtType)
                if (getTempArr.length === 0) {
                  this.curSelectSC.push({
                    rsbtType: tempSCCheck[i].rsbtType,
                    isShow: false,
                    items: [tempSCCheck[i]]
                  })
                } else {
                  // rsbInspectContent
                  getTempArr[0].items.push(tempSCCheck[i])
                }
              }
            })
            // 显示弹窗
            this.isShowEnterInfo = true
          })
          maskarr.markers.push(marker)
        }
        this.regionmarkers.push(maskarr)
      }
    },
    // 初始化地图
    async initMap() {
      this.AMap = window.AMap || {}
      // 卫星图层赋值
      this.satellitelayer = new this.AMap.TileLayer.Satellite()
      // 常规图层赋值
      this.TileLayer = new this.AMap.TileLayer()
      // 隐藏常规地图
      this.TileLayer.hide()
      // 初始化地图变量
      this.map = new this.AMap.Map('container', {
        /* 地图样式 */
        mapStyle: 'amap://style/normal',
        layers: [
          this.TileLayer,
          // 高德地图默认标准图层
          this.satellitelayer
        ],
        /* 天空盒颜色 */
        skyColor: 'red',
        resizeEnable: true,
        rotateEnable: true,
        pitchEnable: true,
        zoom: 10, // 缩放级别数值太低，则不会显示3D模型
        pitch: 0, // 地图俯仰角度，有效范围0° - 83°
        buildingAnimation: true, // 楼块出现是否带动画
        showBuildingBlock: true, // 显示建筑模型
        expandZoomRange: true,
        zooms: [3, 20],
        center: [122.36, 37.21]
      })
      // this.map.on('click', () => {
      //   console.log('出来了吗')
      //   // // 隐藏 弹出层
      //   // this.activeRiskHDIndex = 0
      //   // // 隐藏风险隐患对应的 企业
      //   // this.isShowRiskHDEnterList = false
      //   // // 隐藏企业信息弹窗
      //   // this.isShowEnterInfo = false
      // })
      // document.querySelector('#filterclick').addEventListener('click', ()=>{
      //   // this.activeRiskHDIndex = 0
      //   // this.isShowRiskHDEnterList = false
      //   // this.riskhdIndusIndex = -1
      //   // this.isShowEnterInfo = false
      // })
      // document.querySelector('canvas').addEventListener('click', () => {
      //   console.log('hello world hello world')
      // })
      this.map.on('complete', () => {
        // if (document.querySelector('canvas')) {
        //   document.querySelector('canvas').addEventListener('click', (event) => {
        //     // console.log(event, 'ehehehehhehehehehehhehehehehehehh')
        //     this.activeRiskHDIndex = 0
        //     this.isShowRiskHDEnterList = false
        //     this.riskhdIndusIndex = -1
        //     this.isShowEnterInfo = false
        //   })
        // }
        if (document.querySelector('#container')) {
          document.querySelector('#container').addEventListener('click', (event) => {
            this.activeRiskHDIndex = 0
            this.isShowRiskHDEnterList = false
            this.riskhdIndusIndex = -1
            // 关闭左边三个卡片
            this.isShowEnterInfo = false
            // 关闭风险详情子项
            // this.isShowRiskDetailItem = false
            // 关闭安全检查子项
            // this.isShowSCItem = false
            // 关机隐患检查项
            // this.isShowHDCheckItem = false
            // 将地图上所有的 marker 变暗
            for (let i = 0; i < this.emergencyIndustryNames.length; i++) {
              if (!this.emergencyIndustryNames[i].isShow) {
                continue
              }
              for (let j = 0; j < this.emergencyIndustryNames[i].indusmarkers.length; j++) {
                this.emergencyIndustryNames[i].indusmarkers[j].setContent(this.getContent(this.emergencyIndustryNames[i].coms[j].companyRiskLevel, this.emergencyIndustryNames[i].coms[j].companyHdLevel, this.emergencyIndustryNames[i].coms[j].companyOvertimeExist))
              }
            }
          })
        }
      })
      // 画威海轮廓
      this.boundWeihai()
    },
    changeSixSums(region, isAdd) {
      if (isAdd) {
        getRiskRegionEnterSum(region, '低风险').then(res => {
          this.lowRiskAllDegrees += Number(res)
        })
        getRiskRegionEnterSum(region, '一般风险').then(res => {
          this.generalRiskAllDegrees += Number(res)
        })
        getRiskRegionEnterSum(region, '较大风险').then(res => {
          this.greaterRiskAllDegrees += Number(res)
        })
        getRiskRegionEnterSum(region, '重大风险').then(res => {
          this.majorRiskAllDegrees += Number(res)
        })
        getHDRigionEnterSum(region, '一般隐患').then(res => {
          this.generalHDDegrees += Number(res)
        })
        getHDRigionEnterSum(region, '重大隐患').then(res => {
          this.majorHDDegrees += Number(res)
        })
      } else {
        getRiskRegionEnterSum(region, '低风险').then(res => {
          this.lowRiskAllDegrees -= Number(res)
        })
        getRiskRegionEnterSum(region, '一般风险').then(res => {
          this.generalRiskAllDegrees -= Number(res)
        })
        getRiskRegionEnterSum(region, '较大风险').then(res => {
          this.greaterRiskAllDegrees -= Number(res)
        })
        getRiskRegionEnterSum(region, '重大风险').then(res => {
          this.majorRiskAllDegrees -= Number(res)
        })
        getHDRigionEnterSum(region, '一般隐患').then(res => {
          this.generalHDDegrees -= Number(res)
        })
        getHDRigionEnterSum(region, '重大隐患').then(res => {
          this.majorHDDegrees -= Number(res)
        })
      }
    },
    // 点击区域
    hideorshowmarker(index) {
      if (this.regionmarkers[index].isShow === false) {
        this.regionmarkers[index].isShow = true
        // 改变风险数量
        this.changeSixSums(this.regionmarkers[index].county, true)
        // 把所有的marker加到行业上
        // 把所有的数量加上
        if (this.regionmarkers[index].coms) {
          for (let i = 0; i < this.regionmarkers[index].coms.length; i++) {
            const temporaryArray = this.emergencyIndustryNames.filter(item => item.name === this.regionmarkers[index].coms[i].companyIndustryName)
            if (temporaryArray && temporaryArray.length > 0) {
              temporaryArray[0].sum++
              temporaryArray[0].indusmarkers.push(this.regionmarkers[index].markers[i])
              temporaryArray[0].coms.push(this.regionmarkers[index].coms[i])
              if (temporaryArray[0].isShow && this.isShowEmergencyOrNation) {
                this.map.add(this.regionmarkers[index].markers[i])
              }
            }
          }
          for (let i = 0; i < this.regionmarkers[index].coms.length; i++) {
            const temporaryArray = this.nationIndustryNames.filter(item => item.name === this.regionmarkers[index].coms[i].companyDimTwoIndustryName)
            if (temporaryArray && temporaryArray.length > 0) {
              temporaryArray[0].sum++
              temporaryArray[0].indusmarkers.push(this.regionmarkers[index].markers[i])
              temporaryArray[0].coms.push(this.regionmarkers[index].coms[i])
              if (temporaryArray[0].isShow && !this.isShowEmergencyOrNation) {
                this.map.add(this.regionmarkers[index].markers[i])
              }
            }
          }
        }
      } else {
        this.changeSixSums(this.regionmarkers[index].county, false)
        this.regionmarkers[index].isShow = false
        if (this.regionmarkers[index].coms) {
          for (let i = 0; i < this.regionmarkers[index].coms.length; i++) {
            const temporaryArray = this.emergencyIndustryNames.filter(item => item.name === this.regionmarkers[index].coms[i].companyIndustryName)
            if (temporaryArray && temporaryArray.length > 0) {
              temporaryArray[0].sum--
              const temporyIndex = temporaryArray[0].indusmarkers.indexOf(this.regionmarkers[index].markers[i])
              const curMarkers = this.map.getAllOverlays('marker')
              if (curMarkers.includes(temporaryArray[0].indusmarkers[temporyIndex])) {
                this.map.remove(temporaryArray[0].indusmarkers[temporyIndex])
              }
              temporaryArray[0].indusmarkers.splice(temporyIndex, 1)
              temporaryArray[0].coms.splice(temporyIndex, 1)
            }
          }
          for (let i = 0; i < this.regionmarkers[index].coms.length; i++) {
            const temporaryArray = this.nationIndustryNames.filter(item => item.name === this.regionmarkers[index].coms[i].companyDimTwoIndustryName)
            if (temporaryArray && temporaryArray.length > 0) {
              temporaryArray[0].sum--
              const temporyIndex = temporaryArray[0].indusmarkers.indexOf(this.regionmarkers[index].markers[i])
              const curMarkers = this.map.getAllOverlays('marker')
              if (curMarkers.includes(temporaryArray[0].indusmarkers[temporyIndex])) {
                this.map.remove(temporaryArray[0].indusmarkers[temporyIndex])
              }
              temporaryArray[0].indusmarkers.splice(temporyIndex, 1)
              temporaryArray[0].coms.splice(temporaryArray, 1)
            }
          }
        }
      }
    },
    // 点击应急行业
    hideorshowindusMarkers(index) {
      if (this.emergencyIndustryNames[index].isShow === false) {
        this.emergencyIndustryNames[index].isShow = true
        if (this.emergencyIndustryNames[index].indusmarkers) {
          for (let i = 0; i < this.emergencyIndustryNames[index].indusmarkers.length; i++) {
            this.map.add(this.emergencyIndustryNames[index].indusmarkers[i])
          }
        }
      } else {
        this.emergencyIndustryNames[index].isShow = false
        if (this.emergencyIndustryNames[index].indusmarkers) {
          for (let i = 0; i < this.emergencyIndustryNames[index].indusmarkers.length; i++) {
            this.map.remove(this.emergencyIndustryNames[index].indusmarkers[i])
          }
        }
      }
    },
    // 点击国民经济行业
    hideorshownationMarker(index) {
      if (this.nationIndustryNames[index].isShow === false) {
        this.nationIndustryNames[index].isShow = true
        if (this.nationIndustryNames[index].indusmarkers) {
          for (let i = 0; i < this.nationIndustryNames[index].indusmarkers.length; i++) {
            this.map.add(this.nationIndustryNames[index].indusmarkers[i])
          }
        }
      } else {
        this.nationIndustryNames[index].isShow = false
        if (this.nationIndustryNames[index].indusmarkers) {
          for (let i = 0; i < this.nationIndustryNames[index].indusmarkers.length; i++) {
            this.map.remove(this.nationIndustryNames[index].indusmarkers[i])
          }
        }
      }
    },
    // 将地图上某一风险或隐患等级的 marker 变亮
    lighterRiskOrHDMarker(levelName, isRisk) {
      // 先把地图上所有的 marker 变暗
      for (let i = 0; i < this.emergencyIndustryNames.length; i++) {
        if (!this.emergencyIndustryNames[i].isShow) {
          continue
        }
        for (let j = 0; j < this.emergencyIndustryNames[i].indusmarkers.length; j++) {
          this.emergencyIndustryNames[i].indusmarkers[j].setContent(this.getContent(this.emergencyIndustryNames[i].coms[j].companyRiskLevel, this.emergencyIndustryNames[i].coms[j].companyHdLevel, this.emergencyIndustryNames[i].coms[j].companyOvertimeExist))
        }
      }
      // 然后把选中的 marker 变亮
      for (let i = 0; i < this.emergencyIndustryNames.length; i++) {
        if (!this.emergencyIndustryNames[i].isShow) {
          continue
        }
        for (let j = 0; j < this.emergencyIndustryNames[i].indusmarkers.length; j++) {
          if (isRisk) {
            if (this.emergencyIndustryNames[i].coms[j].companyRiskLevel === levelName) {
              this.emergencyIndustryNames[i].indusmarkers[j].setContent(this.getContentLighter(this.emergencyIndustryNames[i].coms[j].companyRiskLevel, this.emergencyIndustryNames[i].coms[j].companyHdLevel, this.emergencyIndustryNames[i].coms[j].companyOvertimeExist))
            }
          } else {
            if (this.emergencyIndustryNames[i].coms[j].companyHdLevel === levelName) {
              this.emergencyIndustryNames[i].indusmarkers[j].setContent(this.getContentLighter(this.emergencyIndustryNames[i].coms[j].companyRiskLevel, this.emergencyIndustryNames[i].coms[j].companyHdLevel, this.emergencyIndustryNames[i].coms[j].companyOvertimeExist))
            }
          }
        }
      }
    },
    // 点击重大风险事件
    majorRiskClick() {
      // 获取当前所有行业
      // 获取当前所有企业
      this.activeRiskHDIndex = 1
      this.majorRiskIndus = []
      this.riskhdIndusIndex = -1
      this.isShowRiskHDEnterList = false
      for (let i = 0; i < this.emergencyIndustryNames.length; i++) {
        if (!this.emergencyIndustryNames[i].isShow) {
          continue
        }
        let isWorthToAdd = false
        if (this.emergencyIndustryNames[i].coms.filter(item => item.companyRiskLevel === '重大风险').length > 0) {
          isWorthToAdd = true
        }
        if (isWorthToAdd) {
          this.majorRiskIndus.push({
            indus: this.emergencyIndustryNames[i].name,
            coms: [...this.emergencyIndustryNames[i].coms.filter(item => item.companyRiskLevel === '重大风险')]
          })
        }
      }
      this.lighterRiskOrHDMarker('重大风险', true)
    },
    // 点击较大风险事件
    greaterRiskClick() {
      // 获取当前所有行业
      // 获取当前所有企业
      this.activeRiskHDIndex = 2
      this.greaterRiskIndus = []
      this.riskhdIndusIndex = -1
      this.isShowRiskHDEnterList = false
      for (let i = 0; i < this.emergencyIndustryNames.length; i++) {
        if (!this.emergencyIndustryNames[i].isShow) {
          continue
        }
        let isWorthToAdd = false
        if (this.emergencyIndustryNames[i].coms.filter(item => item.companyRiskLevel === '较大风险').length > 0) {
          isWorthToAdd = true
        }
        if (isWorthToAdd) {
          this.greaterRiskIndus.push({
            indus: this.emergencyIndustryNames[i].name,
            coms: [...this.emergencyIndustryNames[i].coms.filter(item => item.companyRiskLevel === '较大风险')]
          })
        }
      }
      this.lighterRiskOrHDMarker('较大风险', true)
    },
    // 点击一般风险
    generalRiskClick() {
      // 获取当前所有行业
      // 获取当前所有企业
      this.activeRiskHDIndex = 3
      this.generalRiskIndus = []
      this.riskhdIndusIndex = -1
      this.isShowRiskHDEnterList = false
      for (let i = 0; i < this.emergencyIndustryNames.length; i++) {
        if (!this.emergencyIndustryNames[i].isShow) {
          continue
        }
        let isWorthToAdd = false
        if (this.emergencyIndustryNames[i].coms.filter(item => item.companyRiskLevel === '一般风险').length > 0) {
          isWorthToAdd = true
        }
        if (isWorthToAdd) {
          this.generalRiskIndus.push({
            indus: this.emergencyIndustryNames[i].name,
            coms: [...this.emergencyIndustryNames[i].coms.filter(item => item.companyRiskLevel === '一般风险')]
          })
        }
      }
      this.lighterRiskOrHDMarker('一般风险', true)
    },
    // 点击低风险
    lowRiskClick() {
      // 获取当前所有行业
      // 获取当前所有企业
      this.activeRiskHDIndex = 4
      this.lowRiskIndus = []
      this.riskhdIndusIndex = -1
      this.isShowRiskHDEnterList = false
      for (let i = 0; i < this.emergencyIndustryNames.length; i++) {
        if (!this.emergencyIndustryNames[i].isShow) {
          continue
        }
        let isWorthToAdd = false
        if (this.emergencyIndustryNames[i].coms.filter(item => item.companyRiskLevel === '低风险').length > 0) {
          isWorthToAdd = true
        }
        if (isWorthToAdd) {
          this.lowRiskIndus.push({
            indus: this.emergencyIndustryNames[i].name,
            coms: [...this.emergencyIndustryNames[i].coms.filter(item => item.companyRiskLevel === '低风险')]
          })
        }
      }
      this.lighterRiskOrHDMarker('低风险', true)
    },
    // 点击重大隐患
    majorHDClick() {
      // 获取当前所有行业
      // 获取当前所有企业
      this.activeRiskHDIndex = 5
      this.majorHDIndus = []
      this.riskhdIndusIndex = -1
      this.isShowRiskHDEnterList = false
      for (let i = 0; i < this.emergencyIndustryNames.length; i++) {
        if (!this.emergencyIndustryNames[i].isShow) {
          continue
        }
        let isWorthToAdd = false
        if (this.emergencyIndustryNames[i].coms.filter(item => item.companyHdLevel === '重大隐患').length > 0) {
          isWorthToAdd = true
        }
        if (isWorthToAdd) {
          this.majorHDIndus.push({
            indus: this.emergencyIndustryNames[i].name,
            coms: [...this.emergencyIndustryNames[i].coms.filter(item => item.companyHdLevel === '重大隐患')]
          })
        }
      }
      this.lighterRiskOrHDMarker('重大隐患', false)
    },
    // 点击一般隐患
    generalHDClick() {
      // 获取当前所有行业
      // 获取当前所有企业
      this.activeRiskHDIndex = 6
      this.generalHDIndus = []
      this.riskhdIndusIndex = -1
      this.isShowRiskHDEnterList = false
      for (let i = 0; i < this.emergencyIndustryNames.length; i++) {
        if (!this.emergencyIndustryNames[i].isShow) {
          continue
        }
        let isWorthToAdd = false
        if (this.emergencyIndustryNames[i].coms.filter(item => item.companyHdLevel === '一般隐患').length > 0) {
          isWorthToAdd = true
        }
        if (isWorthToAdd) {
          this.generalHDIndus.push({
            indus: this.emergencyIndustryNames[i].name,
            coms: [...this.emergencyIndustryNames[i].coms.filter(item => item.companyHdLevel === '一般隐患')]
          })
        }
      }
      this.lighterRiskOrHDMarker('一般隐患', false)
    },
    // 显示当前选中行业
    showCurHDRiskEnter(coms, index) {
      this.riskhdEnter = [...coms]
      this.isShowRiskHDEnterList = true
      // 设置 index 控制文字颜色
      this.riskhdIndusIndex = index
    },
    // 显示风险详情子项
    showRiskItem(item) {
      this.curSelectRiskDetail = item
      this.isShowRiskDetailItem = true
    },
    // 显示隐患详情子项
    async showHDItem(item) {
      // 这里是不是要根据隐患id 来获取图片
      this.curSelectHDDetail = item
      await getHideDangerBychIds(this.curSelectEnter.companyId, item.hdId).then(res => {
        this.curSelectHDDetail = { ...res.content[0] }
      })
      this.isShowHDCheckItem = true
    },
    // 去安全检查链接
    toSTLink() {
      window.open('https://www.hongyupeixun.com/')
    },
    // 点击企业将地图中心传给企业
    mapToEnterPos(item) {
      const AMap = window.AMap || {}
      // setZoom(level:Number)
      // setCenter(position:LngLat)
      this.map.setZoom(16)
      this.map.setCenter(new AMap.LngLat(Number(item.companyLng), Number(item.companyLat)))
    },
    // 视频播放
    // 视频播放
    videoPlayer() {
      var that = this
      var appKey = '90174687eb6c4d4184a38940d5117382'
      var appSecret = '734efd3233ce3e6d3e087d093be84924'
      var filename = '6.live'
      var devNumber = '797723880'
      var idName = 'ysOpenDevice'
      var accessToken = this.getAccessToken(appKey, appSecret)
      if (accessToken == null) {
        alert(null)
      } else {
        add2Display(idName, filename, devNumber, accessToken)
      }

      function add2Display(idName, filename, devNumber, accessToken) {
        if (accessToken == null) return
        var html = '<iframe  src="https://open.ys7.com/ezopen/h5/iframe_se?url=ezopen://open.ys7.com/' +
            devNumber + '/' + filename + '&autoplay=1&audio=1&accessToken=' + accessToken + '&templete=2" id="' + idName + '" width="100%" height="255" frameborder="no" border="0" allowfullscreen> </iframe>'

        var video3 = that.$el.querySelector('#video3')

        video3.innerHTML = html

        var iframeEl = video3.firstElementChild

        // var player = iframeEl.contentWindow;

        // $("#iframebody").append(html);
        // var player = document.getElementById(idName).contentWindow;
        /* iframe 支持方法 */
        // player.postMessage("play", "https://open.ys7.com/ezopen/h5/iframe") /* 播放 */
        // player.postMessage("stop", "https://open.ys7.com/ezopen/h5/iframe") /* 结束 */
        // player.postMessage("capturePicture", "https://open.ys7.com/ezopen/h5/iframe") /* 截图 */
        // player.postMessage("openSound", "https://open.ys7.com/ezopen/h5/iframe") /* 开启声音 */
        // player.postMessage("closeSound", "https://open.ys7.com/ezopen/h5/iframe") /* 关闭声音 */
        // player.postMessage("startSave", "https://open.ys7.com/ezopen/h5/iframe") /* 开始录制 */
        // player.postMessage("stopSave", "https://open.ys7.com/ezopen/h5/iframe") /* 结束录制 */
      }
    },
    getAccessToken(appKey, appSecret) {
      var rs = this.getVideoParam(appKey, appSecret)
      var html = JSON.stringify(rs)
      if (rs['code'] == '200') {
        return rs['data']['accessToken']
      }
      return null
    },
    getIframeText(idName, filename, devNumber, accessToken) {
      return '<iframe  src="https://open.ys7.com/ezopen/h5/iframe_se?url=ezopen://open.ys7.com/' +
			devNumber + '/' + filename + '&autoplay=1&audio=1&accessToken=' + accessToken + '&templete=2" id="' + idName + '" width="100%" height="100%" frameborder="no" border="0" allowfullscreen> </iframe>'
    },

    showVideo() {
      var appKey = '90174687eb6c4d4184a38940d5117382'
      var appSecret = '734efd3233ce3e6d3e087d093be84924'
      var filename = '6.live'
      var devNumber = '797723880'
      var idName = 'ysOpenDevice'
      var accessToken = this.getAccessToken(appKey, appSecret)
      var iframeText = this.getIframeText(idName, filename, devNumber, accessToken)

      this.isShowVideo = true

      this.videoEl.innerHTML = iframeText

      var iframeEl = this.videoEl.firstElementChild
    },
    hideVideo() {
      this.videoEl.innerHTML = ''

      this.isShowVideo = false
    },
    getVideoParam(appKey, appSecret) {
      var dataJson = {}
      dataJson['appKey'] = appKey
      dataJson['appSecret'] = appSecret
      var url = 'https://open.ys7.com/api/lapp/token/get'

      return {
        code: '200',
        data: {
          accessToken: 'at.2kw88yv9dq1w6inp9cqbdn8l8xotnwuj-2h70ukos81-0tcfqem-a9bpvafyi',
          expireTime: 1629179646177
        },
        msg: '操作成功!'
      }

      /* getPlayParam(dataJson).then((res) => {
        console.log('then ________________ ', res);
      }).catch(function(error) {
        console.log('catch ________________ ', error);

      }); */

      /* return request({
        url: 'work/projects',
        method: 'POST',
        data:data,
      }).then((res) => {
        return res
      }) */

      return
      var reJson
      // $.ajax({
      //   type: 'POST',
      //   url: url,
      //   data: dataJson,
      //   dataType: 'json',
      //   async: false,
      //   cache: false,
      //   success: function(data) {
      //     reJson = data
      //   },
      //   error: function(data) {
      //     reJson = data
      //   }
      // })
      // return reJson
    },
    showVideoWindow() {

    }
  }
}
</script>

<style lang="scss">
  @font-face {
    font-family: 'diget degree';
    src: url('../assets/fonts/DS-DIGIB-2.ttf')
  }
  @font-face {
    font-family: 'diget year';
    src: url('../assets/fonts/DS-DIGIT-4.ttf')
  }
  @font-face {
    font-family: 'Source Han Sans CN';
    src: url('../assets/fonts/SourceHanSansCN-Medium.otf');
  }
  #el-main-footer {
    display: none!important;;
  }
  .home {
    width: 100%;
    height: 100%;
    background-image: url('../assets/home/bg1.png');
    box-sizing: border-box;
    position: relative;
    user-select: none;
    .head-wrapper {
      position: relative;
      transform: translateY(10%);
      width: 100%;
      height: 8%;
      background-image: url('../assets/home/head1.png');
      background-position: center;
      box-sizing: border-box;
      .maps-wrapper {
        margin-left: 14px;
        position: absolute;
        left: 0%;
        right: 72%;
        top: 0;
        bottom: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        font-size: 22px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #A1CFFF;
        white-space: nowrap;
        .urgent {
          margin: 0 10px;
          height: 100%;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          &.active {
            background-image: url('../assets/home/light.png');
            color: #05f9fb;
          }
          &:hover {
            background-image: url('../assets/home/light.png');
            color: #05f9fb;
          }
        }
        .envpro {
          margin: 0 10px;
          height: 100%;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          &.active {
            background-image: url('../assets/home/light.png');
            color: #05f9fb;
          }
          &:hover {
            background-image: url('../assets/home/light.png');
            color: #05f9fb;
          }
        }
        .occupational {
          margin: 0 10px;
          height: 100%;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          &.active {
            background-image: url('../assets/home/light.png');
            color: #05f9fb;
          }
          &.hover {
            background-image: url('../assets/home/light.png');
            color: #05f9fb;
          }
        }
      }
      .hd-wrapper {
        position: absolute;
        right: 17%;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #A1CFFF;
        font-size: 22px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        white-space: nowrap;
        background-size: 100% 100%;
        &:hover {
          background-image: url('../assets/home/light.png');
          color: #05f9fb;
        }
        &.active {
          background-image: url('../assets/home/light.png');
          color: #05f9fb;
        }
        .hidedanger {
          height: 100%;
          display: flex;
          align-items: center;
        }
      }
      .title {
        position: absolute;
        overflow: visible;
        z-index: -1
      }
      .backstage-wrapper {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 18px;
        color: #ddd;
        display: flex;
        align-items: center;
        margin-right: 10px;
        .backstage {
          border: 1px solid #ddd;
          border-radius: 4px;
          padding: 6px 12px;
          font-size: 12px;
          cursor: pointer;
        }
      }
      .run-time-wrapper {
        position: absolute;
        top: 0;
        right: 14px;
        font-family: 'diget degree';
        font-size: 18px;
        color: #0FFFFF;
        .toscale {
          transform: scale(0.8);
        }
      }
    }
    .container-wrapper {
      height: 92%;
      width: 100%;
      position: absolute;
      box-sizing: border-box;
      .map-wrapper {
        width: 100%;
        height: 100%;
        position: relative;
        #container {
          width: 100%;
          height: 100%;
        }
        .satelliteorgis-wrapper {
          position: absolute;
          bottom: 18px;
          /* left: 18px; */
          right: 260px;
          width: 240px;
          height: 60px;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
          background-image: url('../assets/home/bgframe.png');
          background-size: 100% 100%;
          .regularmapstyle {
            width: 100px;
            height: 35px;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            color: #0FFFFF;
            font-size: 14px;
            font-weight: 600;
            padding-left: 33px;
            background-image: url('../assets/home/lbclose.png');
            &.active {
              background-image: url('../assets/home/lbopen.png');
            }
          }
          .satellitemapstyle {
            width: 100px;
            height: 35px;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            color: #0FFFFF;
            font-size: 14px;
            font-weight: 600;
            padding-left: 33px;
            background-image: url('../assets/home/lbclose.png');
            &.active {
              background-image: url('../assets/home/lbopen.png');
            }
          }
          .hidedanger-identification {
            width: 90px;
            height: 35px;
            display: flex;
            flex-direction: row;
            align-items: center;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #00FFFF;
            .hd-block {
              width: 31px;
              height: 31px;
              border: 1px solid #0FFFFF;
              border-radius: 3px;
              position: relative;
              transform: scale(0.7);
              &.active {
                background-image: url('../assets/home/radiochosen.png');
                border: 0px solid rgba(0, 0, 0, 0)
              }
            }
          }
        }
        .check-indus-enter-wrapper {
          position: absolute;
          right: 640px;
          bottom: 35px;
          width: 777px;
          height: 105px;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;
          text-align: center;
          .majorrisk-indus-enter-wrapper {
            width: 95px;
            height: 120px;
            background-image: url('../assets/home/suibianxie34.png');
            background-position: -2px 35px;
            background-repeat: no-repeat;
            background-size: 105px 104px;
            opacity: 0.8;
            &.active {
              /* background-image: url('../assets/home/risk13.png') */
              opacity: 1.0;
            }
            .majorrisk-indus-enter-degrees {
              font-size: 24px;
              font-family: 'PingFang SC';
              font-weight: bold;
              color: #F80303;
            }
            .majorrisk-indus-enter-title {
              font-size: 14px;
              font-family: 'Source Han Sans CN';
              font-weight: 400;
              color: #FFFFFF;
            }
          }
          .greaterrisk-indus-enter-wrapper {
            width: 95px;
            height: 120px;
            background-image: url('../assets/home/suibian39.png');
            background-position: -2px 35px;
            background-repeat: no-repeat;
            background-size: 105px 104px;
            opacity: 0.8;
            &.active {
              opacity: 1.0;
            }
            .greaterrisk-indus-enter-degrees {
              font-size: 24px;
              font-family: 'PingFang SC';
              font-weight: bold;
              color: #FF8839;
            }
            .greaterrisk-indus-enter-title {
              font-size: 14px;
              font-family: 'Source Han Sans CN';
              font-weight: 400;
              color: #FFFFFF;
            }
          }
          .generalrisk-indus-enter-wrapper {
            width: 95px;
            height: 120px;
            background-image: url('../assets/home/suibian37.png');
            background-position: -2px 35px;
            background-repeat: no-repeat;
            background-size: 105px 104px;
            opacity: 0.8;
            &.active {
              opacity: 1.0;
            }
            .generalrisk-indus-enter-degrees {
              font-size: 24px;
              font-family: 'PingFang SC';
              font-weight: bold;
              color: #F2FB05;
            }
            .generalrisk-indus-enter-title {
              font-size: 14px;
              font-family: 'Source Han Sans CN';
              font-weight: 400;
              color: #FFFFFF;
            }
          }
          .lowrisk-indus-enter-wrapper {
            width: 95px;
            height: 120px;
            background-image: url('../assets/home/suibian38.png');
            background-position: -2px 35px;
            background-repeat: no-repeat;
            background-size: 105px 104px;
            opacity: 0.8;
            &.active {
              opacity: 1.0;
            }
            .lowrisk-indus-enter-degrees {
              font-size: 24px;
              font-family: 'PingFang SC' ;
              font-weight: bold;
              color: #30B4FF;
            }
            .lowrisk-indus-enter-title {
              font-size: 14px;
              font-family: 'Source Han Sans CN';
              font-weight: 400;
              color: #FFFFFF;
            }
          }
          .majorhd-indus-enter-wrapper {
            width: 95px;
            height: 120px;
            background-image: url('../assets/home/suibian36.png');
            background-position: -2px 35px;
            background-repeat: no-repeat;
            background-size: 105px 104px;
            opacity: 0.8;
            &.active {
              opacity: 1.0;
            }
            .majorhd-indus-enter-degrees {
              font-size: 24px;
              font-family: 'PingFang SC';
              font-weight: bold;
              color: #FD6103;
            }
            .majorhd-indus-enter-title {
              font-size: 14px;
              font-family: 'Source Han Sans CN';
              font-weight: 400;
              color: #FFFFFF;
            }
          }
          .generalhd-indus-enter-wrapper {
            width: 95px;
            height: 120px;
            background-image: url('../assets/home/suibian41.png');
            background-position: -2px 35px;
            background-repeat: no-repeat;
            background-size: 105px 104px;
            opacity: 0.8;
            &.active {
              opacity: 1.0;
            }
            .generalhd-indus-enter-degrees {
              font-size: 24px;
              font-family: 'PingFang SC';
              font-weight: bold;
              color: #FEFB08;
            }
            .generalhd-indus-enter-title {
              font-size: 14px;
              font-family: 'Source Han Sans CN';
              font-weight: 400;
              color: #FFFFFF;
            }
          }
        }
        .check-indus-enter-indus-wrapper {
          position: absolute;
          right: 640px;
          bottom: 135px;
          width: 777px;
          height: 170px;
          background-image: url('../assets/home/indusenter1.png');
          .indus-type-list-wrapper {
            width: 139px;
            height: 34px;
            border: 1px solid #23FFFC;
            background: linear-gradient(90deg, #11D2CB 0%, rgba(11, 168, 154, 0) 100%);
            margin-top: 8px;
            margin-left: 15px;
            padding-left: 24px;
            background-image: url('../assets/home/rectcopy.png');
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-family: 'Source Han Sans CN';
            font-weight: bold;
            color: #DFEEF3;
            line-height: 36px;
          }
          .check-indus-enter-indus-item-wrapper {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            .check-indus-enter-indus-item {
              margin: 0 10px;
              padding: 10px;
              font-weight: 500;
              font-size: 18px;
              font-family: PingFang-SC-Medium;
              color: #00C9FD;
              &.active {
                color: red;
              }
            }
          }
        }
        .check-indus-enter-enter-wrapper {
          position: absolute;
          right: 640px;
          bottom: 305px;
          width: 777px;
          height: 170px;
          background-image: url('../assets/home/indusenter2.png');
          overflow: hidden;
          .check-indus-enter-enter-tools-wrapper {
            margin-top: 15px;
            display: flex;
            align-items: center;
            margin-top: 8px;
            .check-indus-enter-enter-list-wrapper {
              width: 139px;
              height: 34px;
              border: 1px solid #23FFFC;
              background: linear-gradient(90deg, #11D2CB 0%, rgba(11, 168, 154, 0) 100%);
              margin-left: 15px;
              padding-left: 24px;
              background-image: url('../assets/home/rectcopy.png');
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 16px;
              font-family: 'Source Han Sans CN';
              font-weight: bold;
              color: #DFEEF3;
              line-height: 36px;
            }
            .check-indus-enter-enter-search-wrapper {
              display: flex;
              flex-direction: row;
              border: 1px solid #23FFFC;
              border-radius: 5px;
              padding: 5px;
              margin-left: 8px;
              .check-indus-enter-enter-search-icon-place {
                width: 20px;
                height: 20px;
                background-image: url('../assets/home/search.png');
                background-repeat: no-repeat;
              }
              .check-indus-enter-enter-search {
                margin-left: 10px;
                color: white;
                &:empty {
                  &:after {
                    content: '请输入企业名称:';
                    color: #eee;
                  }
                }
              }
            }
          }
          .check-indus-enter-enter-item-wrapper {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            overflow: hidden;
            .check-indus-enter-enter-item {
              margin: 0 10px;
              padding: 10px;
              font-weight: 500;
              font-size: 18px;
              font-family: PingFang-SC-Medium;
              color: #00C9FD
            }
          }
        }
        .supervise-wrapper {
          position: absolute;
          top: 5%;
          bottom: 60%;
          right: 70%;
          left: 18px;
          display: flex;
          flex-direction: column;
          background-image: url('../assets/home/lefttop.png');
          background-size: 100% 100%;
          .supervise-title-wrapper {
            flex: 0 0 12%;
            .supervise-title {
              position: relative;
              left: 5%;
              top: 30%;
              font-size: 20px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              color: #00FFFF;
              background: linear-gradient(0deg, #3FFFEA 23.583984375%, #007EFF 100%);
              background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
          .supervise-content-wrapper {
            flex: 0 0 88%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            position: relative;
            left: 2%;
            .enter-degree-wrapper {
              flex: 0 0 30%;
              display: flex;
              flex-direction: row;
              align-items: center;
              .enter-degree-icon1 {
                width: 52px;
                height: 53px;
                background-image: url('../assets/home/1.png');
                background-position: center;
                transform: scale(0.9);
              }
              .enter-degree-icon1 {
                width: 52px;
                height: 53px;
                background-image: url('../assets/home/1.png');
                background-position: center;
                transform: scale(0.9);
              }
              .enter-degree-icon2 {
                width: 52px;
                height: 53px;
                background-image: url('../assets/home/2.png');
                background-position: center;
                transform: scale(0.9);
              }
              .enter-degree-icon3 {
                width: 52px;
                height: 53px;
                background-image: url('../assets/home/3.png');
                background-position: center;
                transform: scale(0.9);
              }
              .enter-degree-icon4 {
                width: 52px;
                height: 53px;
                background-image: url('../assets/home/4.png');
                background-position: center;
                transform: scale(0.9);
              }
              .enter-degree-icon5 {
                width: 52px;
                height: 53px;
                background-image: url('../assets/home/5.png');
                background-position: center;
                transform: scale(0.9);
              }
              .enter-degree-icon6 {
                width: 52px;
                height: 53px;
                background-image: url('../assets/home/6.png');
                background-position: center;
                transform: scale(0.9);
              }
              .enter-degree-icon7 {
                width: 52px;
                height: 53px;
                background-image: url('../assets/home/7.png');
                background-position: center;
                transform: scale(0.9);
              }
              .enter-degree-icon8 {
                width: 52px;
                height: 53px;
                background-image: url('../assets/home/8.png');
                background-position: center;
                transform: scale(0.9);
              }
              .enter-degree-icon9 {
                width: 52px;
                height: 53px;
                background-image: url('../assets/home/9.png');
                background-position: center;
                transform: scale(0.9);
              }
              .enter-degree-icon10 {
                width: 52px;
                height: 53px;
                background-image: url('../assets/home/10.png');
                background-position: center;
                transform: scale(0.9);
              }
              .enter-degree-icon11 {
                width: 52px;
                height: 53px;
                background-image: url('../assets/home/11.png');
                background-position: center;
                transform: scale(0.9) translateX(5px);
              }
              .enter-degree-sum-wrapper1 {
                flex-grow: 1;
                flex-shrink: 0;
                margin-left: 8px;
                position: relative;
                transform: translateX(4px);
                .enter-degree-sum {
                  color: #0FFFFF;
                  font-size: 18px;
                }
                .enter-degree-sum-title {
                  color: #A6F6F9;
                  font-size: 12px;
                  overflow: visible;
                  white-space: nowrap;
                }
              }
              .enter-degree-sum-wrapper {
                flex-grow: 1;
                flex-shrink: 0;
                margin-left: 8px;
                .enter-degree-sum {
                  color: #0FFFFF;
                  font-size: 18px;
                }
                .enter-degree-sum-title {
                  color: #A6F6F9;
                  font-size: 12px;
                  overflow: visible;
                  white-space: nowrap;
                }
              }
            }
          }
        }
        .annual-region-dgsumrank {
          position: absolute;
          top: 45%;
          right: 70%;
          left: 18px;
          bottom: 10%;
          display: flex;
          flex-direction: column;
          background-image: url('../assets/home/leftbottom.png');
          background-size: 100% 100%;
          .annual-region-dgsumrank-title-wrapper {
            flex: 0 0 12%;
            .annual-region-dgsumrank-title {
              position: relative;
              left: 5%;
              top: 30%;
              font-size: 20px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              color: #00FFFF;
              background: linear-gradient(0deg, #3FFFEA 23.583984375%, #007EFF 100%);
              background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
          .annual-region-dgsumrank-content-wrapper {
            flex: 0 0 88%;
          }
        }
        .risk-dg-statistics-wrapper {
          position: absolute;
          top: 6%;
          bottom: 68%;
          right:15%;
          left: 55%;
          display: flex;
          flex-direction: row;
          background-image: url('../assets/home/right.png');
          transition: all ease-in-out .4s;
          &.movetoright {
            left: 67%;
            right: 3%;
          }
          .levels-risk-dg-statistics-wrapper {
            flex: 0 0 45%;
            display: flex;
            flex-direction: column;
            .levels-risk-dg-title-wrapper {
              flex: 0 0 12%;
              .levels-risk-dg-title {
                position: relative;
                left: 10%;
                top: 30%;
                font-size: 20px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #00FFFF;
                background: linear-gradient(0deg, #3FFFEA 23.583984375%, #007EFF 100%);
                background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
            .levels-risk-dg-content-wrapper {
              flex: 0 0 88%;
            }
          }
          .annual-risk-dg-rect-statistics-wrapper {
            flex: 0 0 55%;
            display: flex;
            flex-direction: column;
            .annual-risk-dg-rect-statistics-title-wrapper {
              flex: 0 0 12%;
              .annual-risk-dg-rect-statistics-title {
                position: relative;
                left: 2%;
                top: 30%;
                font-size: 20px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #00FFFF;
                background: linear-gradient(0deg, #3FFFEA 23.583984375%, #007EFF 100%);
                background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
            .annual-risk-dg-rect-tatistics-content-wrapper {
              flex: 0 0 88%;
            }
          }
        }
        .all-region-risk-sum-statistics-wrapper {
          position: absolute;
          top: 34%;
          bottom: 38%;
          right:15%;
          left: 55%;
          display: flex;
          flex-direction: column;
          background-image: url('../assets/home/right.png');
          transition: all ease-in-out .4s;
          &.movetoright {
            left: 67%;
            right: 3%;
          }
          .all-region-risk-sum-statistics-title-wrapper {
            flex: 0 0 12%;
            .all-region-risk-sum-statistics-title {
                position: relative;
                left: 5%;
                top: 30%;
                font-size: 20px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #00FFFF;
                background: linear-gradient(0deg, #3FFFEA 23.583984375%, #007EFF 100%);
                background-clip: text;
                -webkit-text-fill-color: transparent;
            }
          }
          .all-region-risk-sum-statistics-content-wrapper {
            flex: 0 0 88%;
          }
        }
        .hide-danger-sum-statistics-wrapper {
          position: absolute;
          top: 64%;
          bottom: 10%;
          right:15%;
          left: 55%;
          display: flex;
          flex-direction: column;
          background-image: url('../assets/home/right.png');
          transition: all ease-in-out .4s;
          &.movetoright {
            left: 67%;
            right: 3%;
          }
          .hide-danger-sum-statistics-title-wrapper {
            flex: 0 0 12%;
            .hide-danger-sum-statistics-title {
                position: relative;
                left: 5%;
                top: 30%;
                font-size: 20px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #00FFFF;
                background: linear-gradient(0deg, #3FFFEA 23.583984375%, #007EFF 100%);
                background-clip: text;
                -webkit-text-fill-color: transparent;
            }
          }
          .hide-danger-sum-statistics-content-wrapper {
            flex: 0 0 88%;
          }
        }
        .curyear-select-wrapper {
          position: absolute;
          top: 0;
          left: 50%;
          display: flex;
          align-items: center;
          width: 198px;
          height: 36px;
          /* background: #04FFDF; */
          /* opacity: 0.27; */
          background-image: url('../assets/home/curyearbgframe.png');
          background-size: 100% 100%;
          padding: 0 16px;
          transform: translateX(-50%);
          .curyear-wrapper {
            display: flex;
            align-items: center;
            font-family: 'diget year';
            .curyear-title {
              font-size: 17px;
              font-weight: bold;
              color: #00FFEA;
              background: linear-gradient(0deg, #59C8FF 0%, #FAFEFF 100%);
              background-clip: text;
              -webkit-text-fill-color: transparent;
            }
            .curyear-degree {
              margin: 0 6px;
              font-size: 34px;
              font-weight: bold;
              color: #00FFEA;
              text-shadow: 0px 3px 0px #3258A6;
              background: linear-gradient(0deg, #59C8FF 0%, #FAFEFF 100%);
              background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
          .arrow-wrapper {
            display: flex;
            flex-direction: column;
            width: 11px;
            height: 14px;
            /* margin: 10px; */
            /* margin: 0 0 0 10px; */
            .up-arrow-wrapper {
              flex: 0 0 50%;
              background-image: url('../assets/home/yearpullup.png');
              position: relative;
              bottom: 2px;
            }
            .down-arrow-wrapper {
              flex: 0 0 50%;
              background-image: url('../assets/home/yearpulldown.png');
              position: relative;
              top: 2px;
            }
          }
        }
      }
      .selection-wrapper {
        position: fixed;
        right: 0;
        top: 8%;
        bottom: 0%;
        width: 250px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 18px;
        background-color: #030C2A;
        border: 1px solid #14356D;
        transition: all ease-in-out .3s;
        .radio-wrapper {
          flex-shrink: 0;
          flex-grow: 0;
          display: flex;
          flex-direction: row;
          justify-content: center;
          color: #0FFFFF;
          .region-wrapper {
            display: flex;
            flex-direction: row;
            align-items: center;
            position: relative;
            transform: scale(0.9);
            .region-block {
              width: 31px;
              height: 31px;
              border: 1px solid #0FFFFF;
              border-radius: 3px;
              position: relative;
              transform: scale(0.8);
              &.active {
                background-image: url('../assets/home/radiochosen.png');
                border: 0px solid rgba(0, 0, 0, 0);
                position: relative;
                transform: scale(0.8);
              }
            }
            .region-title {
              font-size: 22px;
              font-family: Source Han Sans CN;
              font-weight: bold;
              margin: 0 12px;
            }
          }
          .industry-wrapper {
            display: flex;
            flex-direction: row;
            align-items: center;
            position: relative;
            transform: scale(0.9);
            .indus-kind-wrapper {
              position: absolute;
              left: -45px;
              top: calc(100% + 10px);
              width: 160px;
              height: 74px;
              background-color: #020c39;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              border-radius: 5px;
              text-align: center;
              border: 1px solid #0FFFFF;
              overflow: visible;
              .emergency {
                color: #0FFFFF;
                font-size: 18px;
                /* border: 1px solid red; */
                padding: 4px;
                opacity: 0.6;
                &:hover {
                  background-color: lightgrey;
                }
                &.active {
                  opacity: 0.9;
                  font-weight: 600;
                }
              }
              .nation {
                color: #0FFFFF;
                font-size: 18px;
                /* border: 1px solid red; */
                padding: 4px;
                opacity: 0.6;
                &:hover {
                  background-color: lightgrey;
                }
                &.active {
                  opacity: 0.9;
                  font-weight: 600;
                }
              }
              box-sizing: content-box;
              .trangle {
                position: absolute;
                top: -20px;
                right: 84px;
                box-sizing: content-box;
                width: 0;
                height: 0;
                border-top: 10px solid transparent;
                border-bottom: 10px solid #0FFFFF;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                overflow: visible;
              }
            }
            .induspulldownselect {
              width: 31px;
              height: 31px;
              background: no-repeat url('../assets/home/pulldown.png');
              transform: scale(0.9) translateX(6px);
              background-position: center;
            }
            .industry-title {
              font-size: 22px;
              font-family: Source Han Sans CN;
              font-weight: bold;
              margin: 0 12px;
            }
          }
        }
        .isshowall-wrapper {
          flex-shrink: 0;
          flex-grow: 0;
          display: flex;
          flex-direction: row;
          align-items: center;
          /* padding-left: 30px; */
          padding-left: 14px;
          margin: 24px 0;
          .showall-icon {
            width: 42px;
            height: 42px;
            background-image: url('../assets/home/eyeclose.png');
            &.active {
              background-image: url('../assets/home/eyeopen.png');
            }
            position: relative;
            transform: scale(0.9);
          }
          .showall-title {
            font-size: 20px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #00FFFF;
            margin: 0 12px;
          }
        }
        .wrapper-region {
          /* background-image: url('../assets/home/menuborder.png'); */
          /* background-size: 100% 100%; */
          flex-grow: 1;
          flex-shrink: 1;
          /* overflow-y: scroll; */
          .select-item-wrapper {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            /* background-image: url('../assets/home/regionunchosen.png'); */
            background-size: 100% 100%;
            margin: 0 0 15px 0;
            color: white;
            /* &.active {
              background-image: url('../assets/home/regionchosen.png');
            } */
            .eye-icon {
              width: 42px;
              height: 42px;
              background-image: url('../assets/home/eyeclose.png');
              &.active {
                background-image: url('../assets/home/eyeopen.png');
              }
              position: relative;
              transform: scale(0.9);
            }
            .region-info-wrapper {
              margin-left: 10px;
              width: 170px;
              min-height: 65px;
              /* box-sizing: border-box; */
              border: 1px solid transparent;
              background: rgba(6, 42, 162, 0.2);
              text-align: center;
              display: flex;
              flex-direction: column;
              justify-content: center;
              &.active {
                background: rgba(2, 19, 68, 0.2);
                border: 1px solid #01FFFF;
                box-shadow: inset 0 0 10px #01FFFF;
              }
              .region-enter-title {
                font-size: 18px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #00FFFF;
                padding-bottom: 2px;
              }
              .region-enter-degree-wrapper {
                padding-top: 2px;
                font-size: 20px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #FFAE00;
              }
            }
          }
        }
        .wrapper-region::-webkit-scrollbar {
          display: none;
        }
        .btn-pull {
          position: absolute;
          left: -28px;
          height: 48px;
          width: 28px;
          top: 48%;
          background-color: #030C2A;
          display: flex;
          justify-content: center;
          align-items: center;
          .btn-pull-down {
            display: flex;
            justify-content: center;
            align-items: center;
            transform: scale(0.8);
          }
        }
        &.hide {
          /* opacity: 0; */
          /* width: 0; */
          transform: translateX(250px);
        }
      }
      .icontianhong {
        position: absolute;
        bottom: 2px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #A2B1DB;
        line-height: 11px;
        background: linear-gradient(0deg, #59C8FF 0%, #FAFEFF 100%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
        overflow: visible;
        .iconicc {
          /* background: linear-gradient(0deg, #59C8FF, #FAFEFF); */
          margin: 0 4px;
          font-weight: bolder;
        }
        .iconR {
          position: absolute;
          width: 10px;
          height: 10px;
          background-image: url('../assets/home/iconR.png');
          background-size: 100% 100%;
          left: 98px;
          top: -7px;
        }
      }
    }
  }
  .amap-logo {
    display: none!important;
  }
  .amap-copyright {
    display: none!important;
  }
</style>

<!-- 弹出层部分 -->
<style lang="scss">
	.popup{
    display: none;
		position:absolute;top:8px;left:0;height:0;width:0;z-index:100;
		h3{font-size:20px;font-weight:500;}
		h3, h4, h5, h6, p, dl, dd{margin:0;padding:0;}
		h3, h4{font-family: Source Han Sans CN;}
		.nowrap{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;}
		.type1{
			background:no-repeat center center url('../assets/home/pop-panel1.png');
			background-size:100% 100%;
		}
		.type2{
			background:no-repeat center center url('../assets/home/left3bottom.png');
			background-size:100% 100%;
		}
		.type3{
			background:no-repeat center center url('../assets/home/pop-panel.png');
			background-size:100% 100%;
		}
		.type4{
			background:no-repeat center center url('../assets/home/pop-panel2.png');
			background-size:100% 100%;
			i.close{
				top:5.6%
			}
		}
		.pop-layer{
			position:absolute;/* overflow:hidden; */display:flex;padding:15px 17px;overflow:hidden;

			.in-box{/* border:1px solid green; */flex:1;display:flex;flex-direction:column;width:100%;}

			.title-inbox{
				height:24px;line-height:24px;position:relative;padding-left:27px;
				h3{color:#fff;line-height:24px;}
			}
			.mark:before{content:'';position:absolute;top:0;left:0;height:100%;width:22px;background:no-repeat center center url('../assets/home/star11.png');background-size:18px;}

			.title1{
				position:relative;height:30px;line-height:28px;color:#fff;padding-right:105px;
				h3{padding:0 18px;display:inline-block;background:no-repeat center center url('../assets/home/pop-panel4.png');background-size:100% 100%;font-size:19px;min-width:130px;text-align:center;}
				.flag{position:absolute;top:0;right:0;height:auto;width:100px;font-size:15px;color:#01ACFB;}
				.button2{
					position:absolute;top:0;right:70px;height:100%;padding:0 10px;font-size:15px;color:#D9DB12;background:rgba(152, 153, 43, 0.22);box-shadow:0px 0px 4px 2px rgba(234, 255, 0, 0.3) inset;border-radius:4px;line-height:30px;
				}
			}

			.info1{
				margin:10px 0 10px 30px;color:#00C9FD;font-size:16px;line-height:28px;

				.row1{
					padding:0 110px 0 25px;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;
					&:before{content:'';position:absolute;top:0;left:0;height:100%;width:22px;background:no-repeat center center url('../assets/home/icon_1.png');background-size:15px;}

					span{display:contents;}

					.grade{
						position:absolute;top:0;right:0;height:100%;font-size:0;
            /* width:108px; */
						i{
							font-size:0;display:inline-block;height:100%;width:21px;background:no-repeat center center url('../assets/home/icon_star2.png');;background-size:15px;
              transform: scale(1.3);
						}
					}
				}
				.row2{
					padding:0 110px 0 25px;position:relative;
					&:before{content:'';position:absolute;top:0;left:0;height:100%;width:22px;background:no-repeat center center url('../assets/home/icon_2.png');;background-size:15px;}
				}
			}

			.introduce{
				h4{font-weight:400;color:#FFFFFF;line-height:28px;font-size:15px;}
				p{margin:0;padding:8px 0;text-indent:28px;color:#00C9FD;font-size:16px;line-height:20px;}
			}

			.link1{
				text-align:right;
				a{font-size:17px;color:#00FFFF;}
			}

			.info2{
				height:53px;background:rgba(0, 255, 255, 0.07);box-shadow:0px 0px 8px 0px rgba(0, 252, 255, 0.4) inset;border-radius:8px;padding:8px;margin-top:10px;display:flex;

				>div{flex:1;position:relative;
					&:before{content:'';position:absolute;top:10px;right:0;bottom:10px;width:1px;background-color:#00F6FF;}
				}
				>div:last-child{
					&:before{content:none;}
				}

				.ctn-place{
					height:100%;line-height:1;display:flex;justify-content:center;align-items:center;flex-direction:column;
					p{margin:0 0 2px 0;padding:0;font-size:19px;color:#00F6FF;}
					span{font-size:16px;color:#A6F6F9;}
				}
			}

			.list1{
				position:relative;margin-top:10px;flex:1;
				.ctn-abs{position:absolute;top:0;left:0;height:100%;width:100%;display:flex;flex-direction:column;}
				h4{font-weight:normal;color:#02D9FD;text-align:center;}
				dl{margin-top:5px;height:100%;font-size:16px;overflow-y:auto;line-height:23px;}
				dd{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;}
			}

			.table{
				height:150px;margin-top:10px;

				.scrolling{height:100%;overflow-y:auto;text-align:center;}

				dd, dt{display:grid;grid-template-columns:20% 20% 20% 20% 20%;}
				dd>div, dt>div{margin-right: 5px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;word-wrap: normal;}
				dt{padding: 10px 0;font-size: 16px;color:#02D9FD;font-weight:700;}
				dd{color:#FFFFFF;font-size:16px;line-height:25px;}

				dd i{display:inline-block;height:100%;width:25px;background:no-repeat center center url('../assets/home/icon_3.png');background-size:18px;cursor:pointer;}
			}

			.video{
				height:163px;margin-top:20px;display:flex;justify-content:center;align-items:center;overflow:hidden;
				iframe{}
        i {
          display:inline-block;height:25px;width:25px;background:no-repeat center center url('../assets/home/icon_3.png');background-size:18px;cursor:pointer;
        }
			}

			.info3{
				.row{margin-top:15px;
					h5{position:relative;font-size:17px;color:#07C1F7;padding-right:155px;display:inline-block;}
					h5:before{content:"";position:absolute;top:0;right:0;height:100%;width:150px;background:no-repeat center center url('../assets/home/icon_5.png');background-size:100% 11px;}
					P{color:#fff;font-size:15px;margin-top:8px;text-indent:28px;line-height:16px}
					h6{font-size:17px;color:#07C1F7;}
					.remarks{margin-top:10px;padding:5px;color:#07C1F7;border:1px solid #0F70C7;min-height:50px;border-radius: 5px;font-size:15px;}
				}
			}
			.close{
				position:absolute;top:3%;right:0px;height:22px;width:22px;background:no-repeat center center url('../assets/home/icon_4.png');background-size:100% 100%;cursor:pointer;
			}

			.body1{
				margin-top:15px;display:flex;height:430px;

				.panel{
					background:rgba(11,39,68, 0.5);box-shadow:0px 0px 8px 0px rgba(26,111,193, 0.9) inset;border-radius:8px;margin-right:10px;flex:2;padding:10px;

					h4{color:#00C9FD;text-align:center;margin:5px 0 10px;}
					.figure{
						height:200px;border-radius:8px;overflow:hidden;
						img{display:block;border:0;height:100%;width:100%;}
					}

					dl{
						font-size:0;
						dd{color:#fff;font-size:15px;margin-top:10px;line-height:18px;}
						dd:before{content:"1111";color:#00C9FD;display:inline-block;font-size:15px;margin-right:5px;}
						.item1:before{content:"检查日期：";}
						.item2:before{content:"检查专家：";}
						.item3:before{content:"整改建议：";}
						.item4:before{content:"隐患描述：";}
						.item5:before{content:"状态：";}
						.item6:before{content:"验收人：";}
					}
				}
				.panel:last-child{margin-right:0}
			}
		}

		.layer1{top:68px;left:0;width:405px;height:247px;}
		.layer2{top:329px;left:0;width:405px;height:247px;}
		.layer3{top:580px;left:0;width:405px;}
		.layer4{top:90px;left:410px;width:650px;/* height:400px; */}
		.layer5{top:90px;left:1065px;width:350px;/* height:400px; */}
		.layer6 {
      top: 200px;
      left:640px;
      width:650px;
      transform: translateX(-50%, -50%);
      /* height:480px; */
    }
    .layer7{top:68px;left:480px;width:450px;height:247px;}
    @keyframes shakes {
      0% {
        transform: scale(1.3)
      }
      50% {
        transform: scale(1.6);
      }
      100% {
        transform: scale(1.3);
      }
    }
    .sc-window {
      position: absolute;
      top: 68px;
      left: 480px;
      width: 325px;
      height: 660px;
      overflow-y: scroll;
      overflow-x: visible;
      /* min-height: 247px; */
      &::-webkit-scrollbar {
        display: none;
      }
      .star-x-wrapper {
        position: relative;
        width: 325px;
        height: 43px;
        background: #0F95FF;
        /* opacity: 0.8; */
        opacity: 1;
        .grade1{
          position:absolute;top:0;right:50%;height:100%;font-size:0;
          transform: translateX(50%);
          /* width:108px; */
          i{
            font-size:0;display:inline-block;height:100%;width:21px;background:no-repeat center center url('../assets/home/icon_star2.png');;background-size:15px;
            animation: shakes 1s infinite ease-in-out;
          }
        }
      }
      .sc-basic-item-wrapper {
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        background: #020c39;
        opacity: 0.8;
        margin: 5px 0px;
        .sc-basic-top-wrapper {
          height: 42px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          position: relative;
          top: 3px;
          .point-title-wrapper {
            padding-left: 10px;
            display: flex;
            flex-direction: row;
            align-items: center;
            .point-title-point {
              width: 7px;
              height: 7px;
              background: #00C9FD;
              border-radius: 50%;
              margin-right: 5px;
            }
            .point-title-title {
              color: #00C9FD;
              font-family: 'SourceHanSansCN-Regular';
              font-weight: 550;
            }
          }
          .pulldownbtn {
            margin-right: 5px;
            &.hide {
              transform: rotate(-90deg);
              transform-origin: center;
            }
          }
        }
        .sc-basic-item {
          width: 100%;
          white-space: break-spaces;
          padding: 5px;
          font-size: 15px;
          line-height: 20px;
        }
      }
    }
	}
  .popup-video{
		position:fixed;top:0;left:0;height:100%;width:100%;z-index:200;border:1px solid red;display:flex;justify-content:center;align-items:center;

		.videoWrap{
			position:relative;height:600px;width:900px;background-color:rgba(0,0,0, .95);border-radius:10px;
			box-shadow:0px 0px 8px 0px rgba(0, 0, 0, 1);padding:10px;
			.close{
				position:absolute;top:-26px;right:-26px;height:30px;width:30px;border:1px solid white;background-color:rgba(0,0,0, .6);border-radius:15px;color:#fff;text-align:center;line-height:29px;font-size:30px;transform:rotate(45deg);
			}
			.video{
				height:100%;width:100%;position:relative;
				iframe{position:relative;height:100%;width:100%;border:0;z-index:100;}
			}
			.spinner{
				position:absolute;top:50%;left:50%;width:80px;height:50px;text-align:center;font-size:10px;margin-top:-25px;margin-left:-40px;z-index:0;
				div{
					background-color: #aaa;
					height: 100%;
					width: 6px;
					display: inline-block;
					-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
					animation: stretchdelay 1.2s infinite ease-in-out;
				}

				div:nth-child(2){
					-webkit-animation-delay: -1.1s;animation-delay: -1.1s;
				}
				div:nth-child(3){
					-webkit-animation-delay: -1.0s;animation-delay: -1.0s;
				}
				div:nth-child(4){
					-webkit-animation-delay: -0.9s;animation-delay: -0.9s;
				}
				div:nth-child(5){
					-webkit-animation-delay: -0.8s;animation-delay: -0.8s;
				}
			}
		}
	}

	@-webkit-keyframes stretchdelay {
	  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
	  20% { -webkit-transform: scaleY(1.0) }
	}

	@keyframes stretchdelay {
	  0%, 40%, 100% {
		transform: scaleY(0.4);
		-webkit-transform: scaleY(0.4);
	  }  20% {
		transform: scaleY(1.0);
		-webkit-transform: scaleY(1.0);
	  }
	}
</style>

<!-- 图标部分 -->
<style lang="scss">
  @keyframes bowen {
    0% {
      box-shadow: 0px 0px 0px 2px red;
      opacity: 0.5;
    }
    100% {
      box-shadow: 0px 0px 0px 20px red;
      opacity: 0;
      filter: alpha(opacity=0);
    }
  }
  @keyframes shake {
    0% {
      transform-origin: bottom;
      transform: scale(0.6) rotate(0deg);
    }
    25% {
      transform-origin: bottom;
      transform: scale(0.6) rotate(30deg);
    }
    50% {
      transform-origin: bottom;
      transform: scale(0.6) rotate(0deg);
    }
    75% {
      transform-origin: bottom;
      transform: scale(0.6) rotate(-30deg);
    }
    100% {
      transform-origin: bottom;
      transform: scale(0.6) rotate(0deg);
    }
  }
  .markernormal {
    opacity: 0.7;
    &.darken {
      opacity: 0.5;
    }
    &.lighter {
      opacity: 1;
    }
    .enterabnormal {
      width: 30px;
      height: 31px;
    }
    .enternormal {
      width: 30px;
      height: 31px;
    }
    .exclamation {
      position: absolute;
      left: 10px;
      top: -5px;
      transform: scale(0.6);
      /* animation: shake 1s infinite ease-in-out; */
    }
    .animationripple {
      position: absolute;
      top: -3px;
      left: 0;
      width: 30px;
      height: 30px;
      border: 3px solid rebeccapurple;
      border-radius: 50%;
      animation: bowen 2s infinite linear;
    }
  }
  /* #filterclick {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  } */
</style>
