hyyfScreen/src/views/Home/Home.vue

<template>
  <div class="home">
    <!-- 导航栏   -->
    <div class="content">
      <div class="content-left">
        <div class="left" @click="prev">
          <div class="left-mini"></div>
        </div>
      </div>
      <div class="content-center">
        <ul class="carousel" :style="{width: width + 'px', left: leftNum + 'px'}">
          <template v-for="(item, i) in list">
            <li class="carousel-li" :key="item.id" @click="jump(item.url)" @mouseover="onChange(i)" @mouseout="initData">
              <div class="box">
                <div class="box-line box-top-right"></div>
                <div class="box-line box-bottom-right"></div>
                <div class="box-line box-bottom-left"></div>
                <div class="box-line box-top-left"></div>
                <span>{{item.title}}</span>
                <div v-show="i === selectId" class="box-fixed"></div>
              </div>
              <div class="line">
                <div class="line-content">
                  <div class="line-1 line-2"></div>
                  <div :class="['line-1', line > 0 ? 'line-2' : '']"></div>
                  <div :class="['line-1', line > 1 ? 'line-2' : '']"></div>
                  <div :class="['line-1', line > 2 ? 'line-2' : '']"></div>
                  <div :class="['line-1', line > 3 ? 'line-2' : '']"></div>
                  <div :class="['line-1', line > 4 ? 'line-2' : '']"></div>
                </div>
              </div>
            </li>
          </template>
        </ul>
      </div>
      <div class="content-right">
        <div class="right" @click="next">
          <div class="right-mini"></div>
        </div>
      </div>
    </div>
    <div class="parent">
      <div class="case" v-show="selectId === 0">
        <div class="case-box case-left">
          <div class="case-title">人员管控</div>
          <div class="case-content">
            <div class="case-one">
              <span style=" padding-left: 20px;padding-right: 50px">正常</span>
              <span><strong class="sign">79</strong>人次</span>
            </div>
            <div class="case-one">
              <span style=" padding-left: 20px; padding-right: 50px">异常</span>
              <span><strong class="sign">79</strong>人次</span>
            </div>
          </div>
        </div>
        <div class="case-center">
          <div class="case-title">车辆管控</div>
          <div class="case-content">
            <div class="case-one">
              <span style="padding-left: 20px; padding-right: 50px">洗消次数</span>
              <span><strong class="sign">19</strong>次</span>
            </div>
            <div class="case-one">
              <span style="padding-left: 20px; padding-right: 50px">平均时常</span>
              <span><strong class="sign">34</strong>分钟</span>
            </div>
          </div>
        </div>
        <div class="case-center">
          <div class="case-title">熏蒸监管</div>
          <div class="case-content">
            <div class="case-one">
              <span style="padding-left: 20px; padding-right: 50px">熏蒸次数</span>
              <span><strong class="sign">4</strong>次</span>
            </div>
            <div class="case-one">
              <span style="padding-left: 20px; padding-right: 50px">平均时常</span>
              <span><strong class="sign">3.4</strong>小时</span>
            </div>
          </div>
        </div>
        <div class="case-box case-right">
          <div class="case-title">死猪监管</div>
          <div class="case-content">
            <div class="case-one">
              <span style="padding-right: 40px">抓取次数</span>
              <span><strong class="sign">79</strong>人次</span>
            </div>
            <div class="case-one">
              <span style=" padding-right: 40px">最近抓取</span>
              <span><strong class="sign">07/01</strong></span>
            </div>
          </div>
        </div>
      </div>
      <div class="case" v-show="selectId === 1">
        <div class="case-box case-left">
          <div class="case-title">猪舍温度</div>
          <div class="case-content">
            <div class="case-one">
              <span style=" padding-left: 20px;padding-right: 50px">最高</span>
              <span><strong class="sign">{{env.maxTem}}</strong>℃</span>
            </div>
            <div class="case-one">
              <span style=" padding-left: 20px; padding-right: 50px">最低</span>
              <span><strong class="sign">{{env.minTem}}</strong>℃</span>
            </div>
          </div>
        </div>
        <div class="case-center">
          <div class="case-title">猪舍湿度</div>
          <div class="case-content">
            <div class="case-one">
              <span style="padding-left: 40px; padding-right: 50px">最高</span>
              <span><strong class="sign">{{env.maxHum}}</strong>RH</span>
            </div>
            <div class="case-one">
              <span style="padding-left: 40px; padding-right: 50px">最低</span>
              <span><strong class="sign">{{env.minHum}}</strong>RH</span>
            </div>
          </div>
        </div>
        <div class="case-center">
          <div class="case-title">猪场耗电量</div>
          <div class="case-content">
            <div class="case-one">
              <span style="padding-left: 20px; padding-right: 40px">今日累计</span>
              <span><strong class="sign">325</strong>kw/h</span>
            </div>
            <div class="case-one">
              <span style="padding-left: 20px; padding-right: 40px">本月累计</span>
              <span><strong class="sign">9325</strong>kw/h</span>
            </div>
          </div>
        </div>
        <div class="case-box case-right">
          <div class="case-title">猪舍用水量</div>
          <div class="case-content">
            <div class="case-one">
              <span style="padding-right: 5px">今日累计</span>
              <span><strong class="sign">{{env.dayWater}}</strong>吨</span>
            </div>
            <div class="case-one">
              <span style=" padding-right: 5px">本月累计</span>
              <span><strong class="sign">{{env.monthWater}}</strong>吨</span>
            </div>
          </div>
        </div>
      </div>
      <div class="case" v-show="selectId === 2">
        <div class="case-box case-left">
          <div class="case-title">总存栏</div>
          <div class="case-content">
            <div class="case-two">
              <span><strong class="sign">{{pro.total ? pro.total : '设备暂无数据'}}</strong>{{pro.total ? '头' : ''}}</span>
            </div>
          </div>
        </div>
        <div class="case-center">
          <div class="case-title">下月预计可出栏</div>
          <div class="case-content">
            <div class="case-two">
              <span><strong class="sign">2354</strong>头</span>
            </div>
          </div>
        </div>
        <div class="case-center">
          <div class="case-title">本月累计销售额度</div>
          <div class="case-content">
            <div class="case-two">
              <span><strong class="sign">{{pro.money ? pro.money : '设备暂无数据'}}</strong>{{pro.money ? '元' : ''}}</span>
            </div>
          </div>
        </div>
        <div class="case-box case-right">
          <div class="case-title">今日任务</div>
          <div class="case-content">
            <div class="case-two">
              <span><strong class="sign">{{pro.task ? pro.task : '设备暂无数据'}}</strong>{{pro.task ? '个' : ''}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="case" v-show="selectId === 3">
        <div class="case-box case-left">
          <div class="case-title">COD</div>
          <div class="case-content">
            <div class="case-two">
              <span><strong class="sign">7.54</strong>mg/L</span>
            </div>
          </div>
        </div>
        <div class="case-center">
          <div class="case-title">累计流量</div>
          <div class="case-content">
            <div class="case-two">
              <span><strong class="sign">123.57</strong>T</span>
            </div>
          </div>
        </div>
        <div class="case-center">
          <div class="case-title">总磷</div>
          <div class="case-content">
            <div class="case-two">
              <span><strong class="sign">0.323</strong>mg/L</span>
            </div>
          </div>
        </div>
        <div class="case-box case-right">
          <div class="case-title">氨氮</div>
          <div class="case-content">
            <div class="case-two">
              <span><strong class="sign">0.619</strong>mg/L</span>
            </div>
          </div>
        </div>
      </div>
      <div class="case" v-show="selectId === 4">
        <div class="case-box case-left">
          <div class="case-title">今日报警</div>
          <div class="case-content">
            <div class="case-two">
              <span><strong class="sign">9</strong>次</span>
            </div>
          </div>
        </div>
        <div class="case-center">
          <div class="case-title">平均相应时间</div>
          <div class="case-content">
            <div class="case-two">
              <span><strong class="sign">34</strong>分钟</span>
            </div>
          </div>
        </div>
        <div class="case-center">
          <div class="case-title">今日时间提醒</div>
          <div class="case-content">
            <div class="case-two">
              <span><strong class="sign">27</strong>次</span>
            </div>
          </div>
        </div>
        <div class="case-box case-right">
          <div class="case-title">未处理事件</div>
          <div class="case-content">
            <div class="case-two">
              <span><strong class="sign">7</strong>件</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-footer">
      <div class="home-footer-blue"></div>
      <div class="home-footer-map"></div>
      <div class="home-footer-scatter"></div>
      <div :class="['home-footer-flash', isFlash ? 'flash1': '']"></div>
    </div>
  </div>
</template>

<script>
import {getScreen, getListLargeScreen} from "@/utils/api";

export default {
  name: "Home",
  data() {
    return {
      width: '',
      list: [
        {
          id: 1,
          title: '生物安全',
          url: '/bioSafety',
        },
        {
          id: 2,
          title: '生态监测',
          url: '/zoology',
        },
        {
          id: 3,
          title: '生产经营',
          url: '/production',
        },
        {
          id: 4,
          title: '环境监测',
          url: '/environment',
        },
        {
          id: 5,
          title: '报警信息',
          url: '/alarm',
        },
        {
          id: 6,
          title: '视频监控',
          url: '/monit',
        },
      ],
      num: 0,
      leftNum: 0,
      line: 0,
      // 进度条定时器
      timer: null,
      // 下面数据定时器
      timer2: null,
      selectId: 0,
      // 闪光
      isFlash: true,
      timer3: null,
      //获取当前时间
      timer4: null,
      currentTime: new Date(),
      env: {},
      pro: {},
    }
  },
  methods: {
    init() {
      getScreen({}).then(res => {
        if(res.code === 10000) {
          this.env = res.data;
        }
      })
      getListLargeScreen({}).then(res => {
        if(res.code === 10000) {
          this.pro = res.data;
        }
      })
    },
    prev() {
      if(this.num > 0) {
        this.num--;
        this.leftNum += 310;
      } else {
        this.num = 0;
        this.leftNum = 0;
      }
    },
    next() {
      if(this.num >= this.list.length - 5) {
        return;
      } else {
        this.num++;
        this.leftNum -= 310;
      }
    },
    initLine() {
      let that = this;
      this.timer = setInterval(() => {
        setTimeout(() => {
          if(that.line >= 5) {
            that.line = 0;
          } else {
            that.line++;
          }
        })
      }, 500)
    },
    onChange(i) {
      clearInterval(this.timer2);
      if(i > 4) {
        this.selectId = 4;
      } else {
        this.selectId = i;
      }
    },
    initData() {
      let that = this;
      this.timer2 = setInterval(() => {
        setTimeout(() => {
          if(that.selectId >= 4) {
            that.selectId = 0;
          } else {
            that.selectId++;
          }
        })
      }, 3000)
    },
    initFalsh() {
      let that = this;
      this.timer3 = setInterval(() => {
        setTimeout(() => {
          that.isFlash = !that.isFlash
        })
      }, 500)
    },
    jump(url) {
      this.$router.push(url);
    },
  },
  mounted() {
    this.init()
    this.width = this.list.length * (220 + 180) - 90;
    this.initLine()
    this.initData();
    this.initFalsh();
  },
  beforeDestroy() {
    clearInterval(this.timer);
    clearInterval(this.timer2);
    clearInterval(this.timer3);
  }
}
</script>

<style scoped>
  .home {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 40px 0 0 0;
  }
  .left {
    width: 38px;
    height: 42px;
    background: url('../../assets/Home/u446.svg') no-repeat;
    background-size: 100% 100%;
    transform: rotate(180deg);
    position: relative;
    cursor: pointer;
  }
  .left-mini {
    width: 18px;
    height: 20px;
    background: url('../../assets/Home/u447.svg') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 11px;
    left: 6px;
  }
  .content {
    width: 100%;
    height: 150px;
    box-sizing: border-box;
    padding: 0 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .content-center {
    width: 1500px;
    height: 100%;
    overflow: hidden;
    position: relative;
  }
  .right {
    width: 38px;
    height: 42px;
    background: url('../../assets/Home/u446.svg') no-repeat;
    background-size: 100% 100%;
    position: relative;
    cursor: pointer;
  }
  .right-mini {
    width: 18px;
    height: 20px;
    background: url('../../assets/Home/u447.svg') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 11px;
    left: 6px;
  }
  .carousel {
    padding: 0 10px;
    margin: 0;
    list-style: none;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: left ease-in .5s;
  }
  .carousel-li {
    width: 220px;
    height: 150px;
    margin-right: 90px;
    float: left;
    cursor: pointer;
  }
  .carousel-li:last-child {
    margin-right: 0;
  }
  .box {
    width: 210px;
    height: 120px;
    background: url("../../assets/Home/u66.svg") no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
    line-height: 120px;
    font-size: 24px;
    text-align: center;
    font-weight: 600;
    color: white;
    position: relative;
  }
  .box-fixed {
    width: 205px;
    height: 114px;
    position: absolute;
    top: 3px;
    left: 3px;
    background: #58a;
    background: linear-gradient(-32deg,transparent 12px,#58a 0) bottom right,
    linear-gradient(32deg,transparent 12px,#58a 0) bottom left,
    linear-gradient(150deg,transparent 12px,#58a 0) top left,
    linear-gradient(-150deg,transparent 12px,#58a 0) top right;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    opacity: .5;
  }
  .line {
    width: 150px;
    height: 17px;
    margin: 10px auto;
    border: 2px solid  #218FA0;
    box-sizing: border-box;
    padding: 2px;
  }
  .line-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
  }
  .line-1 {
    width: 19px;
    height: 100%;
    background-color: #20909E;
  }
  .line-2 {
    background-color: #47E7FD;
  }
  .box-line {
    width: 16px;
    height: 27px;
    position: absolute;
  }
  .box-top-right {
    background: url("../../assets/Home/u64.svg") no-repeat;
    background-size: 100% 100%;
    top: 0;
    right: -15px;
  }
  .box-bottom-right {
    background: url("../../assets/Home/u65.svg") no-repeat;
    background-size: 100% 100%;
    bottom: 0;
    right: -15px;
  }
  .box-bottom-left {
    background: url("../../assets/Home/u63.svg") no-repeat;
    background-size: 100% 100%;
    bottom: 0;
    left: -15px;
  }
  .box-top-left {
    background: url("../../assets/Home/u62.svg") no-repeat;
    background-size: 100% 100%;
    top: 0;
    left: -15px;
  }
  .parent {
    animation: flip-horizontal-bck 1.2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
  }
  @keyframes flip-horizontal-bck {
    0% {
      -webkit-transform: translateZ(-260px) rotateX(190deg);
      transform: translateZ(-260px) rotateX(190deg);
    }
    100% {
      -webkit-transform: translateZ(0) rotateX(0);
      transform: translateZ(0) rotateX(0);
    }
  }
  .case {
    width: 1200px;
    height: 360px;
    margin: 40px auto;
    display: flex;
    justify-content: space-between;
    /*transition: ;*/
    animation: anim 1s;
    z-index: 999;
  }
  @keyframes anim {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .case-box {
    width: 240px;
    height: 320px;
    background-color: #0B5B6C;
    position: relative;
    top: 20px;
    box-sizing: border-box;
    padding: 20px;
  }
  .case-center {
    width: 300px;
    height: 320px;
    background-color: #0B5B6C;
    box-sizing: border-box;
    padding: 20px;
  }
  .case-left {
    transform: skew(0, -8deg);
  }
  .case-right {
    transform: skew(0, 8deg);
  }
  .case-title {
    background-color: #0D3952;
    width: 100%;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
    font-weight: 600;
    color: #5DEBED;
  }
  .case-content {
    width: 100%;
    height: calc(100% - 80px);
    margin-top: 20px;
    /*text-align: center;*/
  }
  .case-one {
    width: 100%;
    line-height: 80px;
    font-weight: 600;
    font-size: 18px;
    color: #5DEBED;
    text-align: left;
  }
  .sign {
    font-size: 30px;
  }
  .case-two {
    width: 100%;
    line-height: 160px;
    font-size: 18px;
    color: #5DEBED;
    text-align: center;
  }
  .home-footer {
    width: 761px;
    height: 190px;
    background: url("../../assets/Home/u458.svg") no-repeat;
    margin: auto;
    background-size: 100% 100%;
    position: relative;
  }
  .home-footer-map {
    width: 658px;
    height: 121px;
    background: url("../../assets/Home/u460.svg") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 25px;
    left: 60px;
  }
  .home-footer-blue {
    width: 706px;
    height: 149px;
    background: url("../../assets/Home/u459.svg") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 13px;
    left: 35px;
  }
  .home-footer-scatter {
    width: 894px;
    height: 468px;
    background: url("../../assets/Home/u461.svg") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 52%;
    top: -40%;
    transform: translate(-50%, -50%);
    opacity: .1;
    z-index: 99;
  }
  .home-footer-flash {
    width: 640px;
    height: 500px;
    position: absolute;
    top: -80%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to bottom, rgba(4, 5, 26, .1), rgba(4, 5, 26, .3));
  }
  .flash1 {
    background: linear-gradient(to bottom, rgba(102, 255, 255, .1), rgba(102, 255, 255, .3));
    /*background-color: rgba(102, 255, 255, .2);*/
  }
</style>