添加页面

src/router/index.js

@@ -30,6 +30,8 @@ import Layout from '@/layout'
 
 // 公共路由
 export const constantRoutes = [
+  {path: '/cs', component: () => import('@/views/cs/index.vue')},
+  {path: '/cs2', component: () => import('@/views/cs/index2.vue')},
   {
     path: '/redirect',
     component: Layout,

src/views/cs/index.vue

@@ -0,0 +1,694 @@
+<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>

src/views/cs/index2.vue

@@ -0,0 +1,472 @@
+<template>
+  <div>
+    <div class="bg">
+      <div class="title1">白坯车间生产监控看板</div>
+      <div class="subTitle" style="left: 27%">成型区</div>
+      <div class="subTitle" style="left: 48.9%;">烘房区</div>
+      <div class="subTitle" style="left: 70.8%;">收坯区</div>
+      <div class="floorNum floorNum1">1F</div>
+      <div class="floorNum floorNum2" @click="$router.push('/cs')">2F</div>
+      <div class="floorNum floorNum3">3F</div>
+      <div class="floorNum floorNum4">4F</div>
+      <div class="floorNum floorNum5">5F</div>
+      <div class="floorNum floorNum6">6F</div>
+      <div v-if="isRun.includes(1)">
+        <div class="arrow" style="top: 34%;left: 22.1%;transform: rotate(15deg);"></div>
+        <div class="arrow" style="top: 39.6%;left: 21.3%;transform: rotate(15deg);"></div>
+        <div class="arrow" style="top: 39.6%;left: 14.1%;transform: rotate(15deg);"></div>
+      </div>
+      <div v-if="isRun.includes(2)">
+        <div class="arrow" style="top: 57.4%;left: 18.6%;transform: rotate(15deg);"></div>
+        <div class="arrow" style="top: 57.4%;left: 10.9%;transform: rotate(15deg);"></div>
+        <div class="arrow" style="top: 66.4%;left: 17.3%;transform: rotate(15deg);"></div>
+        <div class="arrow" style="top: 66.4%;left: 9.2%;transform: rotate(15deg);"></div>
+      </div>
+      <div v-if="isRun.includes(3)">
+        <div class="arrow" style="top: 36.3%;left: 68.2%;transform: rotate(348deg);"></div>
+        <div class="arrow" style="top: 36.6%;left: 74.2%;transform: rotate(348deg);"></div>
+        <div class="arrow1" style="top: 42%;left: 68.7%;transform: rotate(348deg);"></div>
+        <div class="arrow1" style="top: 41.7%;left: 74.8%;transform: rotate(348deg);"></div>
+      </div>
+      <div v-if="isRun.includes(4)">
+        <div class="arrow" style="top: 54.9%;left: 70.1%;transform: rotate(348deg);"></div>
+        <div class="arrow" style="top: 54.7%;left: 76.6%;transform: rotate(348deg);"></div>
+        <div class="arrow1" style="top: 61.5%;left: 70.7%;transform: rotate(348deg);"></div>
+      </div>
+      <div class="box" style="top: 24.3%;left: 7.7%;"></div>
+      <div class="box" style="top: 30.6%;left: 7.7%;"></div>
+      <div class="box" style="top: 39.1%;left: 7.7%;"></div>
+      <div class="box" style="top: 45.4%;left: 7.7%;"></div>
+      <div class="box" style="top: 24.3%;left: 16.8%;"></div>
+      <div class="box" style="top: 30.6%;left: 16.8%;"></div>
+      <div class="box" style="top: 39.1%;left: 16.8%;"></div>
+      <div class="box" style="top: 45.4%;left: 16.8%;"></div>
+      <div class="box" style="top: 64%;left: 7.7%;"></div>
+      <div class="box" style="top: 70.3%;left: 7.7%;"></div>
+      <div class="box" style="top: 78.8%;left: 7.7%;"></div>
+      <div class="box" style="top: 85.1%;left: 7.7%;;"></div>
+      <div class="box" style="top: 64%;left: 16.8%;"></div>
+      <div class="box" style="top: 70.3%;left: 16.8%;"></div>
+      <div class="box" style="top: 78.8%;left: 16.8%;"></div>
+      <div class="box" style="top: 85.1%;left: 16.8%;"></div>
+      <div class="box" style="top: 26.8%;left: 78.5%;"></div>
+      <div class="box" style="top: 33.1%;left: 78.5%;"></div>
+      <div class="box" style="top: 38.8%;left: 78.5%;"></div>
+      <div class="box" style="top: 45.1%;left: 78.5%;"></div>
+      <div class="box" style="top: 26.8%;left: 85.3%;"></div>
+      <div class="box" style="top: 33.1%;left: 85.3%;"></div>
+      <div class="box" style="top: 38.8%;left: 85.3%;"></div>
+      <div class="box" style="top: 45.1%;left: 85.3%;"></div>
+      <div class="box" style="top: 64.3%;left: 78.5%;"></div>
+      <div class="box" style="top: 70.6%;left: 78.5%;"></div>
+      <div class="box" style="top: 76.3%;left: 78.5%;"></div>
+      <div class="box" style="top: 82.6%;left: 78.5%;"></div>
+      <div class="box" style="top: 64.3%;left: 85.3%;"></div>
+      <div class="box" style="top: 70.6%;left: 85.3%;"></div>
+
+      <div v-for="(i,k) in hfData" :class="i.isProd? 'hf1':'hf'" :style="`top: ${i.top}%;`">烘房{{ k + 1 }} （产量：10车）
+        <div v-if="i.isProd" class="inProd">
+          <svg t="1723106843182" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+               p-id="1501">
+            <path
+                d="M148.361503 873.076215a33.27639 33.27639 0 0 1 0.204778-47.150084 33.583556 33.583556 0 0 1 47.354862 0.204778A444.316592 444.316592 0 0 0 511.944454 957.291078c104.436669 0 203.293143-35.938501 280.852728-99.317224l35.580139-32.81564a33.583556 33.583556 0 0 1 47.303668 1.791806 33.27639 33.27639 0 0 1-1.791806 47.09889l-37.064778 34.146695A511.176537 511.176537 0 0 1 511.944454 1023.99744a511.43251 511.43251 0 0 1-363.582951-150.921225z m863.49671-248.497838a33.481167 33.481167 0 0 1-65.426501-14.385639 443.139119 443.139119 0 0 0-299.129144-518.394954A33.327584 33.327584 0 1 1 667.575568 28.265477a509.58951 509.58951 0 0 1 344.180256 596.3129zM275.374922 138.640701a443.036731 443.036731 0 0 0-198.788032 467.456481 33.481167 33.481167 0 0 1-65.52889 13.771306A509.999065 509.999065 0 0 1 279.624061 59.596478C328.821923 31.439533 431.415591-4.191801 507.336954 0.620477c8.549472-1.689417 17.96925 0 25.597223 5.938555 6.4505 5.119445 9.982917 12.081889 11.109194 20.273001 0.255972 2.713306-0.409556 5.221833-1.023889 8.037528a22.832723 22.832723 0 0 1-7.781555 12.133083L341.262173 263.759926a28.208139 28.208139 0 0 1-29.999945 6.91125 30.204723 30.204723 0 0 1-20.836139-23.703028l-15.051167-108.378641z m-4.965861 785.322793c-2.969278-0.46075-7.269611 31.740556-34.402668 17.918056-48.225168-24.624528-138.225003-97.781391-174.93142-168.736892a31.331001 31.331001 0 0 1-8.037528-24.931695c1.023889-8.191111 5.221833-14.846389 11.62114-19.965834 2.201361-1.638222 4.658695-2.354944 7.423194-3.276444a22.832723 22.832723 0 0 1 14.385639 0.409555l285.7162 54.675668c10.392472 1.945389 18.839556 10.750834 21.399278 22.116a30.204723 30.204723 0 0 1-9.573361 30.102334l-113.651669 91.689252z m716.671041-436.688619c1.126278 2.815694 30.921445-10.085306 33.020417 20.273 3.737195 54.061334-12.542639 168.890475-54.522084 236.825504a31.331001 31.331001 0 0 1-17.201334 19.812251 29.999945 29.999945 0 0 1-23.139889 0.307167c-2.559722-1.023889-4.402722-2.815694-6.655278-4.709889a22.832723 22.832723 0 0 1-7.013639-12.54264l-100.341113-273.071171a28.208139 28.208139 0 0 1 7.986333-29.692779 30.204723 30.204723 0 0 1 30.716668-7.320805l137.149919 50.170556z"
+                fill="#fff" p-id="1502">
+            </path>
+          </svg>
+          生产中
+        </div>
+        <div class="infoModel">
+          <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 class="equipment" v-for="i in equipmentData" :style="`top: ${i.top}%;left: ${i.left}%;`">
+        <div :class="i.isRight?`equipmentName1`:`equipmentName`"><span>设备名称</span></div>
+      </div>
+
+
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+      hfData: [
+        {
+          top: 27.5,
+          isProd: false
+        },
+        {
+          top: 29.1,
+          isProd: false
+        },
+        {
+          top: 30.6,
+          isProd: false
+        },
+        {
+          top: 33.6,
+          isProd: false
+        },
+        {
+          top: 35.1,
+          isProd: false
+        },
+        {
+          top: 36.8,
+          isProd: false
+        },
+        {
+          top: 40.1,
+          isProd: false
+        },
+        {
+          top: 41.8,
+          isProd: false
+        },
+        {
+          top: 45.3,
+          isProd: true
+        },
+        {
+          top: 48.9,
+          isProd: true
+        },
+        {
+          top: 50.8,
+          isProd: false
+        },
+        {
+          top: 54.7,
+          isProd: false
+        },
+        {
+          top: 58.7,
+          isProd: false
+        },
+        {
+          top: 60.7,
+          isProd: false
+        },
+        {
+          top: 62.7,
+          isProd: false
+        },
+        {
+          top: 67.1,
+          isProd: false
+        },
+      ],
+      isRun: [1, 2, 3, 4],
+      equipmentData: [
+        {
+          top: 25.5,
+          left: 8.4,
+          isRight: true
+        },
+        {
+          top: 50,
+          left: 5.5,
+          isRight: true
+        },
+        {
+          top: 29,
+          left: 62.5,
+          isRight: false
+        },
+        {
+          top: 49,
+          left: 64,
+          isRight: false
+        },
+      ]
+    }
+  },
+  methods: {},
+  mounted() {
+  }
+}
+</script>
+<style scoped lang="less">
+.bg {
+  background-image: url("~@/assets/board/车间监控系统 - 04.jpg");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.title1 {
+  position: absolute;
+  top: 1%;
+  left: 50%;
+  font-weight: 700;
+  letter-spacing: 0.1vw;
+  font-size: 2.1vw;
+  color: #fff;
+  transform: translateX(-50%);
+}
+
+.subTitle {
+  position: absolute;
+  top: 14%;
+  letter-spacing: 0.1vw;
+  font-size: 1.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%;
+}
+
+.floorNum3 {
+  background-image: url("~@/assets/board/楼层-左背景.png");
+  left: 44.3%;
+}
+
+.floorNum4 {
+  background-image: url("~@/assets/board/楼层-右背景 选中.png");
+  left: 51%;
+  color: #fff;
+}
+
+.floorNum5 {
+  background-image: url("~@/assets/board/楼层-右背景.png");
+  left: 55.4%;
+}
+
+.floorNum6 {
+  background-image: url("~@/assets/board/楼层-右背景.png");
+  left: 59.8%;
+}
+
+@keyframes arrowAn1 {
+  from {
+    top: -100%;
+  }
+  to {
+    top: 100%;
+  }
+}
+
+.arrow, .arrow1 {
+  position: absolute;
+  width: 0.5%;
+  height: 2.5%;
+  overflow: hidden;
+
+  &::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    animation-name: arrowAn1;
+    animation-duration: 2s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+  }
+}
+
+.arrow {
+  &::after {
+    background-image: url("~@/assets/board/箭头 下.png");
+  }
+}
+
+.arrow1 {
+  &::after {
+    animation-direction: reverse;
+    background-image: url("~@/assets/board/箭头 上.png");
+  }
+}
+
+.box {
+  position: absolute;
+  background-image: url("~@/assets/board/货架.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 1.2%;
+  height: 2.3%;
+  display: none;
+}
+
+.hf, .hf1 {
+  position: absolute;
+  left: 48%;
+  transform: translateX(-50%);
+  width: 30.6%;
+  height: 1%;
+  text-align: center;
+  font-size: 0.5vw;
+  line-height: 1vh;
+
+
+  &:hover .infoModel {
+    display: inline-block;
+  }
+
+  .infoModel {
+    position: absolute;
+    width: 14.1vw;
+    height: 14.7vh;
+    left: -10%;
+    top: -365%;
+    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%;
+      left: 7%;
+      font-size: 1vw;
+      letter-spacing: 3px;
+    }
+
+    .equipmentOutput {
+      color: #fff;
+      position: absolute;
+      top: 45%;
+      left: 7%;
+      font-size: 0.9vw;
+      letter-spacing: 3px;
+    }
+
+    .equipmentInfo {
+      color: #fff;
+      position: absolute;
+      top: 70%;
+      left: 7%;
+      font-size: 0.9vw;
+      letter-spacing: 3px;
+    }
+
+    //display: none;
+  }
+}
+
+.hf {
+  color: #000;
+}
+
+.hf1 {
+  color: #4e9b6d;
+
+  .inProd {
+    svg {
+      width: 0.4vw;
+      height: 0.4vw;
+    }
+
+    position: absolute;
+    left: 33%;
+    height: 100%;
+    top: 0%;
+    color: #fff;
+    padding: 0 0.2vw;
+    font-size: 0.4vw;
+    line-height: 1vh;
+    background-color: #559e70;
+    border-radius: 0.5vh;
+  }
+}
+
+.equipment {
+  position: absolute;
+  width: 25%;
+  height: 35%;
+
+  &:hover .equipmentName, &:hover .equipmentName1 {
+    display: inline-block;
+  }
+
+  .equipmentName, .equipmentName1 {
+    position: absolute;
+    width: 12.7vw;
+    height: 4.4vh;
+    display: none;
+
+    span {
+      position: absolute;
+      left: 5%;
+      line-height: 4.4vh;
+      color: #fff;
+      font-size: 0.9vw;
+      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: 4%;
+    left: -37%;
+  }
+
+  .equipmentName1 {
+    top: 9%;
+    left: 73%;
+
+    span {
+      text-align: right;
+      right: 5%;
+    }
+
+    &::before {
+      transform-style: preserve-3d;
+      transform: rotateY(180deg)
+    }
+  }
+}
+
+</style>