large_screen/src/views/compressed/configImg/configImg.vue

<template>
  <div class="main">
    <el-container>
      <el-header
        ><div>
          <img src="@/assets/img/compressed/back.png" id="imgSwitch" />
        </div>
        <div id="fan">
          <div class="fan1">
            <ul
              :class="{ blades: tableData1.isStart, bld: !tableData1.isStart }"
            >
              <li
                :class="[
                  'b1',
                  !tableData1.isAlarm
                    ? !tableData1.isWarning
                      ? 'green'
                      : 'red'
                    : 'red',
                ]"
              ></li>
              <li
                :class="[
                  'b2',
                  !tableData1.isAlarm
                    ? !tableData1.isWarning
                      ? 'green'
                      : 'red'
                    : 'red',
                ]"
              ></li>
              <li
                :class="[
                  'b3',
                  !tableData1.isAlarm
                    ? !tableData1.isWarning
                      ? 'green'
                      : 'red'
                    : 'red',
                ]"
              ></li>
            </ul>
          </div>
          <div class="fan2">
            <ul
              :class="{ blades: tableData2.isStart, bld: !tableData2.isStart }"
            >
              <li
                :class="[
                  'b1',
                  !tableData2.isAlarm
                    ? !tableData2.isWarning
                      ? 'green'
                      : 'red'
                    : 'red',
                ]"
              ></li>
              <li
                :class="[
                  'b2',
                  !tableData2.isAlarm
                    ? !tableData2.isWarning
                      ? 'green'
                      : 'red'
                    : 'red',
                ]"
              ></li>
              <li
                :class="[
                  'b3',
                  !tableData2.isAlarm
                    ? !tableData2.isWarning
                      ? 'green'
                      : 'red'
                    : 'red',
                ]"
              ></li>
            </ul>
          </div>

          <div class="fan3">
            <ul
              :class="{ blades: tableData3.isStart, bld: !tableData3.isStart }"
            >
              <li
                :class="[
                  'b1',
                  !tableData3.isAlarm
                    ? !tableData3.isWarning
                      ? 'green'
                      : 'red'
                    : 'red',
                ]"
              ></li>
              <li
                :class="[
                  'b2',
                  !tableData3.isAlarm
                    ? !tableData3.isWarning
                      ? 'green'
                      : 'red'
                    : 'red',
                ]"
              ></li>
              <li
                :class="[
                  'b3',
                  !tableData3.isAlarm
                    ? !tableData3.isWarning
                      ? 'green'
                      : 'red'
                    : 'red',
                ]"
              ></li>
            </ul>
          </div>
        </div>
      </el-header>
      <el-main>
        <el-row style="margin-top: 80px" :gutter="20">
          <el-col :span="8"
            ><div class="center">
              <data-table
                title="压风机1号"
                :tableData="tableData1"
              ></data-table></div
          ></el-col>
          <el-col :span="8"
            ><div class="center">
              <data-table
                title="压风机2号"
                :tableData="tableData2"
              ></data-table></div
          ></el-col>
          <el-col :span="8"
            ><div class="center">
              <data-table
                title="压风机3号"
                :tableData="tableData3"
              ></data-table></div
          ></el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import dataTable from "@/views/compressed/configImg/dataTable";
export default {
  data() {
    return {
      tableData1: {
        isStart: false,
        isAlarm: false,
        isWarning: false,
        isLoading: false,
        runningTime: 22716,
        loadingTime: 23760,
      },
      tableData2: {
        isStart: true,
        isAlarm: true,
        isWarning: true,
        isLoading: false,
        runningTime: 26716,
        loadingTime: 20760,
      },
      tableData3: {
        isStart: true,
        isAlarm: false,
        isWarning: true,
        isLoading: false,
        runningTime: 18716,
        loadingTime: 17760,
      },
    };
  },
  components: {
    dataTable,
  },
};
</script>

<style scoped>
.main {
  width: 100%;
  height: 850px;
  position: relative;
  background-image: linear-gradient(
    to right,
    #06133c 0%,
    #011669 5045 #06133c 100%
  );
}
.center {
  width: 100%;
  height: 500px;
  margin-top: 300px;
  background: url("../../../assets/img/tunneling/dataBg.png") no-repeat;
  background-size: 100%;
}
#imgSwitch {
  width: 100%;
  height: 450px;
  /* padding-bottom: 100px; */
  /* left: 50px; */
  /* margin-left: 30px; */
}
.header {
  width: 100px;
  height: 100px;
  margin-top: -100px;
}
li {
  list-style: none;
}
.fan1 {
  margin-left: 0px;
  position: absolute;
}
.fan2 {
  margin-left: 450px;
  margin-top: 0px;
  position: absolute;
}
.fan3 {
  margin-left: 920px;
  margin-top: 0px;
  position: absolute;
}
#fan {
  position: absolute;
  width: 16em;
  height: 30em;
  left: 14em;
  top: 22em;
}
.blades {
  height: 110px;
  width: 110px;
  /* position: absolute; */
  animation: blades 1s infinite linear;
}
.bld {
  height: 110px;
  width: 110px;
  /* position: absolute; */
}
.blades li {
  height: 4em;
  width: 4em;
  position: absolute;
  border-radius: 0 100% 0%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
.bld li {
  height: 4em;
  width: 4em;
  position: absolute;
  border-radius: 0 100% 0%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
/*扇叶*/
.b1 {
  top: 5em;
  left: 1.2em;
  transform: rotate(240deg);
}
.b2 {
  top: 0em;
  left: 0em;
  transform: rotate(0deg);
}
.b3 {
  top: 1.2em;
  left: 5em;
  transform: rotate(120deg);
}
@keyframes blades {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(600deg);
  }
}
.red {
  background: #f90005;
}
.green {
  background: #009966;
}
</style>