首页

src/pages/modules/homepage/two.vue

@@ -9,6 +9,7 @@
             <div class="n_body_container_wraper">
                 <div class="n_left_content">
                     <div class="status_wrap">
+                        <!-- 关机0 待机1 运行中2 故障3-->
                         <div class="status_item">
                             <div class="status_tip green"></div>
                             <div class="status_name">运行中/困料中</div>
@@ -84,8 +85,8 @@
                           <div class="sh_machine kongtuopan_2">
                             <img src="../../../images/workshop/mtp.png" alt="">
                           </div>
-                          <div class="sh_machine robot_1">
-                            <img src="../../../images/workshop/robot_4.png" alt="">
+                          <div class="sh_machine robot_1 rotate_1">
+                            <img src="../../../images/workshop/robot_cmd_green.png" alt="">
                           </div>
                           <div class="sh_machine weilan2">
                             <img src="../../../images/workshop/weilan_5.png" alt="">
@@ -99,8 +100,8 @@
                           <div class="sh_machine cmdssj_1 cmdssj_2">
                             <img src="../../../images/workshop/cmdssj.png" alt="">
                           </div>
-                          <div class="sh_machine robot_2">
-                            <img src="../../../images/workshop/robot_4.png" alt="">
+                          <div class="sh_machine robot_2 rotate_2">
+                            <img src="../../../images/workshop/robot_cmd_green.png" alt="">
                           </div>
                         </div>
                         <div class="machine_wrap cmd_wrap_1 cmd_wrap_2">
@@ -265,14 +266,14 @@
                                     <li>当前状态</li>
                                 </ul>
                                 <div class="scroll_container_1">
-                                    <vue-seamless-scroll :data="array1" :class-option="defaultOption1">
+                                    <vue-seamless-scroll :data="LastTenFailureList" :class-option="defaultOption1">
                                         <ul class="scroll-ul_1">
-                                            <li v-for="(e, i) in array1" :key="i">
-                                                <div class="scroll-ul_1_div">{{e.time}}</div>
-                                                <div class="scroll-ul_1_div">{{e.code}}</div>
-                                                <div class="scroll-ul_1_div">{{e.name}}</div>
-                                                <div class="scroll-ul_1_div">{{e.info}}</div>
-                                                <div class="scroll-ul_1_div">{{e.status}}</div>
+                                            <li v-for="(e, i) in LastTenFailureList" :key="i">
+                                                <div class="scroll-ul_1_div">{{e.failure_time}}</div>
+                                                <div class="scroll-ul_1_div">{{e.device_code}}</div>
+                                                <div class="scroll-ul_1_div">{{e.device_name}}</div>
+                                                <div class="scroll-ul_1_div">{{e.failure_info}}</div>
+                                                <div class="scroll-ul_1_div">{{e.device_status_name}}</div>
                                             </li>
                                         </ul>
                                     </vue-seamless-scroll>
@@ -287,13 +288,18 @@
 </template>
 
 <script>
+import { workshopCondition } from '@js/getData2'
 export default {
   name: 'two',
   data () {
     return {
+      interTime: this.$store.getters.setTime,
+      timer: null,
       myCharts1: '',
       myCharts2: '',
-      array1: [{time: '12-01 09:09:09', code: 'hn01', name: '混碾01', info: '机械故障 ', status: '故障'}, {time: '12-01 09:09:09', code: 'hn01', name: '混碾01', info: '机械故障 ', status: '故障'}, {time: '12-01 09:09:09', code: 'hn01', name: '混碾01', info: '机械故障 ', status: '故障'}, {time: '12-01 09:09:09', code: 'hn01', name: '混碾01', info: '机械故障 ', status: '故障'}, {time: '12-01 09:09:09', code: 'hn01', name: '混碾01', info: '机械故障 ', status: '故障'}, {time: '12-01 09:09:09', code: 'hn01', name: '混碾01', info: '机械故障 ', status: '故障'}]
+      DeviceConditionList: [],
+      LastMonthFailureList: [],
+      LastTenFailureList: []
     }
   },
   computed: {
@@ -311,15 +317,50 @@ export default {
     }
   },
   mounted () {
-    this.setEchart1()
-    this.setEchart2()
+    this._workshopCondition()
+    // this.refresh()
+  },
+  beforeDestroy () {
+    clearInterval(this.timer)
   },
   methods: {
+    refresh () {
+      this.timer = setInterval(() => {
+        this._workshopCondition()
+      }, this.interTime)
+    },
+    async _workshopCondition () {
+      let res = await workshopCondition()
+      if (res.code === 200) {
+        this.DeviceConditionList = [...res.result.DeviceConditionList]
+        this.LastMonthFailureList = [...res.result.LastMonthFailureList]
+        this.LastTenFailureList = [...res.result.LastTenFailureList]
+        this.setEchart1()
+        this.setEchart2()
+      }
+    },
     setEchart1 () {
       let colors = ['#30EBC9', '#E2BB0E', '#516282', '#F96700']
       let status = ['运行', '待机', '关机', '故障']
-      let barName = ['混料', '压制', '干燥', '包装']
-      let data = [[16, 14, 6, 9], [2, 1, 2, 3], [0, 0, 2, 2], [2, 1, 2, 3]]
+      // let barName = ['混料', '压制', '干燥', '包装']
+      // let data = [[16, 14, 6, 9], [2, 1, 2, 3], [0, 0, 2, 2], [2, 1, 2, 3]]
+      let barName = []
+      let data = []
+      let running = []
+      let standby = []
+      let shutdown = []
+      let failure = []
+      this.DeviceConditionList.map(el => {
+        barName.push(el.device_name)
+        running.push(el.running)
+        standby.push(el.standby)
+        shutdown.push(el.shutdown)
+        failure.push(el.failure)
+      })
+      data.push(running)
+      data.push(standby)
+      data.push(shutdown)
+      data.push(failure)
       let option = {
         grid: {
           top: 50,
@@ -427,16 +468,22 @@ export default {
       }
     },
     setEchart2 () {
-      let barName = ['机器5', '混碾5', '机器1', '混碾2', '压机1']
-      let barData = [6, 7, 8, 9, 10]
+      // let barName = ['机器5', '混碾5', '机器1', '混碾2', '压机1']
+      // let barData = [6, 7, 8, 9, 10]
+      let barName = []
+      let barData = []
+      this.LastMonthFailureList.map(el => {
+        barName.push(el.device_name)
+        barData.push(el.failure)
+      })
       let maxNum = 0
       for (let i = 0; i < barData.length; i++) {
         if (barData[i] > maxNum) {
           maxNum = barData[i]
         }
       }
-
-      var option = {
+      maxNum = Math.ceil(maxNum / 5) * 5
+      let option = {
         grid: {
           top: 5,
           left: 0,
@@ -530,7 +577,7 @@ export default {
               distance: 70,
               align: 'right',
               formatter: function (params) {
-                return params.data.realValue + ' 台'
+                return params.data.realValue + ' 次'
               },
               color: '#fff',
               fontSize: 15
@@ -778,9 +825,15 @@ export default {
   top: 0
   left: 0
   .robot_1
-    width: 20%;
-    left: 38%;
-    top: 0
+    left: 48%;
+    top: 10%;
+    width 1%
+    height 1%
+    transform: rotate(-90deg)
+    img
+      width: 2000%;
+      top: -2000%;
+      left: -1000%;
   .kongtuopan_1
     width 26%
     top 3%
@@ -821,10 +874,16 @@ export default {
     img
       transform rotate(0deg)
 .robot_2
-    width: 20%;
-    left: 38%;
     top: auto;
-    bottom: 12%
+    bottom: -13%
+    left: 48%;
+    width 1%
+    height 1%
+    transform: rotate(-90deg)
+    img
+      width: 2000%;
+      top: -2000%;
+      left: -1000%;
 .cmd_wrap_2
   left 38%
 .liu_wrap
@@ -935,4 +994,36 @@ export default {
   left: 76%;
   top: 58%;
   transform: rotate(-90deg);
+.rotate_1
+  animation rotate_1 1.5s linear 1.5s infinite alternate-reverse
+@keyframes rotate_1 {
+    0% {
+      transform: rotateZ(-90deg)
+    }
+    10% {
+        transform: rotateZ(-90deg)
+    }
+    90% {
+        transform: rotateZ(-180deg)
+    }
+    100% {
+        transform: rotateZ(-180deg)
+    }
+}
+.rotate_2
+  animation rotate_2 1.5s linear 1.5s infinite alternate-reverse
+@keyframes rotate_2 {
+    0% {
+      transform: rotateZ(0deg)
+    }
+    10% {
+        transform: rotateZ(0deg)
+    }
+    90% {
+        transform: rotateZ(-90deg)
+    }
+    100% {
+        transform: rotateZ(-90deg)
+    }
+}
 </style>