You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
261 lines
9.6 KiB
261 lines
9.6 KiB
<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: [
|
|
{
|
|
car_no: 1,
|
|
name: 'agv1',
|
|
electricity: 100,
|
|
status_name: '待机',
|
|
flag: '0'
|
|
},
|
|
{
|
|
car_no: 2,
|
|
name: 'agv2',
|
|
electricity: 50,
|
|
status_name: '有任务',
|
|
flag: '1'
|
|
},
|
|
{
|
|
car_no: 3,
|
|
name: 'agv3',
|
|
electricity: 60,
|
|
status_name: '充电中',
|
|
flag: '1'
|
|
},
|
|
{
|
|
car_no: 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>
|
|
|