监控

wcs/qd/src/views/acs/monitor/device/XJDeviceMonitor.vue

@@ -0,0 +1,224 @@
+<template>
+  <el-dialog
+    title="监控详情"
+    append-to-body
+    :visible.sync="dialogVisible"
+    @open="open"
+    @close="close"
+   fullscreen
+  >
+    <el-row :gutter="20">
+      <el-col :span="18" style="border: 1px solid white">
+        <span />
+      </el-col>
+      <el-col :span="6" style="margin-bottom: 20px">
+<!--        <span style="float: right">
+           <el-button icon="el-icon-close" size="mini" type="info" @click="dialogVisible = false">返 回</el-button>
+        </span>-->
+      </el-col>
+    </el-row>
+    <el-card class="box-card" shadow="never">
+      <el-form ref="form" disabled :inline="true" :model="form" :rules="rules" size="mini" label-width="80px">
+        <el-form-item label="设备编码">
+          <el-input v-model="device_code" placeholder="自动生产" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="设备名称" prop="dtl_count">
+          <el-input v-model="device_name" style="width: 200px;" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <div class="crud-opts2" style="margin-top: 30px;margin-bottom: 15px">
+      <el-form ref="form" disabled :inline="true" :model="form" :rules="rules" size="mini" label-width="200px">
+        <el-form-item label="心跳">
+          <el-input v-model="form.heartbeat" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="工作模式">
+          <el-input v-model="form.mode" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="故障">
+          <el-input v-model="form.error" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="故障次数">
+          <el-input v-model="form.error_num" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="待机时间(调试)">
+          <el-input v-model="form.ready_time" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="生产时间">
+          <el-input v-model="form.running_time" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="故障时间">
+          <el-input v-model="form.error_time" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="温度">
+          <el-input v-model="form.temperature" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="当前生产产品编号">
+          <el-input v-model="form.material" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="缺料信号">
+          <el-input v-model="form.lack_material" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="上料数量">
+          <el-input v-model="form.feeding_qty" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="下料数量">
+          <el-input v-model="form.blanking_qty" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="当前生产合格品数量">
+          <el-input v-model="form.qualified_qty" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="当前生产不合格品数量">
+          <el-input v-model="form.unqualified_qty" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="生产完成">
+          <el-input v-model="form.finish" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="任务号">
+          <el-input v-model="form.task" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="设备暂停">
+          <el-input v-model="form.pause" style="width: 200px;" />
+        </el-form-item>
+      </el-form>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { crud } from '@crud/crud'
+
+export default {
+  name: 'XJDeviceMonitor',
+  components: {},
+  mixins: [crud()],
+  props: {
+    dialogShow: {
+      type: Boolean,
+      default: false
+    },
+    openParam: {
+      type: Object
+    }
+  },
+  dicts: [],
+  data() {
+    return {
+      dialogVisible: false,
+      form: {
+        heartbeat: '',
+        mode: '',
+        error: '',
+        error_num: '',
+        ready_time: '',
+        running_time: '',
+        error_time: '',
+        temperature: '',
+        material: '',
+        lack_material: '',
+        feeding_qty: '',
+        blanking_qty: '',
+        qualified_qty: '',
+        unqualified_qty: '',
+        finish: '',
+        task: '',
+        pause: ''
+      },
+      device_code: '',
+      device_name: '',
+      rules: {
+      }
+    }
+  },
+  watch: {
+    dialogShow: {
+      handler(newValue) {
+        this.dialogVisible = newValue
+      }
+    }
+  },
+  methods: {
+    open() {
+      this.webSocket()
+    },
+    close() {
+      this.$emit('AddChanged')
+    },
+    setForm(data) {
+      this.dialogVisible = true
+      this.form = data.data
+      this.device_code = data.device_code
+      this.device_name = data.device_name
+      // this.form = row
+    },
+    webSocket() {
+      const that = this
+      if (typeof (WebSocket) === 'undefined') {
+        this.$notify({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const id = 'xj_device_monitor'
+        // 获取token保存到vuex中的用户信息，此处仅适用于本项目，注意删除或修改
+        // 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送
+
+        // const wsUri = process.env.VUE_APP_WS_API + '/webSocket/' + id
+        const wsUri = window.g.prod.VUE_APP_BASE_API.replace('http', 'ws') + '/webSocket/' + id
+        this.socket = new WebSocket(wsUri)
+        // 监听socket打开
+        this.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+          // that.socket.send('测试客户端发送消息')
+        }
+
+        // 监听socket消息接收
+        this.socket.onmessage = function(msg) {
+          const list = JSON.parse(msg.data).msg.detail
+          // console.log(list)
+
+          for (const item of list) {
+            const obj = JSON.parse(JSON.stringify(item))
+            if (obj.device_code === that.device_code) {
+              that.form = obj.data
+              console.log(that.form)
+            }
+          }
+        }
+
+        // 监听socket错误
+        this.socket.onerror = function() {
+          that.$notify({
+            title: '错误',
+            message: '服务器错误，无法接收实时报警信息',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        this.socket.onclose = function() {
+          console.log('WebSocket已关闭')
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.crud-opts2 {
+  padding: 0 0;
+  display: -webkit-flex;
+  display: flex;
+  align-items: center;
+}
+.crud-opts2 .crud-opts-right2 {
+  margin-left: auto;
+  padding: 4px 4px;
+}
+.input-with-select  {
+  background-color: #fff;
+}
+</style>

wcs/qd/src/views/acs/monitor/device/index.vue

@@ -207,7 +207,7 @@
         <el-button type="primary" @click="saveBarcode">确 定</el-button>
       </div>
     </el-dialog>
-
+    <XJDeviceMonitor ref="child1"/>
   </div>
 </template>
 
@@ -217,12 +217,13 @@ import deviceCrud from '@/api/acs/device/device'
 import draggable from 'vuedraggable'
 import crud from '@/mixins/crud'
 import actorCrud from '@/api/acs/stage/actor'
+import XJDeviceMonitor from '@/views/acs/monitor/device/XJDeviceMonitor'
 
 export default {
   name: 'MonitorDevice',
   // 注册draggable组件
   components: {
-    draggable
+    draggable, XJDeviceMonitor
   },
   mixins: [crud],
   data() {
@@ -273,6 +274,8 @@ export default {
           this.dialogFormVisible3 = true
         } else if (clickObj.data.driver_type === 'hailiang_packer_station') {
           this.dialogFormVisible4 = true
+        } else if (clickObj.data.driver_type === 'hailiang_xj_plc_test') {
+          this.$refs.child1.setForm(clickObj)
         } else {
           this.dialogFormVisible = true
         }