262 lines
9.6 KiB
Vue
262 lines
9.6 KiB
Vue
<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>
|