huanglingchen
/
device-pad
0
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
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.
1 Commit
1 Branch
15 MiB
 
 
 
 
Tree: bb99579534
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'bb99579534'
${ noResults }
device-pad/components/controlPage/index.vue

497 lines
12 KiB
Raw Blame History

<template>
<view class="deviceInfo">
<view class="deviceContent">
<view class="infoShow">
<view class="deviceitle info">设备数据</view>
<view class="deivceData">
<view class='left'>
<view class="left_top">
<view>
<span>设备状态：</span>
<image class="Icon" :src="deviceData.lightFlag==0?normalIcon:errorIcon"/>
</view>
<view>
<span>自动对接：</span>
<image class="Icon" :src="deviceData.autoDockLightFlag==0?errorIcon:normalIcon"/>
</view>
<view>
<span>急停有效：</span>
<image class="Icon" :src="deviceData.stopLightFlag==0?errorIcon:normalIcon"/>
</view>
<view>
<span>自动装填：</span>
<image class="Icon" :src="deviceData.autoFillLightFlag==0?errorIcon:normalIcon"/>
</view>
<view>
<span>控制模式：</span>
<span>{{deviceData.ctrlFlag==1?'自动':'手动'}}</span>
</view>
<view>
<span>自动退货：</span>
<image class="Icon" :src="deviceData.autoReturnLightFlag==0?errorIcon:normalIcon"/>
</view>
</view>
<view class="left-bottom">
<view>
<view style="width: 25%;">设备状态:</view>
<view>
<image class="Icon" :src="normalIcon"/>：
<span>正常</span>
</view>
<view>
<image class="Icon" :src="errorIcon"/>：
<span>异常</span>
</view>
</view>
<view>
<view style="width: 25%;">急停有效:</view>
<view >
<image class="Icon" :src="normalIcon"/>：
<span>有效</span>
</view>
<view >
<image class="Icon" :src="errorIcon"/>：
<span>无效</span>
</view>
</view>
<view>
<view style="width: 25%;">自动对接:</view>
<view>
<image class="Icon" :src="normalIcon"/>：
<span>有动作</span>
</view>
<view >
<image class="Icon" :src="errorIcon"/>：
<span>无动作</span>
</view>
</view>
<view>
<view style="width: 25%;">自动装填:</view>
<view >
<image class="Icon" :src="normalIcon"/>：
<span>有动作</span>
</view>
<view >
<image class="Icon" :src="errorIcon"/>：
<span>无动作</span>
</view>
</view>
<view>
<view style="width: 25%;">自动退货:</view>
<view >
<image class="Icon" :src="normalIcon"/>：
<span>有动作</span>
</view>
<view >
<image class="Icon" :src="errorIcon"/>：
<span>无动作</span>
</view>
</view>
</view>
</view>
<view class="right">
<view class="cameraInfo">
<view style="width: 22%;">
<span class="infoTitle">设备在线状态：</span>
<span class="detail">{{deviceData.isOnline?'在线':'不在线'}}</span>
</view>
<view style="width: 22%;">
<span class="infoTitle">相机1状态：</span>
<span class="detail">{{cameraState(deviceData.cameraOneState)}}</span>
</view>
<view style="width: 22%;">
<span class="infoTitle">相机2状态：</span>
<span class="detail">{{cameraState(deviceData.cameraTwoState)}}</span>
</view>
</view>
<view class="directionInfo">
<view style="width: 22%;">
<span class="infoTitle">X方向距离：</span>
<span class="detail">{{deviceData.xAxisDistance}}mm</span>
</view>
<view style="width: 22%;">
<span class="infoTitle">Y方向距离：</span>
<span class="detail">{{deviceData.yAxisDistance}}mm</span>
</view>
<view style="width: 22%;">
<span class="infoTitle">Z方向距离：</span>
<span class="detail">{{deviceData.zAxisDistance}}mm</span>
</view>
</view>
<view class="angleInfo">
<view style="width: 22%;">
<span class="infoTitle" >滚转角度：</span>
<span >{{deviceData.horizontalTurnAngle?deviceData.horizontalTurnAngle:'0'}}°</span>
</view>
<view style="width: 22%;">
<span class="infoTitle" >俯仰角度：</span>
<span >{{deviceData.upDownAngle?deviceData.upDownAngle:'0'}}°</span>
</view>
<view style="width: 22%;">
<span class="infoTitle" >方位角度：</span>
<span class="detail">{{deviceData.directionAngle?deviceData.directionAngle:'0'}}°</span>
</view>
</view>
<view class="encoderInfo">
<view style="width: 28%;">
<span class="infoTitle" >编码器在线状态：</span>
<span class="detail">{{deviceData.encoderOnlineState==1?'在线':'离线'}}</span>
</view>
<view style="width: 24%;">
<span class="infoTitle">编码器位置：</span>
<span class="detail">{{deviceData.encoderPosition}}mm</span>
</view>
<view style="width: 10%;opacity: 0;">
</view>
</view>
<view class="encoderInfo">
<view style="width: 28%;">
<span class="infoTitle">变频器在线状态：</span>
<span class="detail">{{deviceData.vfdOnlineState==1?'在线':'离线'}}</span>
</view>
<view style="width: 24%;">
<span class="infoTitle">变频器故障码：</span>
<span class="detail">{{deviceData.vfdFaultCode}}</span>
</view>
<view style="width: 10%;opacity: 0;">
</view>
</view>
<view class="angleInfo">
<view style="width: 28%;">
<span class="infoTitle">电机实际运行电流：</span>
<span class="detail">{{deviceData.trueEleCurrent}}</span>
</view>
<view style="opacity: 0;">
</view>
<view style="opacity: 0;">
</view>
</view>
</view>
</view>
</view>
<view class="controlButton">
<view class="deviceitle control">设备控制</view>
<view class="controlContent">
<view @click="controlDevice(1)">对接</view>
<view @click="controlDevice(2)">装填</view>
<view @click="controlDevice(3)">退货</view>
<view @click="controlDevice(4)">急停</view>
<view @click="controlDevice(5)">恢复</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {httpPost} from '../../utils/requset.js';
export default{
props:{
Data:{
type:Object
}
},
data(){
return{
deviceData:{
trueEleCurrent:'', //电机实际运行电流
vfdOnlineState:'', //变频器在线状态
vfdFaultCode: 1,//变频器故障码
encoderPosition: 100,//编码器位置，单位mm
encoderOnlineState: 0,//编码器在线状态：0-离线，1-在线
upDownAngle:'', //俯仰角度
directionAngle: 100,//方位角度，单位°
horizontalTurnAngle: 100,//滚装角度，单位°
cameraOneState: 1,//相机1状态：0:正常，1：通讯异常，2：无图像，3：光强饱和，4：缺少目标点
cameraTwoState: 1,//相机2状态：0:正常，1：通讯异常，2：无图像，3：光强饱和，4：缺少目标点
yAxisDistance: 100,//Y方向距离，单位mm
xAxisDistance: 100,//X方向距离，单位mm
zAxisDistance: 100,//Z方向距离，单位mm
isOnline: false,//在线状态：true-在线、false
autoDockLightFlag: 0,//自动对接：0：无动作、1：有动作
stopLightFlag: 0,//急停有效：0：无效、1：有效
autoReturnLightFlag: 0,//自动退货： 0：无动作、1：有动作
autoFillLightFlag: 0,//自动装填： 0：无动作、1：有动作
ctrlFlag: 0,//控制模式：0-手动、1-自动
lightFlag: 1,//设备状态：0-正常、1-异常
},
errorIcon:'/static/image/error.png',
normalIcon:'/static/image/normal.png'
}
},
methods:{
controlDevice(value){
console.log(value)
httpPost({
url:`/zhxx/dt/horizonLoadIControl/${value}`,
data:{}
}).then((res)=>{
if(res.code==200){
uni.showToast({
title: res.msg,
icon: "success",
duration: 1000
})
}else{
uni.showToast({
title: res.msg?res.msg:'请求失败',
icon: "error",
duration: 1000
})
}
}).catch((Error)=>{
// console.log(Error)
uni.showToast({
title: Error,
icon: "error",
duration: 1000
})
})
}
},
computed:{
cameraState(){
return function(value){
let cameraData='';
switch(value){
case 0:
cameraData='正常';
break;
case 1:
cameraData='通讯异常';
break;
case 2:
cameraData='无图像';
break;
case 3:
cameraData='光强饱和';
break;
case 4:
cameraData='缺少目标点';
break;
}
return cameraData;
}
}
},
watch:{
Data:{
handler(newVal,oldVal){
if(newVal){
this.deviceData=newVal
}
}
}
}
}
</script>
<style scoped>
.deviceInfo{
width: 100%;
height: 90%;
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.deviceContent{
width: 98%;
height: 98%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.infoShow{
width: 100%;
height: 72%;
border-radius: 10px;
background-color: #ffffff;
}
.controlButton{
width: 100%;
height: 26%;
border-radius: 10px;
background-color: #ffffff;
}
.deviceitle{
width: 100%;
border-bottom: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
font-size: 28px;
font-weight: bold;
letter-spacing: 10px;
background-color: rgb(204, 204, 204,0.4);
border-radius: 10px 10px 0 0;
}
.info{
height: 10%;
}
.control{
height: 28%;
}
.deivceData{
width: 100%;
height: 88%;
display: flex;
align-items: center;
}
.left{
width: 32%;
height: 100%;
border-right: 1px solid #ccc;
font-size: 18px;
}
.left_top{
width: 100%;
height: 58%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
border-bottom: 1px solid #ccc;
}
.left_top>view{
width: 40%;
height: 20%;
display: flex;
justify-content: center;
align-items: center;
border:1px solid #ccc;
border-radius: 10px;
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.12);
}
.Icon{
width: 24px;
height: 24px;
}
.left-bottom{
width: 100%;
height: 36%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
font-size: 16px;
padding-top: 2%;
}
.left-bottom>view{
width: 70%;
display: flex;
justify-content: space-between;
align-items: center;
}
.left-bottom>view>view{
width: 32%;
display: flex;
justify-content: start;
align-items: center;
}
.controlContent{
width: 100%;
height: 74%;
display: flex;
justify-content: space-around;
align-items: center;
}
.controlContent>view{
width: 12%;
height: 40%;
background-color: #42B983;
color: #ffffff;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
.controlContent>view:active{
opacity: 0.6;
}
.right{
width: 68%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
font-size: 18px;
}
.cameraInfo,.directionInfo,.angleInfo,.encoderInfo{
width: 96%;
height: 11%;
display: flex;
justify-content: space-between;
align-items: center;
}
.cameraInfo>view,.directionInfo>view,.angleInfo>view,.encoderInfo>view{
width: 20%;
height: 100%;
display: flex;
justify-content: start;
align-items: center;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.12);
padding: 0 3%;
}
.infoTitle{
/* width: 52%; */
display: flex;
justify-content: center;
align-items: center
}
.detail{
/* width: 28%; */
/* background-color: #ccc; */
}
</style>