LanJu_UI/src/views/cs/index.vue

<template>
  <div>
    <div class="bg">
      <div class="title1">白坯车间生产监控看板</div>
      <div class="floorNum floorNum1">1F</div>
      <div class="floorNum floorNum2">2F</div>
      <div class="floorNum floorNum3">3F</div>
      <div class="floorNum floorNum4" @click="$router.push('/cs2')">4F</div>
      <div class="floorNum floorNum5">5F</div>
      <div class="floorNum floorNum6">6F</div>
      <div class="output" v-for="i in outputData" :style="`left:${i.left}%`"><span>产量：10车</span></div>
      <div v-for="i in equipmentData" class="equipment" :style="`left: ${i.left}%`">
        <div :class="i.isRight?'equipmentName1':'equipmentName'"><span>设备名称</span></div>
      </div>

      <div class="arrows" v-for="i in arrowData" v-if="false">
        <div class="oneAnR" :style="`left:${i.left-3}%`">
          <div class="oneAn">
            <div class="wx" :style="`top: -1%;left:49.5%`"></div>
            <div class="arrow" :style="`top: 7%;left:49.5%`"></div>
            <div class="wx" :style="`top: 29%;left:49.5%`"></div>
            <div class="arrow" :style="`top: 37%;left:49.5%`"></div>
            <div class="wx" :style="`top: 59%;left:49.5%`"></div>
            <div class="arrow" :style="`top: 67%;left:49.5%`"></div>
            <div class="wx" :style="`top: 89%;left:49.5%`"></div>
          </div>
        </div>
        <div class="twoAnR" :style="`left:${i.left-3}%`">
          <div class="twoAn">
            <div class="wxh" :style="`top: -0.9%;left:49%`"></div>
            <div class="arrow" :style="`top: 6%;left:49%`"></div>
            <div class="wxh" :style="`top: 15.2%;left:49%`"></div>
            <div class="arrow" :style="`top: 22.1%;left:49%`"></div>
            <div class="wxh" :style="`top: 31.3%;left:49%`"></div>
            <div class="arrow" :style="`top:38.2%;left:49%`"></div>
            <div class="wxh" :style="`top: 47.4%;left:49%`"></div>
            <div class="arrow" :style="`top: 54.3%;left:49%`"></div>
            <div class="wxh" :style="`top: 63.5%;left:49%`"></div>
            <div class="arrow" :style="`top: 70.4%;left:49%`"></div>
            <div class="wxh" :style="`top: 79.6%;left:49%`"></div>
            <div class="arrow" :style="`top: 86.5%;left:49%`"></div>
            <div class="wxh" :style="`top: 95.7%;left:49%`"></div>
          </div>
        </div>
        <div class="box" :style="`top: 74.5%;left:${i.left}%`"></div>
        <div class="box" :style="`top: 78.8%;left:${i.left}%`"></div>
      </div>

      <div class="arrows1" v-if="isRun.includes(1)">
        <div class="arrow" :style="`top: 38.5%;left: 35.2%;transform: rotate(0)`"></div>
        <div class="arrow" :style="`top: 42%;left: 35%;transform: rotate(0deg)`"></div>
        <div class="arrow" :style="`top: 48%;left: 34.5%;transform: rotate(0)`"></div>
        <div class="arrow" :style="`top: 52%;left: 34.2%;transform: rotate(0)`"></div>
        <div class="arrow" :style="`top: 57%;left: 34%;transform: rotate(0)`"></div>
        <div class="arrow" :style="`top: 62%;left: 33.8%;transform: rotate(0)`"></div>
        <div class="arrow" :style="`top: 66%;left: 33.1%;transform: rotate(0deg);`"></div>
      </div>

      <div class="arrows1" v-if="isRun.includes(2)">
        <div class="arrow" :style="`top: 38.5%;left: 39.2%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 42%;left: 39%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 48%;left: 39.2%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 52%;left: 39.2%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 57%;left: 39%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 62%;left: 38.7%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 66%;left: 39%;transform: rotate(0deg);`"></div>
      </div>

      <div class="arrows1" v-if="isRun.includes(3)">
        <div class="arrow" :style="`top: 38.5%;left: 46.2%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 42%;left: 46.3%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 48%;left: 46.2%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 52%;left: 45.8%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 57%;left: 45.8%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 62%;left: 45.9%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 66%;left: 45.4%;transform: rotate(0deg);`"></div>
      </div>

      <div class="arrows1" v-if="isRun.includes(4)">
        <div class="arrow" :style="`top: 38.5%;left: 50.5%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 42%;left: 50.5%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 48%;left: 50.9%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 52%;left: 51.1%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 57%;left: 51.1%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 62%;left: 51.2%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 66%;left: 51.7%;transform: rotate(0deg);`"></div>
      </div>

      <div class="arrows1" v-if="isRun.includes(5)">
        <div class="arrow" :style="`top: 38.5%;left: 57.2%;transform: rotate(358deg);`"></div>
        <div class="arrow" :style="`top: 42%;left: 57.5%;transform: rotate(358deg);`"></div>
        <div class="arrow" :style="`top: 48%;left: 57.5%;transform: rotate(358deg);`"></div>
        <div class="arrow" :style="`top: 52%;left: 57.5%;transform: rotate(358deg);`"></div>
        <div class="arrow" :style="`top: 57%;left: 57.8%;transform: rotate(358deg);`"></div>
        <div class="arrow" :style="`top: 62%;left: 58%;transform: rotate(358deg);`"></div>
        <div class="arrow" :style="`top: 66%;left: 57.7%;transform: rotate(358deg);`"></div>
      </div>

      <div class="arrows1" v-if="isRun.includes(6)">
        <div class="arrow" :style="`top: 38.5%;left: 61.2%;transform: rotate(355deg);`"></div>
        <div class="arrow" :style="`top: 42%;left: 61.5%;transform: rotate(355deg);`"></div>
        <div class="arrow" :style="`top: 48%;left: 62.2%;transform: rotate(355deg);`"></div>
        <div class="arrow" :style="`top: 52%;left: 62.5%;transform: rotate(355deg);`"></div>
        <div class="arrow" :style="`top: 57%;left: 62.8%;transform: rotate(355deg);`"></div>
        <div class="arrow" :style="`top: 62%;left: 63.1%;transform: rotate(355deg);`"></div>
        <div class="arrow" :style="`top: 66%;left: 63.9%;transform: rotate(355deg);`"></div>
      </div>

      <div class="arrows1" v-if="isRun.includes(7)">
        <div class="arrow" :style="`top: 38.5%;l;left: 68%;transform: rotate(350deg);`"></div>
        <div class="arrow" :style="`top: 42%;left: 68.5%;transform: rotate(350deg);`"></div>
        <div class="arrow" :style="`top: 48%;left: 68.8%;transform: rotate(350deg);`"></div>
        <div class="arrow" :style="`top: 52%;left: 69%;transform: rotate(350deg);`"></div>
        <div class="arrow" :style="`top: 57%;left: 69.5%;transform: rotate(350deg);`"></div>
        <div class="arrow" :style="`top: 62%;left: 70%;transform: rotate(350deg);`"></div>
        <div class="arrow" :style="`top: 66%;left: 70%;transform: rotate(350deg);`"></div>
      </div>

      <div class="arrows1" v-if="isRun.includes(8)">
        <div class="arrow" :style="`top: 38.5%;left: 72.2%;transform: rotate(345deg);`"></div>
        <div class="arrow" :style="`top: 42%;left: 72.7%;transform: rotate(345deg);`"></div>
        <div class="arrow" :style="`top: 48%;left: 73.5%;transform: rotate(345deg);`"></div>
        <div class="arrow" :style="`top: 52%;left: 74.1%;transform: rotate(345deg);`"></div>
        <div class="arrow" :style="`top: 57%;left: 74.8%;transform: rotate(345deg);`"></div>
        <div class="arrow" :style="`top: 62%;left: 75.3%;transform: rotate(345deg);`"></div>
        <div class="arrow" :style="`top: 66%;left: 76.1%;transform: rotate(345deg);`"></div>
      </div>
      <div class="bottomArrows" v-for="(i,k) in 9">
        <div class="arrow" :style="`top: 72.5%;left: ${31.9 + 5.2*k}%;`"></div>
      </div>
      <div class="bottomArrows" v-for="(i,k) in 5">
        <div class="arrow" :style="`top: 73.7%;left: ${50.5 - 5.2*k}%;`"></div>
      </div>

      <div v-for="i in infoData " class="info"
           :style="`top: ${i.top}%;left: ${i.left}%;transform: rotate(${i.rotate}deg);`">
        <div :class="i.isRight?'infoModel':'infoModel'" :style="`transform: rotate(${360 -i.rotate}deg);`">
          <div class="title">设备名称</div>
          <div class="equipmentOutput"><span style="color: #fff9">设备产量:</span> 10</div>
          <div class="equipmentInfo"><span style="color: #fff9">设备信息:</span> 10</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      isRun: [1, 2, 3, 4, 5, 6, 7, 8],
      infoData: [
        {
          top: 28,
          left: 32.7,
          rotate: 7,
          isRight: false
        },
        {
          top: 27,
          left: 37.1,
          rotate: 3,
          isRight: true
        },
        {
          top: 26.5,
          left: 44.1,
          rotate: 2,
          isRight: false
        },
        {
          top: 26,
          left: 48.8,
          rotate: 358,
          isRight: true
        },
        {
          top: 25,
          left: 55.8,
          rotate: 355,
          isRight: false
        },
        {
          top: 24,
          left: 60.2,
          rotate: 351,
          isRight: true
        },
        {
          top: 24,
          left: 66.8,
          rotate: 351,
          isRight: false
        },
        {
          top: 22.5,
          left: 71.6,
          rotate: 346,
          isRight: false
        },
      ],
      equipmentData: [
        // {
        //   left: 16,
        //   isRight: false,
        // },
        // {
        //   left: 23.5,
        //   isRight: true,
        // },
        // {
        //   left: 38,
        //   isRight: false,
        // },
        // {
        //   left: 45.3,
        //   isRight: true,
        // },
        // {
        //   left: 59.3,
        //   isRight: false,
        // },
        // {
        //   left: 66.6,
        //   isRight: true,
        // },
        // {
        //   left: 81.2,
        //   isRight: false,
        // },
        // {
        //   left: 88.5,
        //   isRight: false,
        // },
      ],
      outputData: [
        {
          left: 33.3,
        },
        {
          left: 37.7,
        },
        {
          left: 43.9,
        },
        {
          left: 48.5,
        },
        {
          left: 54.5,
        },
        {
          left: 59,
        },
        {
          left: 65,
        },
        {
          left: 69.5,
        },
      ],
      arrowData: [
        {
          left: 17.93,
        },
        {
          left: 25.23,
        },
        {
          left: 39.8,
        },
        {
          left: 47.13,
        },
        {
          left: 61.13,
        },
        {
          left: 68.43,
        },
        {
          left: 83.03,
        },
        {
          left: 90.33,
        },
      ]
    }
  },
  methods: {},
  mounted() {
  }
}
</script>
<style lang="less" scoped>


.bg {
  background-image: url("~@/assets/board/车间监控系统 - 02.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.title1 {
  position: absolute;
  top: 1%;
  left: 50%;
  font-weight: 700;
  letter-spacing: 0.1vw;
  font-size: 2.1vw;
  color: #fff;
  transform: translateX(-50%);
}


.floorNum {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 96.2%;
  width: 4.6%;
  height: 2.4%;
  color: #fff6;
  text-align: center;
  line-height: 2.4vh;
  font-size: 1.5vh;
}

.floorNum1 {
  background-image: url("~@/assets/board/楼层-左背景.png");
  left: 35.5%;
}

.floorNum2 {
  background-image: url("~@/assets/board/楼层-左背景 选中.png");
  left: 39.9%;
  color: #fff;
}

.floorNum3 {
  background-image: url("~@/assets/board/楼层-左背景.png");
  left: 44.3%;
}

.floorNum4 {
  background-image: url("~@/assets/board/楼层-右背景.png");
  left: 51%;
}

.floorNum5 {
  background-image: url("~@/assets/board/楼层-右背景.png");
  left: 55.4%;
}

.floorNum6 {
  background-image: url("~@/assets/board/楼层-右背景.png");
  left: 59.8%;
}

@keyframes example {
  from {
    bottom: 7%
  }
  to {
    bottom: -30%
  }
}

@keyframes example1 {
  from {
    bottom: 0%;
  }
  to {
    bottom: -18.5%
  }
}

.arrows {
  .oneAnR {
    position: absolute;
    width: 6%;
    height: 10.5%;
    top: 25.6%;
    left: 15%;
    overflow: hidden;

    .oneAn {
      position: absolute;
      width: 100%;
      height: 13vh;
      bottom: 7%;
      animation-name: example;
      animation-duration: 4s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
  }

  .twoAnR {
    position: absolute;
    width: 6%;
    height: 34.5%;
    top: 37.5%;
    left: 15%;
    overflow: hidden;

    .twoAn {
      position: absolute;
      width: 100%;
      height: 40vh;
      bottom: 0;
      animation-name: example1;
      animation-duration: 4s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
  }

  .arrow, .wx, .wxh, .box {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 0.5vw;
  }

  .wxh {
    width: 0.6vw;
  }

  .arrow {
    background-image: url("~@/assets/board/箭头 下2.png");
    height: 2.5vh;
  }

  .wx {
    background-image: url("~@/assets/board/蚊香1.png");
    height: 0.5vw;
  }

  .wxh {
    background-image: url("~@/assets/board/蚊香盒.png");
    height: 0.6vw;
  }

  .box {
    background-image: url("~@/assets/board/箱子.png");
    transform: translateX(-0.15vw);
    width: 0.82%;
    height: 0.82vw;
  }
}


.output {
  background-image: url("~@/assets/board/弹窗3-产量2.png");
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 4.3%;
  height: 3.1%;
  top: 27%;

  span {
    display: inline-block;
    width: 100%;
    height: 2.4vh;
    color: #fff;
    text-align: center;
    line-height: 2.4vh;
    font-size: 0.7vw;
  }
}


.info {
  position: absolute;
  width: 4%;
  height: 50%;


  &:hover .infoModel, &:hover .infoModel1 {
    display: inline-block;
  }

  .infoModel, .infoModel1 {
    position: absolute;
    top: 0%;
    left: -295%;
    width: 14.1vw;
    height: 14.7vh;
    color: #fff;
    display: none;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("~@/assets/board/弹窗1-设备信息.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .title {
      position: absolute;
      top: 7%;
      font-size: 1vw;
      letter-spacing: 3px;
    }

    .equipmentOutput {
      color: #fff;
      position: absolute;
      top: 45%;
      font-size: 0.9vw;
      letter-spacing: 3px;
    }

    .equipmentInfo {
      color: #fff;
      position: absolute;
      top: 70%;
      font-size: 0.9vw;
      letter-spacing: 3px;
    }
  }

  .infoModel {

    .title {
      left: 7%;
    }

    .equipmentOutput {
      left: 7%;
    }

    .equipmentInfo {
      left: 7%;
    }
  }

  .infoModel1 {
    left: 60%;

    .title {
      right: 7%;
    }

    .equipmentOutput {
      left: 25%;
    }

    .equipmentInfo {
      left: 25%;
    }

    &::before {
      transform-style: preserve-3d;
      transform: rotateY(180deg)
    }
  }
}

.equipment {
  position: absolute;
  top: 72%;
  width: 4%;
  height: 6%;

  &:hover .equipmentName, &:hover .equipmentName1 {
    display: inline-block;
  }

  .equipmentName, .equipmentName1 {
    position: absolute;
    width: 12.7vw;
    height: 4.4vh;
    display: none;

    span {
      position: absolute;
      line-height: 4.4vh;
      color: #fff;
      font-size: 1vw;
      letter-spacing: 3px;
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("~@/assets/board/弹窗2-名称.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }

  .equipmentName {
    top: -10%;
    left: -255%;

    span {
      left: 5%;
    }
  }

  .equipmentName1 {
    top: -10%;
    left: 45%;

    span {
      right: 5%;
    }

    &::before {

      transform-style: preserve-3d;
      transform: rotateY(180deg)
    }
  }
}


@keyframes arrowAn1 {
  from {
    top: -100%;
  }
  to {
    top: 100%;
  }
}

.arrows1 {
  .arrow {
    position: absolute;
    width: 0.5vw;
    height: 2.5vh;
    overflow: hidden;

    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url("~@/assets/board/箭头 下2.png");
      animation-name: arrowAn1;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
  }
}

.bottomArrows {
  .arrow {
    position: absolute;
    width: 0.5vw;
    height: 2.5vh;
    overflow: hidden;
    transform: rotate(90deg);

    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url("~@/assets/board/箭头 下2.png");
      animation-name: arrowAn1;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
  }
}

</style>