root/wms_base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
gengby
2022-06-27 19:25:41 +08:00
parent d8f10d2761
commit 8bc7f54bbc
1841 changed files with 180676 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

261
wcs/qd/src/views/home2.vue Normal file
View File

@@ -0,0 +1,261 @@
<template>
<div style="background-color: rgb(240, 242, 245)">
<el-row :gutter="10">
<el-col v-for="agvObj in agvList" :span="24/agvList.length">
<div v-if="agvObj.car_no === '' || agvObj.car_no == null" class="grid-content bg-purple" style="height: 190px;background-color: white;border-bottom:3px solid rgb(240, 242, 245)">
请添加更多AGV设备
</div>
<div v-if="agvObj.car_no !== '' && agvObj.car_no != null" class="grid-content bg-purple" style="height: 190px;background-color: white;border-bottom:3px solid rgb(240, 242, 245)">
<el-row>
<el-col :span="8">
<img
:src="require('../assets/acs/home_agv.png')"
alt=""
width="50px"
height="50px;"
style="margin-top: 20px;margin-left: 50px; vertical-align:bottom;transform: rotate(0deg);"
>
</el-col>
<el-col :span="16">
<div class="grid-content bg-purple" style="height: 70px; font-size: 30px; text-align: center;line-height: 70px;">{{ agvObj.car_no }}</div>
</el-col>
</el-row>
<el-row>
<div class="grid-content bg-purple" style="height: 40px;">
<el-col :span="8" style="line-height: 40px; text-align: center">
电量：
</el-col>
<el-col :span="16">
<el-progress v-if="agvObj.electricity<=30" :text-inside="true" :stroke-width="25" :percentage="agvObj.electricity" status="exception" style="margin-top: 7px; margin-right: 5px;" />
<el-progress v-if="agvObj.electricity>30 && agvObj.electricity<100" :text-inside="true" :stroke-width="25" :percentage="agvObj.electricity" status="warning" style="margin-top: 7px; margin-right: 5px;" />
<el-progress v-if="agvObj.electricity == 100" :text-inside="true" :stroke-width="25" :percentage="agvObj.electricity" status="success" style="margin-top: 7px; margin-right: 5px;" />
</el-col>
</div>
</el-row>
<el-row>
<div class="grid-content bg-purple" style="height: 40px;">
<el-col :span="8" style="line-height: 40px; text-align: center">
状态：
</el-col>
<el-col :span="16" style="line-height: 40px; text-align: center">
{{ agvObj.status_name }}
</el-col>
</div>
</el-row>
<el-row>
<div class="grid-content bg-purple" style="height: 40px;">
<el-col :span="8" style="line-height: 40px; text-align: center">
报警：
</el-col>
<el-col :span="2" :offset="6" style="line-height: 40px; text-align: center">
<div v-if="agvObj.flag==='0'" style="border-radius: 50%;background-color: green;height: 23px; margin-top: 5px;" />
<div v-if="agvObj.flag==='1'" style="border-radius: 50%;background-color: #ff0000;height: 23px; margin-top: 5px;" />
</el-col>
</div>
</el-row>
</div>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="6">
<div class="grid-content bg-purple" style="background-color: white">
<el-row>
<el-col :span="24">
<div class="grid-content bg-purple-light" style="height: 190px; border-bottom: 3px solid rgb(240, 242, 245)">
<el-row>
<div class="grid-content bg-purple" style="height: 70px; font-size: 30px; text-align: center;line-height: 70px;">任务统计（当天）</div>
</el-row>
<el-row>
<div class="grid-content bg-purple" style="height: 40px;">
<el-col :span="8" style="line-height: 40px; text-align: center">
任务总数：
</el-col>
<el-col :span="16" style="line-height: 40px; text-align: center">
{{ task.total_num }}
</el-col>
</div>
</el-row>
<el-row>
<div class="grid-content bg-purple" style="height: 40px;">
<el-col :span="8" style="line-height: 40px; text-align: center">
完成任务：
</el-col>
<el-col :span="16" style="line-height: 40px; text-align: center">
{{ task.finish_num }}
</el-col>
</div>
</el-row>
<el-row>
<div class="grid-content bg-purple" style="height: 40px;">
<el-col :span="8" style="line-height: 40px; text-align: center">
取消任务：
</el-col>
<el-col :span="16" style="line-height: 40px; text-align: center">
{{ task.cancel_num }}
</el-col>
</div>
</el-row>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="grid-content bg-purple" style="height: 190px;">
<el-row>
<div class="grid-content bg-purple" style="height: 70px; font-size: 30px; text-align: center;line-height: 70px;">指令统计（当天）</div>
</el-row>
<el-row>
<div class="grid-content bg-purple" style="height: 40px;">
<el-col :span="8" style="line-height: 40px; text-align: center">
当前指令：
</el-col>
<el-col :span="16" style="line-height: 40px; text-align: center">
{{ inst.total_num }}
</el-col>
</div>
</el-row>
<el-row>
<div class="grid-content bg-purple" style="height: 40px;">
<el-col :span="8" style="line-height: 40px; text-align: center">
取消指令：
</el-col>
<el-col :span="16" style="line-height: 40px; text-align: center">
{{ inst.cancel_num }}
</el-col>
</div>
</el-row>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="18" style="background:#fff;">
<div class="chart-wrapper">
<bar-chart :chart-data="barChartData" />
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import BarChart from '@/components/Echarts/BarChart2'
export default {
name: 'Dashboard',
components: {
BarChart
},
data() {
return {
barChartData: {
expectedData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
actualData: [10, 52, 200, 334, 500, 330, 220]
},
agvList: [
{
id: 1,
name: 'agv1',
electricity: 100,
status_name: '待机',
flag: '0'
},
{
id: 2,
name: 'agv2',
electricity: 50,
status_name: '有任务',
flag: '1'
},
{
id: 3,
name: 'agv3',
electricity: 60,
status_name: '充电中',
flag: '1'
},
{
id: 4,
name: 'agv4',
electricity: 80,
status_name: '充电中',
flag: '0'
}
],
task: {
total_num: 50,
finish_num: 40,
cancel_num: 10
},
inst: {
total_num: 50,
cancel_num: 10
},
url: '/src/assets/acs/home_agv.png'
}
},
created() {
this.webSocket()
},
methods: {
webSocket() {
const that = this
if (typeof (WebSocket) === 'undefined') {
this.$notify({
title: '提示',
message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器！',
type: 'warning',
duration: 0
})
} else {
const id = 'home_data'
// 获取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) {
// debugger
console.log(msg)
const data = JSON.parse(msg.data)
that.agvList = data.msg.agv_rows
that.task = data.msg.task_jo
that.inst = data.msg.inst_jo
that.barChartData = data.msg.bar_jo
}
// 监听socket错误
this.socket.onerror = function() {
that.$notify({
title: '错误',
message: '服务器错误，无法接收实时报警信息',
type: 'error',
duration: 0
})
}
// 监听socket关闭
this.socket.onclose = function() {
console.log('WebSocket已关闭')
}
}
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>