统计任务看板

mes/qd/src/views/wms/sb/stat/task/bigScreen.vue

@@ -0,0 +1,128 @@
+<template>
+  <div style="border: 1px solid #938d8d;margin-left: 10px;margin-right: 10px;">
+    <el-row>
+      <el-col :span="12">
+        <div class="grid-content bg-purple"><h2 style="margin-left: 30px;padding-top: 10px;">统计任务看板</h2></div>
+      </el-col>
+
+      <el-col :span="12">
+        <div class="grid-content bg-purple-light">
+          <h2 style="text-align:right;margin-right: 140px;">{{ getTime }}</h2>
+        </div>
+        <div class="grid-content bg-purple-light">
+          <p style="text-align:right;margin-right: 110px;"><b>{{ getDate }}</b></p>
+        </div>
+
+      </el-col>
+    </el-row>
+    <br>
+    <br>
+    <div>
+      <!--表格渲染-->
+      <el-table
+        ref="table"
+        :data="tableData"
+        size="small"
+        style="width: 100%;"
+        border
+        :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
+      >
+        <el-table-column type="index" label="序号" width="55" align="center" />
+        <el-table-column prop="input_time" label="生成时间" />
+        <el-table-column prop="repair_code" label="任务号" />
+        <el-table-column prop="maintenancecycle" label="任务类型" />
+<!--        <el-table-column prop="" label="部门" />-->
+        <el-table-column prop="device_code" label="设备编码" />
+        <el-table-column prop="device_name" label="设备名称" />
+        <el-table-column prop="invstatus" label="状态" />
+        <el-table-column prop="real_start_date" label="开始时间" />
+        <el-table-column prop="real_end_date" label="结束时间" />
+      </el-table>
+
+      <!--分页组件-->
+
+    </div>
+  </div>
+
+</template>
+
+<script>
+import crud from '@/mixins/crud'
+
+export default {
+  name: 'BigscreenTask',
+  mixins: [crud],
+  data() {
+    return {
+      path: 'ws://localhost:8010/webSocket/20',
+      currentDate: new Date(),
+      getTime: '',
+      getDate: '',
+      tableData: []
+    }
+  },
+  created() {
+  },
+  mounted() {
+    // 定时器
+    const timer = setInterval(() => {
+      this.settime()// 你所加载数据的方法
+    }, 1000)
+    // 销毁定时器
+    this.$once('hook:beforeDestroy', () => {
+      clearInterval(timer)
+    })
+    this.init()
+  },
+  methods: {
+    settime() {
+      const _this = this
+      const yy = new Date().getFullYear()
+      const mm = new Date().getMonth() + 1
+      const dd = new Date().getDate()
+      const hh = new Date().getHours()
+      const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
+      const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
+      _this.getDate = yy + '年' + mm + '月' + dd + '日 ' + '星期' + '日一二三四五六'.charAt(new Date().getDay())
+      _this.getTime = hh + ':' + mf + ':' + ss
+    },
+    // webSocket
+    init: function() {
+      if (typeof (WebSocket) === 'undefined') {
+        alert('您的浏览器不支持socket')
+      } else {
+        // 实例化socket
+        this.socket = new WebSocket(this.path)
+        // 监听socket连接
+        this.socket.onopen = this.open
+        // 监听socket错误信息
+        this.socket.onerror = this.error
+        // 监听socket消息
+        this.socket.onmessage = this.getMessage
+      }
+    },
+    open: function() {
+      console.log('socket连接成功')
+    },
+    error: function() {
+      console.log('连接错误')
+    },
+    getMessage: function(msg) {
+      debugger
+      const data = JSON.parse(msg.data)
+      this.tableData = data.msg
+    },
+    send: function() {
+      // eslint-disable-next-line no-undef
+      this.socket.send(params)
+    },
+    close: function() {
+      console.log('socket已经关闭')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>