rcaudit/ruoyi-ui/src/views/home1.vue

<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">
              <svg-icon v-if="hasAudit(101)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>
              电厂
            </div>
            <div class="cardleft1Content">Power<br>Plant</div>
          </div>
        </div>

        <div class="card cardleft2" @click="handleClickPlant(102)">
          <div class="cardword">
            <div class="cardleft1Title">
              <svg-icon v-if="hasAudit(102)" icon-class="roundGreen" style="font-size: 10px;"></svg-icon>
              合成气
            </div>
            <div class="cardleft1Content">Syngas</div>
          </div>
        </div>

        <div class="card cardleft3" @click="handleClickPlant(104)">
          <div class="cardword">
            <div class="cardleft1Title">D900</div>
          </div>
        </div>

        <div class="card cardleft4" @click="handleClickPlant(105)">
          <div class="cardword">
            <div class="cardleft1Title">C900</div>
          </div>
        </div>

        <div class="card cardleft5" @click="handleClickPlant(106)">
          <div class="cardword">
            <div class="cardleft1Title">B900</div>
          </div>
        </div>

        <div class="card card2 cardleft6" @click="handleClickPlant(107)">
          <div class="cardword">
            <div class="cardleft1Title">聚苯乙烯包装库房</div>
            <div class="cardleft1Content">PS Storage<br>A900 A800</div>
          </div>
        </div>

        <div class="card cardleft7" @click="handleClickPlant(108)">
          <div class="cardword">
            <div class="cardleft1Title">D800</div>
          </div>
        </div>

        <div class="card cardleft8" @click="handleClickPlant(109)">
          <div class="cardword">
            <div class="cardleft1Title">C800</div>
            <div class="cardleft1Content">乙苯/苯乙烯<br>EB/SM</div>
          </div>
        </div>

        <div class="card cardleft9" @click="handleClickPlant(110)">
          <div class="cardword">
            <div class="cardleft1Title">聚苯乙烯</div>
            <div class="cardleft1Content">PS<br>B800</div>
          </div>
        </div>
      </div>

      <!-- 中间 -->
      <div class="bot-center">
        <div class="card card2 cardleft10" @click="handleClickPlant(103)">
          <div class="cardword">
            <div class="cardleft1Title">火炬BCC Flare</div>
          </div>
        </div>

        <div class="card card2 cardleft11" @click="handleClickPlant(103)">
          <div class="cardword">
            <div class="cardleft1Title">裂解<br>罐区<br>SCTF</div>
          </div>
        </div>

        <div class="card card2 cardleft12" @click="handleClickPlant(103)">
          <div class="cardword">
            <div class="cardleft1Title">蒸汽裂解</div>
            <div class="cardleft1Content">EU<br>D100/200</div>
          </div>
        </div>

        <div class="card card2 cardleft13" @click="handleClickPlant(111)">
          <div class="cardword">
            <div class="cardleft1Title">芳烃抽提<br>汽油加氢</div>
            <div class="cardleft1Content">AEU/PGU<br>D300</div>
          </div>
        </div>

        <div class="card card2 cardleft14" @click="handleClickPlant(112)">
          <div class="cardword">
            <div class="cardleft1Title">异丁烯/聚异丁烯/丁二烯</div>
            <div class="cardleft1Content">IB/PIB/BD<br>C100/200</div>
          </div>
        </div>

        <div class="card card2 cardleft15" @click="handleClickPlant(113)">
          <div class="cardword">
            <div class="cardleft1Title">公用工程</div>
            <div class="cardleft1Content">U1<br>C300</div>
          </div>
        </div>

        <div class="card card2 cardleft16" @click="handleClickPlant(114)">
          <div class="cardword">
            <div class="cardleft1Title">低密度聚乙烯醋<br>酸乙烯共聚物</div>
            <div class="cardleft1Content">LDPE<br>B100/200</div>
          </div>
        </div>

        <div class="card card2 cardleft17" @click="handleClickPlant(115)">
          <div class="cardword">
            <div class="cardleft1Title">醇类联合</div>
            <div class="cardleft1Content">OXO<br>B300</div>
          </div>
        </div>

        <div class="card card2 cardleft18" @click="handleClickPlant(116)">
          <div class="cardword">
            <div class="cardleft1Title">聚乙烯仓库</div>
            <div class="cardleft1Content">LDPE/EVA<br>Storage A100/200</div>
          </div>
        </div>

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

<script>
  import { getHomeData } 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 = response.data;
      });
    },
    methods: {
      hasAudit(deptId) {
        let hasAudit = false;

        return;
      },
      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>