941 lines
30 KiB
Vue
941 lines
30 KiB
Vue
<template>
|
||
<div class="content-box">
|
||
<div class="container">
|
||
|
||
<div style="width:80%;height:800px">
|
||
<img :src='imgUrl' width="100%" height="100%"/>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import mqtt from "mqtt"; // mqtt协议
|
||
|
||
|
||
|
||
import axios from 'axios'
|
||
export default {
|
||
data() {
|
||
return {
|
||
hideBoxShow:true, //隐藏箱子按钮显示隐藏
|
||
closeStatus: null,
|
||
modelOthers: false,
|
||
componentShow: "",
|
||
isShowBtn: true, //菜单按钮隐藏
|
||
isShowBtn1: false, //菜单按钮显示
|
||
inputVal: "",
|
||
dateTime: this.$moment(new Date()).format("LL"),
|
||
nowTime: "",
|
||
weekday: this.$moment().format("dddd"),
|
||
ins: 0,
|
||
imgUrl:'',
|
||
btnPic: [
|
||
// require("@/assets/images/homeActive.png"),
|
||
// require("@/assets/images/battery.png"),
|
||
// require("@/assets/images/stock.png"),
|
||
// require("@/assets/images/productionInformation.png"),
|
||
// require("@/assets/images/equipment.png"),
|
||
// require("@/assets/images/operationMG.png"),
|
||
],
|
||
statusInfo: [
|
||
{
|
||
count: 15,
|
||
name: "穿梭车在线数量",
|
||
// icon: require("../assets/images/运行设备图标.png"),
|
||
color: "#01A8FC",
|
||
},
|
||
{
|
||
count: 26,
|
||
name: "任务数量",
|
||
// icon: require("../assets/images/故障设备图标.png"),
|
||
color: "#FDA401",
|
||
},
|
||
],
|
||
messageInfo: [],
|
||
orderList: [],
|
||
enterList: [],
|
||
stockInfo: [],
|
||
perCent: 0,
|
||
perCent1: 0,
|
||
perCent2: 0,
|
||
facToal: "",
|
||
wbContent:'',
|
||
wxContent:'',
|
||
inContent:'',
|
||
outContent:'',
|
||
containerDetails:"",
|
||
locdesc:'',
|
||
weatherItem:{},
|
||
loadingShow1:true,
|
||
carInfo:[], //小车信息
|
||
carName:'',
|
||
palletizerInfo:[], //码垛机信息
|
||
palletizerName:'',
|
||
destackerInfo:[], //拆垛机信息
|
||
destackerName:'',
|
||
hoistInfo:[], //提升机信息’
|
||
hoistName:'',
|
||
battaryStationInfo:[],//快换电池装置
|
||
battaryStationName:"",
|
||
conveyorInfo:[], //输送机信息
|
||
conveyorName:"",
|
||
};
|
||
},
|
||
mounted() {
|
||
setInterval(() => {
|
||
this.nowTime = this.$moment(new Date()).format("LTS");
|
||
}, 1000);
|
||
this.getMessage();
|
||
// 消息提醒
|
||
getfacMaintainRecord({ type: 0 }).then((res) => {
|
||
console.log("消息提醒",res.data)
|
||
// this.messageInfo = this.messageInfo.concat(JSON.parse(res.data.split('#')[0]));
|
||
this.messageInfo = res.data;
|
||
// this.messageInfo.push(JSON.parse(res.data.split('#')[0]))
|
||
//
|
||
});
|
||
// getfacKeepRecord({ type: 0 }).then((res) => {
|
||
// this.messageInfo = this.messageInfo.concat(res.data);
|
||
// console.log(this.messageInfo, ",,qweqw");
|
||
// // this.messageInfo.push(res.data[1])
|
||
// });
|
||
// this.getDataByMqtt()
|
||
this.getstatus();
|
||
this.getInhouse();
|
||
this.getOuthouse();
|
||
this.handleWather();
|
||
this.getDeviceStatusData()
|
||
},
|
||
created() {
|
||
this.testMqtt()
|
||
|
||
},
|
||
methods: {
|
||
// 货箱
|
||
async squareList() {
|
||
let arrList = await getInventoryStatus({ type: 3 });
|
||
getInventoryMessage({ type: 0 }).then((res) => {
|
||
// 货箱渲染
|
||
var arr = res.data;
|
||
console.log(arr, ",arr,,,");
|
||
console.log(arrList, ",,,arrList");
|
||
arr.forEach((item, index) => {
|
||
let obj = {
|
||
cId: index + 526,
|
||
parentName: "货箱",
|
||
name: `货箱${1 + index}`,
|
||
pos: [2971.08, 383.81, -3099.09],
|
||
size: [1, 1, 1],
|
||
rotate: [0, 0, 0],
|
||
wirePos: [item.LIE, item.LAYER, item.LINE],
|
||
affiliation: [],
|
||
type: "货箱",
|
||
visible: true,
|
||
passenger: [],
|
||
taskCode: -1,
|
||
PLTNUM: "",
|
||
VPLTNUM: "",
|
||
LOCNUM: item.LOCNUM,
|
||
LOCDESC: item.LOCDESC,
|
||
LOCSTORESTATUS: item.LOCSTORESTATUS,
|
||
ITEMCMBNUM: item.ITEMCMBNUM,
|
||
};
|
||
arrList.data.forEach((items) => {
|
||
if (item.LOCNUM == items.CURRLOC) {
|
||
obj.PLTNUM = items.PLTNUM;
|
||
obj.VPLTNUM = items.VPLTNUM;
|
||
obj.cId = items.PLTNUM
|
||
}else if(item.LOCNUM == items.DLOC){
|
||
obj.PLTNUM = items.PLTNUM;
|
||
obj.VPLTNUM = items.VPLTNUM;
|
||
obj.cId = items.PLTNUM
|
||
}
|
||
});
|
||
var tarpos = this.wireSYs(item);
|
||
obj.pos = tarpos;
|
||
item.LAYER==1?obj.pos[1] = 50.9:obj.pos[1] = 364.81;
|
||
if(item.ITEMCMBNUM == '6000'){
|
||
obj.parentName = '双箱_Empty'
|
||
}else{
|
||
obj.parentName = '双箱_Full'
|
||
}
|
||
if (item.LOCSTORESTATUS != "Free") {
|
||
modelResource.push(obj);
|
||
this.realObj.forEach((items) => {
|
||
if (obj.parentName === items.parentName) {
|
||
this.createNode(obj, this.modelarray);
|
||
this.models[obj.cId].s3([
|
||
1.3299999999999992, 2.6210000000000004, 1.33,
|
||
]);
|
||
this.models[obj.cId].cParentName = '货箱';
|
||
// this.models[obj.cId].setImage('box');
|
||
// this.models[317].setImage('box')
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
});
|
||
},
|
||
// 测试：mqtt测试
|
||
testMqtt() {
|
||
this.getDataByMqtt()
|
||
// 小车订阅
|
||
// for (let key in this.carId) {
|
||
// this.getDataByMqtt(
|
||
// // "ws:ht.mqtt.umayle.com:2022/mqtt",
|
||
// "ws:220.163.114.157:8083/mqtt",
|
||
// "Car" + key,
|
||
// this.carId[key]
|
||
// );
|
||
// }
|
||
// //输送机入库订阅
|
||
// for (let i = 0; i < this.convoyorCIdGroup.length; i++) {
|
||
// this.getDataByMqtt(
|
||
// "ws:220.163.114.157:8083/mqtt",
|
||
// "InConvoyor" + this.convoyorCIdGroup[i],
|
||
// this.convoyorCIdGroup[i]
|
||
// );
|
||
// }
|
||
|
||
// //输送机出库订阅
|
||
// for (let i = 0; i < this.outConvoyorCIdGroup.length; i++) {
|
||
// this.getDataByMqtt(
|
||
// "ws:220.163.114.157:8083/mqtt",
|
||
// "OUTConvoyor" + this.outConvoyorCIdGroup[i],
|
||
// this.outConvoyorCIdGroup[i]
|
||
// );
|
||
// }
|
||
|
||
// for (let key in this.BattaryArr) {
|
||
// this.getDataByMqtt(
|
||
// "ws:220.163.114.157:8083/mqtt",
|
||
// "Battary_Sation" + key,
|
||
// this.BattaryArr[key]
|
||
// );
|
||
// }
|
||
// // 升降机订阅elvArr
|
||
// for (let key in this.elvArr) {
|
||
// this.getDataByMqtt(
|
||
// "ws:220.163.114.157:8083/mqtt",
|
||
// "ELV" + key,
|
||
// this.elvArr[key]
|
||
// );
|
||
// }
|
||
// // 拆码跺机订阅
|
||
// for (let key in this.stampArr) {
|
||
// this.getDataByMqtt(
|
||
// "ws:220.163.114.157:8083/mqtt",
|
||
// "INCMD" + key,
|
||
// this.stampArr[key]
|
||
// );
|
||
// }
|
||
},
|
||
//模型加载等待
|
||
loadingShow(data){
|
||
this.loadingShow1 = data
|
||
},
|
||
// mqtt订阅（独立）
|
||
getDataByMqtt(url, topic, cIdNum) {
|
||
const clientId = "test_id_" + String(new Date().getTime()); // 用户名
|
||
const host = 'ws://172.16.1.168:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
|
||
const options = {
|
||
// 配置
|
||
// 测试：订阅本机IP
|
||
// host: host,
|
||
// port: port,
|
||
// host:"172.16.1.168:10086",
|
||
keepalive: 60, // 心跳时间，默认60s，设置为0禁用
|
||
username: 'admin', // 用户名（可选）
|
||
password: '123456', // 密码（可选）
|
||
clientId: clientId, // 客户端ID，默认随机生成
|
||
protocolId: "MQTT",
|
||
protocolVersion: 4,
|
||
clean: true, // false在离线时接收QoS1和2的消息
|
||
reconnectPeriod: 2000, // 重连间隔，默认1000毫秒
|
||
connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
|
||
will: {
|
||
// 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）
|
||
topic: "videoTest", // 要发布的主题
|
||
payload: "[MQTT-TEST] 遗嘱消息：连接异常断开！", // 要发布的消息
|
||
qos: 1, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次
|
||
retain: false, // 保留标志
|
||
},
|
||
};
|
||
if (this.mqttClient == undefined) {
|
||
this.mqttClient = mqtt.connect(host, options); // 连接
|
||
// const client = mqtt.connect(host, options); // 连接
|
||
// const client = mqtt.connect(host) // 连接
|
||
// 错误回调
|
||
console.log("this.mqttClient",this.mqttClient)
|
||
this.mqttClient.on("error", (err) => {
|
||
console.log("[MQTT-TEST] 连接错误：",err);
|
||
this.mqttClient.end();
|
||
});
|
||
// 重连回调
|
||
this.mqttClient.on("reconnect", (reconnect) => {
|
||
console.log("[MQTT-TEST] 重连中……",reconnect);
|
||
});
|
||
// 连接回调
|
||
this.mqttClient.on("connect", (connect) => {
|
||
console.log("[MQTT-TEST] 已连接的客户端ID: ",connect);
|
||
// 订阅
|
||
this.mqttClient.subscribe('img', { qos: 1 });
|
||
});
|
||
// 接收回调
|
||
this.mqttClient.on("message", (topic, message, packet) => {
|
||
console.log("[MQTT-TEST] 已连接的客户端ID: ",message);
|
||
|
||
console.log(
|
||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||
new Date(),
|
||
new Date().getMilliseconds()
|
||
);
|
||
// 解析后端数据
|
||
// let dataReceived = JSON.parse(message.toString());
|
||
// console.log("[MQTT-TEST] 已连接的客户端ID: ",dataReceived);
|
||
try{
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||
console.log("msg",msg) //msg为转换后的JSON数据
|
||
this.imgUrl='data:image/png;base64,' + msg.pic;
|
||
console.log("imageUrl",imageUrl)
|
||
}catch{
|
||
let imageType = 'arraybuffer';
|
||
const blob = new Blob([message], { type: imageType })
|
||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||
console.log("imageUrl",imageUrl)
|
||
}
|
||
let that = this;
|
||
var cId;
|
||
if (topic.indexOf("Car") != -1) {
|
||
cId = this.carId[topic.replace("Car", "")];
|
||
} else if (topic.indexOf("InConvoyor") != -1) {
|
||
cId = topic.replace("InConvoyor", "");
|
||
} else if (topic.indexOf("Battary_Sation") != -1) {
|
||
cId = this.BattaryArr[topic.replace("Battary_Sation", "")];
|
||
} else if (topic.indexOf("ELV") != "-1") {
|
||
cId = this.elvArr[topic.replace("ELV", "")][0];
|
||
this.models[cId].topic = topic;
|
||
} else if (topic.indexOf("INCMD") != -1) {
|
||
cId = this.stampArr[topic.replace("INCMD", "")][0];
|
||
console.log(cId, "topiccid");
|
||
this.models[cId].topic = topic;
|
||
} else if (topic.indexOf("OUTConvoyor") != -1) {
|
||
cId = topic.replace("OUTConvoyor", "");
|
||
}
|
||
// var convoyorData = that.convoyorCIdGroup[i];
|
||
// if (that.models[cId] != undefined) {
|
||
// try {
|
||
// that.models[cId].receiveData(dataReceived, topic);
|
||
// } catch (err) {
|
||
// console.error(err);
|
||
// }
|
||
// }
|
||
});
|
||
}
|
||
|
||
|
||
},
|
||
//获取设备状态
|
||
getDeviceStatusData(){
|
||
//任务数量
|
||
getDeviceStatus().then((res) => {
|
||
console.log("res1111",res.data)
|
||
// this.enterList = res.data;
|
||
// console.log(res, "123123");
|
||
this.statusInfo[1].count = res.data.MessionNum
|
||
});
|
||
//穿梭车数量
|
||
getDeviceDetails({deviceNum:'Num'}).then((res) => {
|
||
console.log("res1111",res.data)
|
||
// this.enterList = res.data;
|
||
// console.log(res, "123123");
|
||
this.statusInfo[0].count = res.data.CarOnlineNum
|
||
});
|
||
},
|
||
handleSearch(){
|
||
this.modelOthers = true;
|
||
this.$refs.htModels.finbBox(this.inputVal);
|
||
console.log(this.$refs.htModels,'asdasdasd');
|
||
this.inputVal = ''
|
||
},
|
||
handleRow(val){
|
||
this.modelOthers = true;
|
||
this.$refs.htModels.finbBox(val);
|
||
},
|
||
// 天气
|
||
handleWather(){
|
||
axios({url:'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',methods:''}).then(res=>{
|
||
this.weatherItem = res.data.lives[0]
|
||
console.log(this.weatherItem,'asdsads');
|
||
})
|
||
},
|
||
getmessageInfoData(val){
|
||
console.log("val",val)
|
||
if(val==true){
|
||
getfacMaintainRecord({ type: 0 }).then((res) => {
|
||
console.log("消息提醒",res.data)
|
||
this.messageInfo = res.data;
|
||
});
|
||
}
|
||
},
|
||
Onweather(name){
|
||
// switch (name) {
|
||
// case "多云":
|
||
// return require('../assets/weather/Cloudy .png');
|
||
// case "阴":
|
||
// return require('../assets/weather/Cloudy .png')
|
||
// case "暴雨":
|
||
// return require('../assets/weather/rainstorm.png')
|
||
// case "冰雹":
|
||
// return require('../assets/weather/hail.png')
|
||
// case "大风":
|
||
// return require('../assets/weather/gale.png')
|
||
// case "大雪":
|
||
// return require('../assets/weather/bigsnow.png')
|
||
// case "大雨":
|
||
// return require('../assets/weather/bigrain.png')
|
||
// case "雷电":
|
||
// return require('../assets/weather/thunder.png')
|
||
// case "雷阵雨":
|
||
// return require('../assets/weather/shower.png')
|
||
// case "沙尘暴":
|
||
// return require('../assets/weather/sand.png')
|
||
// case "晴":
|
||
// return require('../assets/weather/sun.png')
|
||
// case "雾霾":
|
||
// return require('../assets/weather/smog.png')
|
||
// case "小雪":
|
||
// return require('../assets/weather/snow.png')
|
||
// case "小雨":
|
||
// return require('../assets/weather/rain.png')
|
||
// case "雪":
|
||
// return require('../assets/weather/rainlitter.png')
|
||
// case "多云":
|
||
// return require('../assets/weather/night.png')
|
||
// case "雨夹雪":
|
||
// return require('../assets/weather/rainsnow.png')
|
||
// case "月亮":
|
||
// return require('../assets/weather/moon.png')
|
||
// case "中雪":
|
||
// return require('../assets/weather/mieddlesnow.png')
|
||
// case "中雨":
|
||
// return require('../assets/weather/middlerain.png')
|
||
// }
|
||
},
|
||
// 入库消息
|
||
getInhouse() {
|
||
getInwarehouse({ type: 0 }).then((res) => {
|
||
this.enterList = res.data;
|
||
console.log(res, "123123");
|
||
});
|
||
},
|
||
// 出库消息
|
||
getOuthouse() {
|
||
getOutwarehouse({ type: 0 }).then((res) => {
|
||
console.log(res.data);
|
||
this.orderList = res.data;
|
||
});
|
||
},
|
||
|
||
// 库存消息
|
||
getMessage() {
|
||
getInventoryMessage({ type: 1 }).then((res) => {
|
||
const arr = [];
|
||
arr.push(
|
||
res.data.MoveOut,
|
||
res.data.MoveIn,
|
||
res.data.load,
|
||
res.data.free
|
||
);
|
||
this.menusInit(arr);
|
||
});
|
||
},
|
||
// 库存情况
|
||
getstatus() {
|
||
getInventoryStatus({ type: 2 }).then((res) => {
|
||
console.log(JSON.parse(res.data.split("#")[0]), ",,,qwe123");
|
||
var obj = JSON.parse(res.data.split("#")[0]);
|
||
var obj2 = JSON.parse(res.data.split("#")[2]);
|
||
var arr = [];
|
||
Object.keys(obj).forEach((item) => {
|
||
Object.keys(obj2).forEach((items) => {
|
||
if (item == items) {
|
||
arr.push({
|
||
name: obj[item].substring(0, 2),
|
||
type: obj[item].substring(2, obj[item].length - 2),
|
||
smoke: "烟丝",
|
||
perCent: obj2[item],
|
||
});
|
||
}
|
||
});
|
||
});
|
||
this.perCent = arr[0].perCent;
|
||
this.perCent1 = arr[1].perCent;
|
||
this.perCent2 = arr[2].perCent;
|
||
this.stockInfo = arr;
|
||
});
|
||
},
|
||
// 时间转换
|
||
utcToLocal(date) {
|
||
const fmt = "YYYY-MM-DD hh:mm:ss";
|
||
return this.$moment(date).format(fmt);
|
||
},
|
||
/**
|
||
*
|
||
* 设备弹窗
|
||
*/
|
||
getEquipmentInfo(data) {
|
||
if (data.cType == "货箱") {
|
||
// PLTNUM
|
||
// VPLTNUM
|
||
this.locdesc = data.LOCDESC
|
||
getCountBox({ type: 3 ,PLTNUM:data.PLTNUM}).then((res) => {
|
||
console.log(res.data,'箱子')
|
||
this.containerDetails = res.data
|
||
this.componentShow = "container";
|
||
this.modelOthers = true;
|
||
});
|
||
} else if (data.cType == "码垛机") {
|
||
let deviceNum = ''
|
||
if (data.cId == 144) {
|
||
deviceNum = 'INCMD4'
|
||
}else{
|
||
deviceNum = 'INCMD3'
|
||
}
|
||
getDeviceDetails(
|
||
{
|
||
deviceNum: deviceNum
|
||
}).then((res)=>{
|
||
this.palletizerName = deviceNum
|
||
this.palletizerInfo = res.data
|
||
this.componentShow = "palletizer";
|
||
this.modelOthers = true;
|
||
})
|
||
}
|
||
// else if (data.cType == "装箱站") {
|
||
// this.componentShow = "packingStation";
|
||
// this.modelOthers = true;
|
||
// }
|
||
else if (data.cType == "拆垛机") {
|
||
let deviceNum = ''
|
||
console.log(data,'拆垛机');
|
||
if (data.cId == 142) {
|
||
deviceNum = 'INCMD6'
|
||
}else if(data.cId == 146){
|
||
deviceNum = 'INCMD5'
|
||
}else if (data.cId == 149) {
|
||
deviceNum = 'INCMD2'
|
||
}else if (data.cId == 151) {
|
||
deviceNum = 'INCMD1'
|
||
}
|
||
getDeviceDetails(
|
||
{
|
||
deviceNum: deviceNum
|
||
}).then((res)=>{
|
||
this.destackerInfo = res.data
|
||
this.destackerName = deviceNum
|
||
this.componentShow = "destacker";
|
||
this.modelOthers = true;
|
||
})
|
||
} else if (data.cType == "往复式输送升降机") {
|
||
let deviceNum = ''
|
||
if (data.cId == 320) {
|
||
deviceNum = 'ELV1'
|
||
}else if(data.cId == 319){
|
||
deviceNum = 'ELV2'
|
||
}else if (data.cId == 318) {
|
||
deviceNum = 'ELV3'
|
||
}else if (data.cId == 317) {
|
||
deviceNum = 'ELV4'
|
||
}else if(data.cId == 313){
|
||
deviceNum = 'ELV5'
|
||
}else if(data.cId == 321){
|
||
deviceNum = 'ELV6'
|
||
}
|
||
getDeviceDetails(
|
||
{
|
||
deviceNum: deviceNum
|
||
}).then((res)=>{
|
||
this.hoistInfo = res.data
|
||
this.hoistName = deviceNum
|
||
this.componentShow = "hoist";
|
||
this.modelOthers = true;
|
||
})
|
||
} else if (data.cType == "智能双向穿梭车") {
|
||
getDeviceDetails(
|
||
{
|
||
deviceNum:'Car'+ data.cName.slice(11)
|
||
}).then((res)=>{
|
||
this.carName = 'Car' + data.cName.slice(11)
|
||
this.componentShow = "suttleCar";
|
||
this.modelOthers = true;
|
||
this.carInfo = res.data
|
||
})
|
||
} else if (data.cType == "快换电池装置") {
|
||
let deviceNum = ''
|
||
if (data.cId == 476) {
|
||
deviceNum = 'Battary_Sation2'
|
||
}else if(data.cId == 361){
|
||
deviceNum = 'Battary_Sation1'
|
||
}
|
||
getDeviceDetails(
|
||
{
|
||
deviceNum: deviceNum
|
||
}).then((res)=>{
|
||
this.componentShow = "battery";
|
||
this.modelOthers = true;
|
||
this.battaryStationInfo = res.data
|
||
this.battaryStationName = deviceNum
|
||
})
|
||
|
||
}else if (data.cType == "链式输送机") {
|
||
|
||
let deviceNum = ''
|
||
if (data.cId.toString().substring(0,2) == "51") {
|
||
deviceNum = 'InConvoyor' + data.cId
|
||
}else if (data.cId.toString().substring(0,2) == "53") {
|
||
deviceNum = 'OUTConvoyor' + data.cId
|
||
}
|
||
getDeviceDetails(
|
||
{
|
||
deviceNum: deviceNum
|
||
}).then((res)=>{
|
||
this.modelOthers = true;
|
||
this.componentShow = "conveyor";
|
||
this.conveyorInfo = res.data
|
||
this.conveyorName = deviceNum
|
||
})
|
||
}
|
||
},
|
||
/**
|
||
* 详情弹窗
|
||
*/
|
||
informationInfo(data,item) {
|
||
if (data == "出库工单") {
|
||
this.componentShow = "wireFeeder";
|
||
this.modelOthers = true;
|
||
this.outContent = this.orderList
|
||
}else if (data == "入库工单") {
|
||
this.componentShow = "inFeeder";
|
||
this.modelOthers = true;
|
||
this.inContent = this.enterList
|
||
}else if (data == "库存消息") {
|
||
this.componentShow = "lnventory";
|
||
this.modelOthers = true;
|
||
// this.inContent = this.enterList
|
||
} else if (data == "各品牌库存情况") {
|
||
this.componentShow = "lnventoryLeft";
|
||
this.modelOthers = true;
|
||
// this.inContent = this.enterList
|
||
} else if (data == "消息提醒") {
|
||
this.componentShow = "maintenanceRemindTable";
|
||
this.modelOthers = true;
|
||
// this.inContent = this.enterList
|
||
} else if (data == "维保提醒") {
|
||
if(item.keepName){
|
||
this.componentShow = "maintenance";
|
||
this.modelOthers = true;
|
||
this.wbContent=item
|
||
}else{
|
||
this.componentShow = "maintenanceRemind";
|
||
this.modelOthers = true;
|
||
this.wxContent=item
|
||
}
|
||
// getfacManage({ type: 3,facCode: item.facCode
|
||
// ,id: item.id
|
||
// ,mark:1}).then((res) => {
|
||
// console.log("res.data",res.data)
|
||
|
||
// });
|
||
}
|
||
},
|
||
getCloseStatus(status) {
|
||
this.hideBoxShow = true
|
||
this.closeStatus = status;
|
||
// if (status == 1) {
|
||
// this.btnPic[0] = require("@/assets/images/homeActive.png");
|
||
// this.btnPic[1] = require("@/assets/images/battery.png");
|
||
// }
|
||
// if (status == 2) {
|
||
// this.btnPic[0] = require("@/assets/images/homeActive.png");
|
||
// this.btnPic[2] = require("@/assets/images/equipment.png");
|
||
// }
|
||
// if (status == 3) {
|
||
// this.btnPic[0] = require("@/assets/images/homeActive.png");
|
||
// this.btnPic[1] = require("@/assets/images/productionInformation.png");
|
||
// }
|
||
// if (status == 4) {
|
||
// this.btnPic[0] = require("@/assets/images/homeActive.png");
|
||
// this.btnPic[3] = require("@/assets/images/operationMG.png");
|
||
// }
|
||
},
|
||
handleActive(item, e) {
|
||
this.hideBoxShow = false
|
||
this.ins = item;
|
||
this.btnPic = [
|
||
// require("@/assets/images/home.png"),
|
||
// require("@/assets/images/battery.png"),
|
||
// require("@/assets/images/stock.png"),
|
||
// require("@/assets/images/productionInformation.png"),
|
||
// require("@/assets/images/equipment.png"),
|
||
// require("@/assets/images/operationMG.png"),
|
||
];
|
||
if (item == 0) {
|
||
// this.btnPic[item] = require("@/assets/images/homeActive.png");
|
||
}
|
||
// else if (item == 1) {
|
||
// this.componentShow = "batteryManagement";
|
||
// this.modelOthers = true;
|
||
// this.btnPic[item] = require("@/assets/images/batteryActive.png");
|
||
// }
|
||
else if (item == 2) {
|
||
this.componentShow = "deviceManagement";
|
||
this.modelOthers = true;
|
||
// this.btnPic[item] = require("@/assets/images/equipmentActive.png");
|
||
} else if (item == 1) {
|
||
this.componentShow = "productionInformation";
|
||
this.modelOthers = true;
|
||
// this.btnPic[
|
||
// item
|
||
// ] = require("@/assets/images/productionInformationActive.png");
|
||
} else if (item == 3) {
|
||
this.componentShow = "operationMaintenance";
|
||
this.modelOthers = true;
|
||
// this.btnPic[item] = require("@/assets/images/operationMGActive.png");
|
||
}
|
||
// else if (item == 2) {
|
||
// this.btnPic[item] = require("@/assets/images/stockActive.png");
|
||
// }
|
||
// else if (item == 3) {
|
||
// this.componentShow = "deviceManagement";
|
||
// this.modelOthers = true;
|
||
// this.btnPic[item] = require("@/assets/images/equipmentActive.png");
|
||
// } else if (item == 4) {
|
||
// this.componentShow = "productionInformation";
|
||
// this.modelOthers = true;
|
||
// this.btnPic[
|
||
// item
|
||
// ] = require("@/assets/images/productionInformationActive.png");
|
||
// } else if (item == 5) {
|
||
// this.componentShow = "operationMaintenance";
|
||
// this.modelOthers = true;
|
||
// this.btnPic[item] = require("@/assets/images/operationMGActive.png");
|
||
// }
|
||
this.$forceUpdate();
|
||
},
|
||
// 库存消息
|
||
menusInit(arr) {
|
||
let domechart = document.getElementById("menusBar");
|
||
let myCharts = echarts.init(domechart);
|
||
var datapictorialBar = arr;
|
||
var pictorialBarColor = [" #155b5b", " #16485a ", "#41362d"];
|
||
// 最大值
|
||
var maxList = Math.max.apply(null, arr) + 10;
|
||
console.log(maxList, datapictorialBar, ",,,maxList");
|
||
let option = {
|
||
grid: {
|
||
top: 18,
|
||
bottom: 18,
|
||
left: 15,
|
||
right: 20,
|
||
},
|
||
xAxis: {
|
||
show: false,
|
||
},
|
||
yAxis: [
|
||
{
|
||
show: true,
|
||
type: "category",
|
||
data: ["入库中", "出库中","实箱","空箱", ],
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "#ffffff",
|
||
fontSize: 14,
|
||
inside: true,
|
||
padding: [-45, 0, 0, -10],
|
||
align: "left",
|
||
},
|
||
},
|
||
{
|
||
show: true,
|
||
type: "category",
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "销量",
|
||
type: "bar",
|
||
barWidth: 20, // 柱图宽度
|
||
barGap: 36,
|
||
data: [maxList, maxList, maxList, maxList],
|
||
itemStyle: {
|
||
normal: {
|
||
//这里设置每个柱子颜色不一样
|
||
color: "rgba(0, 153, 145, 0)",
|
||
borderColor: "#cca272",
|
||
borderWidth: 1,
|
||
borderType: "solid",
|
||
},
|
||
},
|
||
},
|
||
{
|
||
// 值分隔
|
||
type: "pictorialBar",
|
||
colorBy: "data",
|
||
label: {
|
||
//数据显示的位置
|
||
show: true, //数值是否显示
|
||
position: "right", //数值相对于柱状图显示的位置
|
||
offset: [-30, -18],
|
||
fontSize: 18,
|
||
fontWeight: "bold",
|
||
color: "#155b5b",
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: function (params) {
|
||
// 定义一个颜色数组colorList
|
||
var colorList = [
|
||
["#1afbd3", "#155b5b"],
|
||
["#19a1cc", "#16485a"],
|
||
["#19a1cc", "#16485a"],
|
||
["#ec8d41", "#41362d"],
|
||
];
|
||
var colorItem = colorList[params.dataIndex];
|
||
return new echarts.graphic.LinearGradient(
|
||
1,
|
||
0,
|
||
0,
|
||
0,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: colorItem[0],
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: colorItem[1],
|
||
},
|
||
],
|
||
false
|
||
);
|
||
},
|
||
},
|
||
},
|
||
symbolRepeat: "fixed",
|
||
symbolMargin: 1,
|
||
symbol: "roundRect",
|
||
symbolClip: true,
|
||
symbolSize: [8, 18],
|
||
symbolPosition: "start",
|
||
symbolOffset: [1, 0],
|
||
// symbolBoundingData: this.total,
|
||
data: datapictorialBar,
|
||
width: 13,
|
||
z: 0,
|
||
zlevel: 3,
|
||
},
|
||
],
|
||
};
|
||
myCharts.setOption(option);
|
||
},
|
||
//菜单显示
|
||
isShowBtnMore() {
|
||
this.isShowBtn = false;
|
||
window.setTimeout((e) => {
|
||
this.isShowBtn1 = true;
|
||
}, 1100);
|
||
},
|
||
isShowBtnMore1() {
|
||
this.isShowBtn1 = false;
|
||
this.isShowBtn = true;
|
||
},
|
||
//隐藏箱子
|
||
hideBox(){
|
||
this.$refs.htModels.handleFirstBox();
|
||
}
|
||
},
|
||
components: {
|
||
// echars,
|
||
// echarts1,
|
||
// echarts2,
|
||
// HomeLeft
|
||
// home,
|
||
// equipmentManage,
|
||
// batteryManagement, // 电池管理弹窗
|
||
// productionInformation, // 生产信息弹窗
|
||
// deviceManagement, // 设备信息弹窗
|
||
// operationMaintenance, // 运维指导弹窗
|
||
// container, // 货箱弹窗
|
||
// palletizer, // 码垛机弹窗
|
||
// packingStation, // 装箱站弹窗
|
||
// destacker, // 拆垛机弹窗
|
||
// hoist, // 提升机弹窗
|
||
// suttleCar, // 穿梭车弹窗
|
||
// battery, //电池设备弹窗
|
||
// wireFeeder, // 出库工单弹窗
|
||
// inFeeder,//入库工单弹窗
|
||
// lnventory,
|
||
// equipmentInspection, //设备巡检弹窗
|
||
// maintenance, //维保提醒
|
||
// maintenanceRemind,
|
||
// lnventoryLeft,
|
||
// maintenanceRemindTable,
|
||
// conveyor,// 输送机弹窗
|
||
},
|
||
};
|
||
</script>
|
||
<style>
|
||
.el-header, .el-footer {
|
||
background-color: #B3C0D1;
|
||
color: #333;
|
||
text-align: center;
|
||
line-height: 60px;
|
||
}
|
||
|
||
.el-aside {
|
||
background-color: #D3DCE6;
|
||
color: #333;
|
||
text-align: center;
|
||
line-height: 200px;
|
||
}
|
||
|
||
.el-main {
|
||
background-color: #E9EEF3;
|
||
color: #333;
|
||
text-align: center;
|
||
line-height: 160px;
|
||
}
|
||
|
||
body > .el-container {
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.el-container:nth-child(5) .el-aside,
|
||
.el-container:nth-child(6) .el-aside {
|
||
line-height: 260px;
|
||
}
|
||
|
||
.el-container:nth-child(7) .el-aside {
|
||
line-height: 320px;
|
||
}
|
||
</style>
|