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)" @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">{{pig.personPassSuccess}}</strong>人次</span>
            </div>
            <div class="case-one">
              <span style=" padding-left: 20px; padding-right: 50px">异常</span>
              <span><strong class="sign">{{pig.personPassFail}}</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">{{pig.carPassIn}}</strong>次</span>
            </div>
            <div class="case-one">
              <span style="padding-left: 20px; padding-right: 50px">车辆驶出</span>
              <span><strong class="sign">{{pig.carPassOut}}</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">{{pig.tadayXiXiao}}</strong>次</span>
            </div>
            <div class="case-one">
              <span style="padding-left: 20px; padding-right: 50px">七日洗消</span>
              <span><strong class="sign">{{pig.SevenDayXIxiao}}</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: 30px">今日抓取</span>
              <span><strong class="sign">{{pig.tadaySiZhu}}</strong>次</span>
            </div>
            <div class="case-one">
              <span style=" padding-right: 30px">七日抓取</span>
              <span><strong class="sign">{{pig.SevenDaySiZhu}}</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: 35px">最高</span>
              <span><strong class="sign">{{env.maxTem ? env.maxTem : '0'}}</strong>℃</span>
            </div>
            <div class="case-one">
              <span style=" padding-left: 20px; padding-right: 35px">最低</span>
              <span><strong class="sign">{{env.minTem ? env.minTem : '0'}}</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 ? env.maxHum : '0'}}</strong>RH</span>
            </div>
            <div class="case-one">
              <span style="padding-left: 40px; padding-right: 50px">最低</span>
              <span><strong class="sign">{{env.minHum ? env.minHum : '0'}}</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">0</strong>kw/h</span>
            </div>
            <div class="case-one">
              <span style="padding-left: 20px; padding-right: 40px">本月累计</span>
              <span><strong class="sign">0</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 ? env.dayWater : '0'}}</strong>吨</span>
            </div>
            <div class="case-one">
              <span style=" padding-right: 5px">本月累计</span>
              <span><strong class="sign" style="font-size: 22px">{{env.monthWater ? env.monthWater : '0'}}</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">{{pro.quantity ? pro.quantity : '设备暂无数据'}}</strong>{{pro.quantity ? '头' : ''}}</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 ? (Math.floor(Number(pro.money) * 100) / 100).toLocaleString() : '设备暂无数据'}}</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">{{envList.cod ? envList.cod : '设备暂无数据'}}</strong>{{envList.cod ? '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">{{envList.liu ?  envList.liu : '设备暂无数据'}}</strong>{{envList.liu ?  'L/s' : ''}}</span>
            </div>
          </div>
        </div>
        <div class="case-center">
          <div class="case-title">ph</div>
          <div class="case-content">
            <div class="case-two">
              <span><strong class="sign">{{envList.ph ? envList.ph : '设备暂无数据'}}</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">{{envList.ad ? envList.ad : '设备暂无数据'}}</strong>{{envList.ad ? '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">{{alarm.todayAlarm ? alarm.todayAlarm : '暂无报警数据'}}</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">{{alarm.failureRate ? alarm.failureRate : '暂无数据'}}</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">{{alarm.warningQuantity ? alarm.warningQuantity : '暂无数据'}}</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">{{alarm.todayEventTotal ? alarm.todayEventTotal : '暂无数据'}}</strong></span>
            </div>
          </div>
        </div>
      </div>
      <div class="case" v-show="selectId === 5"></div>
      <div class="case" v-show="selectId === 6"></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']"></div>
    </div>
    <div class="bio-dialog" v-show="permissionShow" @click="permissionShow = false">
      <div class="dialog-content1">
        <div style="margin-bottom: 20px">
          <i class="el-icon-error" style="font-size: 48px; color: red"></i>
        </div>
        <div style="color: white; font-size: 32px">
          抱歉您暂无权限查看，请联系管理员
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "Home",
  data() {
    return {
      width: '',
      list: [
        {
          id: 1,
          title: '生物安全',
          url: '/bioSafety',
          permission: 'bioSafety:look'
        },
        {
          id: 2,
          title: '生态监测',
          url: '/zoology',
          permission: 'zoology:look'
        },
        {
          id: 3,
          title: '生产经营',
          url: '/production',
          permission: 'production:look'
        },
        {
          id: 4,
          title: '环境监测',
          url: '/environment',
          permission: 'environment:look'
        },
        {
          id: 5,
          title: '报警信息',
          url: '/alarm',
          permission: 'alarm:look'
        },
        {
          id: 6,
          title: '视频监控',
          url: '/monit',
          permission: 'monit:look'
        },
        {
          id: 7,
          title: 'AI人脸识别',
          url: '/crew',
          permission: 'crew:look'
        },
      ],
      num: 0,
      leftNum: 0,
      line: 0,
      // 进度条定时器
      timer: null,
      // 下面数据定时器
      timer2: null,
      selectId: 0,
      // 闪光
      isFlash: true,
      timer3: null,
      //获取当前时间
      timer4: null,
      currentTime: new Date(),
      env: {},
      pro: {},
      envList: {},
      pig: {
        SevenDaySiZhu: "0",
        SevenDayXIxiao: "0",
        carPassIn: "0",
        carPassOut: "0",
        personPassFail: "0",
        personPassSuccess: "0",
        tadaySiZhu: "0",
        tadayXiXiao: "0",
      },
      alarm: {},
      permissionShow: false,
      step: 0,
    }
  },
  methods: {
    init() {
      getScreen({}).then(res => {
        if(res.code === 10000) {
          if(res.data != null) {
            this.env = res.data;
          }
        }
      })
      getListLargeScreen({}).then(res => {
        if(res.code === 10000) {
          this.pro = res.data;
        }
      })
      getEnvList({}).then(res => {
        if(res.code === 10000) {
          this.envList = {
            ph: res.data.phPj,
            cod: res.data.hxxylPj,
            liu: res.data.wsPj,
            ad: res.data.adPj
          }
        }
      })
      getAlarmAndPig({}).then(res => {
        if(res.code === 0) {
          if(res.data != null) {
            this.pig = res.data;
          }
        }
      })
      alarmHome({}).then(res => {
        if(res.code === 10000) {
          this.alarm = res.data;
        }
      })
    },
    prev() {
      let step = this.step / 5;
      if(this.num > 0) {
        this.num--;
        this.leftNum += step;
      } else {
        this.num = 0;
        this.leftNum = 0;
      }
    },
    next() {
      let step = this.step / 5;
      if(this.num >= this.list.length - 5) {
        return;
      } else {
        this.num++;
        this.leftNum -= step;
      }
    },
    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 > 6) {
        this.selectId = 6;
      } else {
        this.selectId = i;
      }
    },
    initData() {
      let that = this;
      this.timer2 = setInterval(() => {
        setTimeout(() => {
          if(that.selectId >= 6) {
            that.selectId = 0;
          } else {
            that.selectId++;
          }
        })
      }, 3000)
    },
    jump(item) {
      // 是否有权限
      if(this.hasPerm(item.permission)) {
        this.$router.push(item.url);
      } else {
        this.permissionShow = true;
      }

    },
  },
  mounted() {
    this.init()
    this.width = this.list.length * (220 + 180);
    this.step = document.getElementsByClassName('content-center')[0].clientWidth;
    this.initLine()
    this.initData();
    // this.initFalsh();
  },
  beforeDestroy() {
    clearInterval(this.timer);
    clearInterval(this.timer2);
  }
}
</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 {
    margin-top: 100px;
    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(102, 255, 255, .1), rgba(102, 255, 255, .3));
    animation: breathLamp 1.5s alternate infinite;
  }
  @keyframes breathLamp {
    0% {
      opacity: .1;
    }
    100% {
      opacity: 1;
    }
  }
  .bio-dialog {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0, .9);
    z-index: 999;
  }
  .dialog-content1 {
    width: 25%;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #007aff;
    box-sizing: border-box;
    padding: 40px;
    /*background-color: #fff;*/
  }
</style>