<template>
  <div>
    <div class="top">
      <div class="topItem itembg1" @click="handleClickTopItem1">
        <div class="icon">
          <img src="../assets/images/index/index2-2-1.png" alt="">
        </div>
        <div class="word">
          <div class="topItemTitle">本年待审装置数量</div>
          <div class="topItemContent">{{homeData1}}</div>
        </div>

      </div>
      <div class="topItem itembg2" @click="handleClickTopItem2">
        <div class="icon">
          <img src="../assets/images/index/index2-2-2.png" alt="">
        </div>
        <div class="word">
          <div class="topItemTitle">历年装置审计绿区通过率</div>
          <div class="topItemContent">{{homeData2}}</div>
        </div>
      </div>
      <div class="topItem itembg3" @click="handleClickTopItem3">
        <div class="icon">
          <img src="../assets/images/index/index2-2-3.png" alt="">
        </div>
        <div class="word">
          <div class="topItemTitle">待审装置开项问题汇总</div>
          <div class="topItemContent">{{homeData3}}</div>
        </div>
      </div>
      <div class="topItem itembg4" @click="handleClickTopItem4">
        <div class="icon">
          <img src="../assets/images/index/index2-2-4.png" alt="">
        </div>
        <div class="word">
          <div class="topItemTitle">待审装置开项问题处理完成数量</div>
          <div class="topItemContent">{{homeData4}}</div>
        </div>
      </div>
    </div>

    <div class="bottom">
      <!-- 左边 -->
      <div class="bot-left">
        <div class="card cardleft1" @click="handleClickPlant(101)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--&lt;!&ndash;<svg-icon v-if="hasAudit(101)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>&ndash;&gt;-->
              <i class="el-icon-s-flag" v-if="hasAudit(101)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(101)">电厂</span>
              <span v-if="hasAudit(101)" style="color: #02B151;">电厂</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(101)">Power<br>Plant</span>
              <span v-if="hasAudit(101)" style="color: #02B151;">Power<br>Plant</span>
            </div>
          </div>
        </div>

        <div class="card cardleft2" @click="handleClickPlant(102)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--&lt;!&ndash;<svg-icon v-if="hasAudit(102)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>&ndash;&gt;-->
              <i class="el-icon-s-flag" v-if="hasAudit(102)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(102)">合成气</span>
              <span v-if="hasAudit(102)" style="color: #02B151;">合成气</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(102)">Syngas</span>
              <span v-if="hasAudit(102)" style="color: #02B151;">Syngas</span>
            </div>
          </div>
        </div>

        <div class="card cardleft3" @click="handleClickPlant(104)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--&lt;!&ndash;<svg-icon v-if="hasAudit(104)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>&ndash;&gt;-->
              <i class="el-icon-s-flag" v-if="hasAudit(104)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(104)">D900</span>
              <span v-if="hasAudit(104)" style="color: #02B151;">D900</span>
            </div>
          </div>
        </div>

        <div class="card cardleft4" @click="handleClickPlant(105)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--&lt;!&ndash;<svg-icon v-if="hasAudit(105)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>&ndash;&gt;-->
              <i class="el-icon-s-flag" v-if="hasAudit(105)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(105)">C900</span>
              <span v-if="hasAudit(105)" style="color: #02B151;">C900</span>
            </div>
          </div>
        </div>

        <div class="card cardleft5" @click="handleClickPlant(106)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(106)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit()" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(106)">B900</span>
              <span v-if="hasAudit(106)" style="color: #02B151;">B900</span>
            </div>
          </div>
        </div>

        <div class="card card2 cardleft6" @click="handleClickPlant(107)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(107)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(107)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(107)">聚苯乙烯包装库房</span>
              <span v-if="hasAudit(107)" style="color: #02B151;">聚苯乙烯包装库房</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(107)">PS Storage<br>A900 A800</span>
              <span v-if="hasAudit(107)" style="color: #02B151;">PS Storage<br>A900 A800</span>
            </div>
          </div>
        </div>

        <div class="card cardleft7" @click="handleClickPlant(108)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(108)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(108)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(108)">D800</span>
              <span v-if="hasAudit(108)" style="color: #02B151;">D800</span>
            </div>
          </div>
        </div>

        <div class="card cardleft8" @click="handleClickPlant(109)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(109)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(109)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(109)">C800</span>
              <span v-if="hasAudit(109)" style="color: #02B151;">C800</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(109)">乙苯/苯乙烯<br>EB/SM</span>
              <span v-if="hasAudit(109)" style="color: #02B151;">乙苯/苯乙烯<br>EB/SM</span>
            </div>
          </div>
        </div>

        <div class="card cardleft9" @click="handleClickPlant(110)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(110)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(110)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(110)">聚苯乙烯</span>
              <span v-if="hasAudit(110)" style="color: #02B151;">聚苯乙烯</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(110)">PS<br>B800</span>
              <span v-if="hasAudit(110)" style="color: #02B151;">PS<br>B800</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间 -->
      <div class="bot-center">
        <div class="card card2 cardleft10" @click="handleClickPlant(103)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(103)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(103)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(103)">火炬BCC Flare</span>
              <span v-if="hasAudit(103)" style="color: #02B151;">火炬BCC Flare</span>
            </div>
          </div>
        </div>

        <div class="card card2 cardleft11" @click="handleClickPlant(103)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(103)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(103)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(103)">裂解<br>罐区<br>SCTF</span>
              <span v-if="hasAudit(103)" style="color: #02B151;">裂解<br>罐区<br>SCTF</span>
            </div>
          </div>
        </div>

        <div class="card card2 cardleft12" @click="handleClickPlant(103)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(103)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(103)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(103)">蒸汽裂解</span>
              <span v-if="hasAudit(103)" style="color: #02B151;">蒸汽裂解</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(103)">EU<br>D100/200</span>
              <span v-if="hasAudit(103)" style="color: #02B151;">EU<br>D100/200</span>
            </div>
          </div>
        </div>

        <div class="card card2 cardleft13" @click="handleClickPlant(111)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(111)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(111)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(111)">芳烃抽提<br>汽油加氢</span>
              <span v-if="hasAudit(111)" style="color: #02B151;">芳烃抽提<br>汽油加氢</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(111)">AEU/PGU<br>D300</span>
              <span v-if="hasAudit(111)" style="color: #02B151;">AEU/PGU<br>D300</span>
            </div>
          </div>
        </div>

        <div class="card card2 cardleft14" @click="handleClickPlant(112)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(112)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(112)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(112)">异丁烯/聚异丁烯/丁二烯</span>
              <span v-if="hasAudit(112)" style="color: #02B151;">异丁烯/聚异丁烯/丁二烯</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(112)">IB/PIB/BD<br>C100/200</span>
              <span v-if="hasAudit(112)" style="color: #02B151;">IB/PIB/BD<br>C100/200</span>
            </div>
          </div>
        </div>

        <div class="card card2 cardleft15" @click="handleClickPlant(113)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(113)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(113)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(113)">公用工程</span>
              <span v-if="hasAudit(113)" style="color: #02B151;">公用工程</span>
            </div>
            <div class="cardleft1Content">U1<br>
              <span v-if="!hasAudit(113)">C300</span>
              <span v-if="hasAudit(113)" style="color: #02B151;">C300</span>
            </div>
          </div>
        </div>

        <div class="card card2 cardleft16" @click="handleClickPlant(114)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(114)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(114)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(114)">低密度聚乙烯醋<br>酸乙烯共聚物</span>
              <span v-if="hasAudit(114)" style="color: #02B151;">低密度聚乙烯醋<br>酸乙烯共聚物</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(114)">LDPE<br>B100/200</span>
              <span v-if="hasAudit(114)" style="color: #02B151;">LDPE<br>B100/200</span>
            </div>
          </div>
        </div>

        <div class="card card2 cardleft17" @click="handleClickPlant(114)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(115)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(114)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(114)">醇类联合</span>
              <span v-if="hasAudit(114)" style="color: #02B151;">醇类联合</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(114)">OXO<br>B300</span>
              <span v-if="hasAudit(114)" style="color: #02B151;">OXO<br>B300</span>
            </div>
          </div>
        </div>

        <div class="card card2 cardleft18" @click="handleClickPlant(114)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(115)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(114)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(114)">聚乙烯仓库</span>
              <span v-if="hasAudit(114)" style="color: #02B151;">聚乙烯仓库</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(114)">LDPE/EVA<br>Storage A100/200</span>
              <span v-if="hasAudit(114)" style="color: #02B151;">LDPE/EVA<br>Storage A100/200</span>
            </div>
          </div>
        </div>

        <div class="card card2 cardleft19" @click="handleClickPlant(117)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(117)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(117)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(117)">危险品仓库</span>
              <span v-if="hasAudit(117)" style="color: #02B151;">危险品仓库</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(117)">Hazard Chemical<br>Storage A300</span>
              <span v-if="hasAudit(117)" style="color: #02B151;">Hazard Chemical<br>Storage A300</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右边 -->
      <div class="bot-right">
        <div class="card cardleft20" @click="handleClickPlant(118)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(118)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(118)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(118)">氧化炉</span>
              <span v-if="hasAudit(118)" style="color: #02B151;">氧化炉</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(118)">TO</span>
              <span v-if="hasAudit(118)" style="color: #02B151;">TO</span>
            </div>
          </div>
        </div>
        <div class="card card2 cardleft21" @click="handleClickPlant(119)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(119)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(119)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(119)">中央罐区</span>
              <span v-if="hasAudit(119)" style="color: #02B151;">中央罐区</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(119)">CLTF</span>
              <span v-if="hasAudit(119)" style="color: #02B151;">CLTF</span>
            </div>
          </div>
        </div>
        <div class="card cardleft22" @click="handleClickPlant(120)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(120)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(120)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(120)">环氧乙烷/<br>乙二醇</span>
              <span v-if="hasAudit(120)" style="color: #02B151;">环氧乙烷/<br>乙二醇</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(120)">EO/EG<br>D400</span>
              <span v-if="hasAudit(120)" style="color: #02B151;">EO/EG<br>D400</span>
            </div>
          </div>
        </div>
        <div class="card cardleft23" @click="handleClickPlant(121)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(121)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(121)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(121)">非离子表面<br>活性剂</span>
              <span v-if="hasAudit(121)" style="color: #02B151;">非离子表面<br>活性剂</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(121)">NIS<br>500</span>
              <span v-if="hasAudit(121)" style="color: #02B151;">NIS<br>500</span>
            </div>
          </div>
        </div>
        <div class="card cardleft24" @click="handleClickPlant(122)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(122)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(122)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(122)">超吸水聚合物</span>
              <span v-if="hasAudit(122)" style="color: #02B151;">超吸水聚合物</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(122)">SAP<br>D600</span>
              <span v-if="hasAudit(122)" style="color: #02B151;">SAP<br>D600</span>
            </div>
          </div>
        </div>
        <div class="card cardleft25" @click="handleClickPlant(123)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(123)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(123)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(123)">办公区<br>维修中心</span>
              <span v-if="hasAudit(123)" style="color: #02B151;">办公区<br>维修中心</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(123)">中心库房<br>D700</span>
              <span v-if="hasAudit(123)" style="color: #02B151;">中心库房<br>D700</span>
            </div>
          </div>
        </div>
        <div class="card cardleft26" @click="handleClickPlant(124)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(124)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(124)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(124)">公用工程</span>
              <span v-if="hasAudit(124)" style="color: #02B151;">公用工程</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(124)">U2<br>C400</span>
              <span v-if="hasAudit(124)" style="color: #02B151;">U2<br>C400</span>
            </div>
          </div>
        </div>
        <div class="card cardleft27" @click="handleClickPlant(125)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(125)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(125)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(125)">精丙烯酸</span>
              <span v-if="hasAudit(125)" style="color: #02B151;">精丙烯酸</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(125)">GAA<br>C500</span>
              <span v-if="hasAudit(125)" style="color: #02B151;">GAA<br>C500</span>
            </div>
          </div>
        </div>
        <div class="card cardleft28" @click="handleClickPlant(126)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(126)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(126)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(126)">醇胺联合<br>NPG</span>
              <span v-if="hasAudit(126)" style="color: #02B151;">醇胺联合<br>NPG</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(126)">ACN<br>C600</span>
              <span v-if="hasAudit(126)" style="color: #02B151;">ACN<br>C600</span>
            </div>
          </div>
        </div>
        <div class="card cardleft29" @click="handleClickPlant(127)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(127)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(127)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(127)">公路终端</span>
              <span v-if="hasAudit(127)" style="color: #02B151;">公路终端</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(127)">RTTF<br>C700</span>
              <span v-if="hasAudit(127)" style="color: #02B151;">RTTF<br>C700</span>
            </div>
          </div>
        </div>
        <div class="card card2 cardleft30" @click="handleClickPlant(128)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(128)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(128)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(128)">丙烯酸/丙烯酸酯</span>
              <span v-if="hasAudit(128)" style="color: #02B151;">丙烯酸/丙烯酸酯</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(128)">AA/AE<br>B400/B500</span>
              <span v-if="hasAudit(128)" style="color: #02B151;">AA/AE<br>B400/B500</span>
            </div>
          </div>
        </div>
        <div class="card cardleft31" @click="handleClickPlant(129)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(129)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(129)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(129)">碳一联合</span>
              <span v-if="hasAudit(129)" style="color: #02B151;">碳一联合</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(129)">C1<br>B600</span>
              <span v-if="hasAudit(129)" style="color: #02B151;">C1<br>B600</span>
            </div>
          </div>
        </div>
        <div class="card cardleft32" @click="handleClickPlant(130)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(130)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(130)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(130)">B700</span>
              <span v-if="hasAudit(130)" style="color: #02B151;">B700</span>
            </div>
          </div>
        </div>
        <div class="card card2 cardleft33" @click="handleClickPlant(131)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(131)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(131)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(131)">物流库房</span>
              <span v-if="hasAudit(131)" style="color: #02B151;">物流库房</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(131)">Logistical storage<br>A400/A500</span>
              <span v-if="hasAudit(131)" style="color: #02B151;">Logistical storage<br>A400/A500</span>
            </div>
          </div>
        </div>
        <div class="card cardleft34" @click="handleClickPlant(132)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--<svg-icon v-if="hasAudit(132)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>-->
              <i class="el-icon-s-flag" v-if="hasAudit(132)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(132)">碳一联合库房</span>
              <span v-if="hasAudit(132)" style="color: #02B151;">碳一联合库房</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(132)">C1 complex<br>Storage<br>A600</span>
              <span v-if="hasAudit(132)" style="color: #02B151;">C1 complex<br>Storage<br>A600</span>
            </div>
          </div>
        </div>
        <div class="card cardleft35" @click="handleClickPlant(133)">
          <div class="cardword">
            <div class="cardleft1Title">
              <!--&lt;!&ndash;<svg-icon v-if="hasAudit(133)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>&ndash;&gt;-->
              <i class="el-icon-s-flag" v-if="hasAudit(133)" style="color: #02B151; font-size: 18px;"></i>
              <span v-if="!hasAudit(133)">铁路控制室</span>
              <span v-if="hasAudit(133)" style="color: #02B151;">铁路控制室</span>
            </div>
            <div class="cardleft1Content">
              <span v-if="!hasAudit(133)">Rail Control<br>Room<br>A700</span>
              <span v-if="hasAudit(133)" style="color: #02B151;">Rail Control<br>Room<br>A700</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getHomeData, getAuditDeptList } from "@/api/rc/audit";

  export default {
    data() {
      return {
        homeData1: 0,
        homeData2: 0,
        homeData3: 0,
        homeData4: 0,
        auditDeptList: [],
      }
    },
    created() {
      getHomeData().then(response => {
        if (response.data != null) {
          this.homeData1 = response.data.homeData1;
          this.homeData2 = (response.data.homeData2 * 100) + "%";
          this.homeData3 = response.data.homeData3;
          this.homeData4 = response.data.homeData4;
        }
      });
      getAuditDeptList().then(response => {
        this.auditDeptList = [];
        let data = response.data;
        for (let i = 0; i < data.length; i++) {
          this.auditDeptList.push(data[i].deptId);
        }
      });
    },
    methods: {
      hasAudit(deptId) {
        let auditDeptList = this.auditDeptList;
        let hasAudit = false;
        for (let i = 0; i < auditDeptList.length; i++) {
          if (deptId == auditDeptList[i]) {
            hasAudit = true;
          }
        }
        return hasAudit;
      },
      handleClickTopItem1() {
        this.$router.push("/rc/audit");
      },
      handleClickTopItem2() {
        this.$router.push("/rc/audit");
      },
      handleClickTopItem3() {
        this.$router.push("/rc/openitem");
      },
      handleClickTopItem4() {
        this.$router.push("/rc/openitem");
      },
      handleClickPlant(deptId) {
        this.$router.push({
          path: "/rc/audit",
          query: {
            deptId: deptId
          }
        });
      },
    },
  };
</script>
<style scoped>
 .top{
    display: flex;
    margin-left: 35px;
    margin-top: 10px;
    margin-right: 15px;
    justify-content: space-between;
 }
  .topItem{
    padding: 50px 20px 50px 60px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .topItem .icon{
    width: 40px;
    height: 40px;
    margin-right: 20px;
  }
  .topItem .icon img{
   width: 40px;
    height: 40px;
  }
  .topItem .word{
    font-size: 16px;
    color: #fff;
    font-weight: bold;
  }
 .topItem.itembg1{
    background: url(../assets/images/index/index2-1-1.png) no-repeat;
    background-size: 100% 100%;
    width: 23.4%;
    height: 120px;
    margin-right: 10px;
 }

 .topItem.itembg2{
    background: url(../assets/images/index/index2-1-2.png) no-repeat;
    background-size: 100% 100%;
    width: 23.4%;
    height: 120px;
    margin-right: 10px;
 }

 .topItem.itembg3{
    background: url(../assets/images/index/index2-1-3.png) no-repeat;
    background-size: 100% 100%;
    width: 23.4%;
    height: 120px;
    margin-right: 10px;
 }

 .topItem.itembg4{
    background: url(../assets/images/index/index2-1-4.png) no-repeat;
    background-size: 100% 100%;
    width: 23.4%;
    height: 120px;
    margin-left: 10px;
 }

 .bottom{
    background: url(../assets/images/index/index2-bg.png) no-repeat;
    width: 98%;
    height: 698px;
    background-size: 100% 100%;
    margin-left: 25px;
    margin-right: 10px;
    display: flex;
    position: relative;
 }

 .bottom .card{
  background: url(../assets/images/index/index2-3-2.png) no-repeat;
  width: 6.55%;
  height: 14.6%;
  background-size: 100% 100%;
  /* padding: 20px; */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  cursor: pointer;
 }

 .bottom .card.card2{
  background: url(../assets/images/index/index2-3-1.png) no-repeat;
  width: 14.5%;
  height: 14.789%;
  background-size: 100% 100%;
 }

 .cardword{
  color: #1971FF;
  font-size: 12px;
 }

 .cardleft1Title{
  font-weight: bold;
 }
 .cardleft1Content{
  font-size: 11px;
 }

 .cardleft1{
    top: 27.556%;
    left: 3.76%;
 }

 .cardleft2{
    top: 47.11%;
    left: 3.76%;
 }

 .cardleft3{
    top: 26.8%;
    left: 14.285%;
 }

 .cardleft4{
    top: 44.6%;
    left: 14.285%;
 }

 .cardleft5{
    top: 61.4%;
    left: 14.285%;
 }

 .cardleft6{
    top: 78.6967%;
    left: 14.285%;
 }

 .cardleft7{
    top: 26.8%;
    left: 23.07%;
 }

 .cardleft8{
    top: 44.6%;
    left: 23.07%;
 }

 .cardleft9{
    top: 61.4%;
    left: 23.07%;
 }

 .cardleft10{
    top: 8.897%;
    left: 33.05%;
 }
 .cardleft11{
    top: 8.897%;
    left: 49.05%;
 }

 .cardleft12{
    top: 26.897%;
    left: 33.05%;
 }

 .cardleft13{
    top: 26.897%;
    left: 49.05%;
 }

 .cardleft14{
    top: 44.897%;
    left: 33.05%;
 }

 .cardleft15{
    top: 44.897%;
    left: 49.05%;
 }

 .cardleft16{
    top: 61.897%;
    left: 33.05%;
 }
 .cardleft17{
    top: 61.897%;
    left: 49.05%;
 }

 .cardleft18{
    top: 78.6967%;
    left: 33.05%;
 }
 .cardleft19{
    top: 78.6967%;
    left: 49.05%;
 }

 .cardleft20{
    top: 8.897%;
    left: 75.05%;
 }

 .cardleft21{
  top: 8.897%;
  left: 83.05%;
 }

 .cardleft22{
  top: 26.897%;
  left: 67.05%;
 }
 .cardleft23{
  top: 26.897%;
  left: 75.05%;
 }
 .cardleft24{
  top: 26.897%;
  left: 83.05%;
 }
 .cardleft25{
  top: 26.897%;
  left: 91.05%;
 }
 .cardleft26{
  top: 44.897%;
  left: 67.05%;
 }
 .cardleft27{
  top: 44.897%;
  left: 75.05%;
 }
 .cardleft28{
  top: 44.897%;
  left: 83.05%;
 }
 .cardleft29{
  top: 44.897%;
  left: 91.05%;
 }

 .cardleft30{
  top: 61.897%;
  left: 67.05%;
 }

 .cardleft31{
  top: 61.897%;
  left: 83.05%;
 }

 .cardleft32{
  top: 61.897%;
  left: 91.05%;
 }

 .cardleft33{
  top: 78.6967%;
  left: 67.05%;
 }

 .cardleft34{
  top: 78.6967%;
  left: 83.05%;
 }

 .cardleft35{
  top: 78.6967%;
  left: 91.05%;
 }
</style>
