1312 lines
34 KiB
Vue
1312 lines
34 KiB
Vue
<template>
|
||
<Nav />
|
||
<div class="unity">
|
||
<iframe src="model/index.html" id="iframeRef" frameborder="0"></iframe>
|
||
</div>
|
||
<div class="home">
|
||
<div class="home-left">
|
||
<!-- 设备状态 -->
|
||
<div class="home-title">
|
||
<span class="home-title-font"> 设备状态 </span>
|
||
<!-- <span class="home-title-more"> </span> -->
|
||
</div>
|
||
<div class="home-left-device">
|
||
<div
|
||
class="home-left-device-box"
|
||
v-for="(s, i) in deviceList"
|
||
:key="'d' + i"
|
||
>
|
||
<img :src="s.deviceImg" alt="" />
|
||
<div>
|
||
<p>{{ s.deviceStatus }}</p>
|
||
<span :style="s.color">{{ s.deviceNum }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 各品牌库存情况 -->
|
||
<div class="home-title">
|
||
<span class="home-title-font"> 各品牌库存情况 </span>
|
||
<span class="home-title-more" @click="brandShow = true"> </span>
|
||
</div>
|
||
<div class="home-left-brand" id="brand">
|
||
<div
|
||
v-for="(item, index) in brandList"
|
||
:key="'brand' + index"
|
||
class="item"
|
||
>
|
||
<div class="home-left-brand-title">
|
||
<span>{{ item.name }}</span
|
||
><span class="pct"
|
||
>{{ item.stockNum
|
||
}}<span class="kg"
|
||
>箱
|
||
<span>
|
||
{{ formatNumber(item.weight)
|
||
}}<span class="kg">公斤</span></span
|
||
>
|
||
</span>
|
||
</span>
|
||
</div>
|
||
<div class="home-left-brand-progress">
|
||
<div
|
||
class="home-left-brand-bg"
|
||
:style="'width:' + item.weightPercent + '%'"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 故障提醒 -->
|
||
<div class="home-title">
|
||
<span class="home-title-font"> 故障提醒 </span>
|
||
<span class="home-title-more" @click="openMsg"> </span>
|
||
</div>
|
||
<div class="home-left-messageReminder">
|
||
<el-timeline>
|
||
<el-timeline-item
|
||
v-for="(activity, index) in messageReminder"
|
||
:key="index"
|
||
>
|
||
<p>{{ activity.msg }}</p>
|
||
<p class="home-left-messageReminder-data">
|
||
<span
|
||
style="color: rgba(148, 219, 255, 1)"
|
||
class="home-left-messageReminder-font"
|
||
>{{ activity.reminderMsg }}</span
|
||
>
|
||
<span style="color: rgba(192, 192, 192, 1)">{{
|
||
activity.date
|
||
}}</span>
|
||
</p>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</div>
|
||
<!-- 搜索框 -->
|
||
<div class="home-left-search">
|
||
<el-input
|
||
v-model="searchData"
|
||
class="w-50 m-2"
|
||
placeholder="请输入搜索内容"
|
||
:suffix-icon="Search"
|
||
@change="searchCar"
|
||
/>
|
||
</div>
|
||
<div class="home-btn-reset" @click="resetUnity">刷新</div>
|
||
</div>
|
||
<div class="home-right">
|
||
<!-- 失活二层箱子，激活一层箱子 重新加载三维场景 -->
|
||
<div class="home-btn">
|
||
<div
|
||
class="home-btn-unity"
|
||
v-if="unityBoxShow"
|
||
@click="unityBoxHandle(false)"
|
||
>
|
||
{{ unityBtn }}
|
||
</div>
|
||
</div>
|
||
<!-- 库存消息 -->
|
||
<div class="home-title">
|
||
<span class="home-title-font"> 库存消息 </span>
|
||
<span class="home-title-more" @click="openInventoryNews"> </span>
|
||
</div>
|
||
<div class="home-right-inventoryNews" id="inventoryNews"></div>
|
||
<!-- 出库工单 -->
|
||
<div class="home-title">
|
||
<span class="home-title-font"> 出库工单 </span>
|
||
<span
|
||
class="home-title-more"
|
||
@click="
|
||
inOutShow = true;
|
||
inOutTitle = '出库工单';
|
||
"
|
||
>
|
||
</span>
|
||
</div>
|
||
<div class="home-right-outboundWorkOrder">
|
||
<div class="home-right-outboundWorkOrder-content">
|
||
<div
|
||
class="home-right-outboundWorkOrder-box"
|
||
v-for="(item, index) in outboundWorkOrder"
|
||
:key="'out' + index"
|
||
>
|
||
<div class="left-plate">
|
||
<img :src="item.pic" alt="" />
|
||
<p class="name">喂丝机{{ item.feederId }}号</p>
|
||
</div>
|
||
<div class="right-plate">
|
||
<p class="name">{{ item.itemDesc }}</p>
|
||
<!-- <p class="id">{{ item.currentBatch }}</p> -->
|
||
<p class="start-time">
|
||
<!-- 开始时间:<span> {{ item.creatTime }}</span> -->
|
||
剩余箱数：<span>{{ item.leftNum }}箱</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 入库工单 -->
|
||
<div class="home-title">
|
||
<span class="home-title-font"> 入库工单 </span>
|
||
<span
|
||
class="home-title-more"
|
||
@click="
|
||
inOutShow = true;
|
||
inOutTitle = '入库工单';
|
||
"
|
||
>
|
||
</span>
|
||
</div>
|
||
<div class="home-right-inboundWorkOrder">
|
||
<div class="home-right-inboundWorkOrder-content">
|
||
<div
|
||
class="home-right-inboundWorkOrder-box"
|
||
v-for="(item, index) in inboundWorkOrder"
|
||
:key="'out' + index"
|
||
>
|
||
<div class="left-plate">
|
||
<img :src="item.pic" alt="" />
|
||
<p class="name">装箱站1号</p>
|
||
</div>
|
||
<div class="right-plate">
|
||
<p class="name">{{ item.itemDesc }}</p>
|
||
<p class="start-time">
|
||
计划重量：<span>{{ item.planWeight }}公斤</span>
|
||
</p>
|
||
<p class="start-time">
|
||
入库重量：<span>{{ item.inWeight }}公斤</span>
|
||
</p>
|
||
<p class="start-time">
|
||
入库箱数：<span>{{ item.inNum }}箱</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="home-bottom">
|
||
<div class="home-bottom-put">
|
||
<span></span>
|
||
</div>
|
||
<ul>
|
||
<li
|
||
:style="`background-image:url(${
|
||
asideListIndex === index ? item.select : item.default
|
||
})`"
|
||
v-for="(item, index) in asideList"
|
||
:key="'key' + index"
|
||
@click="asideToggle(index)"
|
||
></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- 故障提醒弹窗 -->
|
||
<messageDialog v-if="isOpen" :mqttData="mqttList" @closeMsg="closeMsg" />
|
||
<!-- 各品牌库存弹窗 -->
|
||
<brand v-if="brandShow" @closeBrand="closeBrand" />
|
||
<!-- 库存消息弹窗 -->
|
||
<inventoryNews
|
||
@rowClickHandle="unityBoxHandle"
|
||
v-if="inventoryNewsShow"
|
||
@close="closeInventoryNews"
|
||
/>
|
||
<!-- 出入库信息弹窗 -->
|
||
<inOutBound
|
||
v-if="inOutShow"
|
||
:title="inOutTitle"
|
||
:data="inOutTitle === '出库工单' ? outboundWorkOrder : inboundWorkOrder"
|
||
@close="closeInOut"
|
||
></inOutBound>
|
||
<!-- 设备管理弹窗 -->
|
||
<equipmentManagement v-if="asideListIndex === 1" @closeDialog="closeDialog" />
|
||
<!-- 生产信息弹窗 -->
|
||
<devData v-if="asideListIndex === 0" @closeDialog="closeDialog" />
|
||
<!-- 电池管理弹窗 -->
|
||
<batteryManagement v-if="asideListIndex === 2" @closeDialog="closeDialog" />
|
||
<!-- 运维指导弹窗 -->
|
||
<OPEX v-if="asideListIndex === 3" @closeDialog="closeDialog" />
|
||
</template>
|
||
<script setup>
|
||
import Nav from "@/views/home/components/layout.vue";
|
||
import devData from "./components/aside/devData"; //生产信息
|
||
import equipmentManagement from "./components/aside/equipmentManagement"; // 设备管理
|
||
import batteryManagement from "./components/aside/batteryManagement";
|
||
import OPEX from "./components/aside/OPEX"; //运维管理
|
||
|
||
import brand from "./components/homeDialog/brand"; //各品牌库存管理
|
||
import messageDialog from "./components/homeDialog/messageDialog"; //消息提醒
|
||
import inventoryNews from "./components/homeDialog/inventoryNews"; //库存消息
|
||
import inOutBound from "./components/homeDialog/inOutBound";
|
||
import { Search } from "@element-plus/icons-vue"; //出入库工单
|
||
import * as echarts from "echarts";
|
||
import { ref, onMounted, proxyRefs, getCurrentInstance } from "vue";
|
||
import getPath from "@/utils/getPath";
|
||
import mqtt from "mqtt";
|
||
import {
|
||
getEquipStatus,
|
||
getInventoryInfo,
|
||
getCarErrorIn12,
|
||
getOverTransmission,
|
||
getInOrder,
|
||
getOutOrder,
|
||
getLocInfo,
|
||
} from "@/api/home";
|
||
import { fontSize } from "@/utils/common";
|
||
const unityBoxShow = ref(false);
|
||
// 重新加载三维场景
|
||
function resetUnity() {
|
||
unityBoxShow.value = false;
|
||
document.querySelector("#iframeRef").src = "model/index.html";
|
||
}
|
||
const unityBtn = ref("隐藏二层箱子");
|
||
const unityNum = ref(0);
|
||
// 与三维箱子进行交互
|
||
function unityBoxHandle(val) {
|
||
if (val) {
|
||
inventoryNewsShow.value = false;
|
||
unityBoxShow.value = true;
|
||
unityNum.value = 0;
|
||
unityBtn.value = "隐藏二层箱子";
|
||
} else {
|
||
unityNum.value++;
|
||
if (unityNum.value % 2 != 0) {
|
||
unityBtn.value = "展示二层箱子";
|
||
} else {
|
||
unityBtn.value = "隐藏二层箱子";
|
||
}
|
||
}
|
||
document
|
||
.querySelector("#iframeRef")
|
||
.contentWindow.unityBoxHandle(val);
|
||
}
|
||
const { proxy } = getCurrentInstance();
|
||
// 设备状态列表
|
||
const deviceList = ref([
|
||
{
|
||
deviceStatus: "运行设备",
|
||
deviceImg: getPath.operatingEquipment1,
|
||
color: "color:rgba(164, 255, 236, 1)",
|
||
},
|
||
{
|
||
deviceStatus: "设备故障",
|
||
deviceImg: getPath.equipmentFailure1,
|
||
color: "color:rgba(255, 244, 166, 1)",
|
||
},
|
||
]);
|
||
// 绘制各品牌库存情况
|
||
function darwBrandChart(data) {
|
||
let yData = [
|
||
"兰州(硬珍品)烟丝",
|
||
"兰州(长嘴)烟丝",
|
||
"兰州(细支珍品)烟丝",
|
||
"兰州(硬吉祥)烟丝",
|
||
];
|
||
let xData = [30, 28, 32, 32];
|
||
// params.forEach((item) => {
|
||
// yData.push(item.Ranking + " " + item.DeviceName);
|
||
// xData.push(item.EH);
|
||
// });
|
||
if (data) {
|
||
yData = Object.keys(data[1]);
|
||
xData = Object.values(data[1]).map((el) => {
|
||
return el * data[0];
|
||
});
|
||
console.log(xData);
|
||
}
|
||
let myChart = echarts.init(document.getElementById("brand"));
|
||
let option = {
|
||
grid: {
|
||
left: "3%",
|
||
right: "5%",
|
||
bottom: "-2%",
|
||
top: "8%",
|
||
containLabel: true,
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "none",
|
||
},
|
||
formatter: function (params) {
|
||
return (
|
||
params[0].name +
|
||
"<br/>" +
|
||
"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
|
||
params[0].seriesName +
|
||
" : " +
|
||
parseInt((params[0].value / data[0]) * 100) +
|
||
"%"
|
||
);
|
||
},
|
||
},
|
||
xAxis: {
|
||
show: false,
|
||
type: "value",
|
||
},
|
||
// dataZoom: [
|
||
// {
|
||
// type: "inside", // 支持内部鼠标滚动平移
|
||
// start: 25,
|
||
// end: 100,
|
||
// yAxisIndex: 0,
|
||
// zoomOnMouseWheel: false, // 关闭滚轮缩放
|
||
// moveOnMouseWheel: true, // 开启滚轮平移
|
||
// moveOnMouseMove: false, // 鼠标移动能触发数据窗口平移
|
||
// },
|
||
// ],ontSize
|
||
yAxis: [
|
||
{
|
||
type: "category",
|
||
inverse: true,
|
||
axisLabel: {
|
||
padding: [0, 0, 10, -10],
|
||
verticalAlign: "bottom",
|
||
inside: true,
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "0.875rem",
|
||
},
|
||
formatter: function (value, index) {
|
||
return "{a|" + value + "}";
|
||
},
|
||
rich: {
|
||
a: {
|
||
width: 45,
|
||
padding: [0, 0, 3, 0],
|
||
fontSize: "0.875rem",
|
||
// backgroundColor: {
|
||
// image: getImageUrl("../../assets/images/rank-bg.png"),
|
||
// },
|
||
},
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
// axisPointer: {
|
||
// show: true,
|
||
// },
|
||
data: yData,
|
||
},
|
||
{
|
||
type: "category",
|
||
inverse: true,
|
||
axisTick: "none",
|
||
axisLine: "none",
|
||
show: true,
|
||
axisLabel: {
|
||
padding: [0, -10, 10, 0],
|
||
verticalAlign: "bottom",
|
||
inside: true,
|
||
textStyle: {},
|
||
formatter: function (value) {
|
||
return "{a|" + parseInt((value / data[0]) * 100) + "%}";
|
||
},
|
||
rich: {
|
||
a: {
|
||
fontSize: "16",
|
||
color: "rgba(144, 218, 255, 1)",
|
||
padding: [0, 6, 0, 0],
|
||
},
|
||
},
|
||
},
|
||
data: xData.slice(0, 5),
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "百分比",
|
||
type: "bar",
|
||
zlevel: 1,
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(25, 174, 250, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(148, 219, 255, 1)",
|
||
},
|
||
]),
|
||
},
|
||
barWidth: 8,
|
||
data: xData.slice(0, 5),
|
||
},
|
||
{
|
||
name: "背景",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
barGap: "-115%",
|
||
data: [data[0], data[0], data[0], data[0], data[0]],
|
||
itemStyle: {
|
||
color: "rgba(112, 112, 112, 0.23)",
|
||
},
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
// 添加 resize 事件处理程序
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||
});
|
||
}
|
||
// 消息提醒
|
||
const messageReminder = ref([
|
||
// {
|
||
// msg: "维修提醒",
|
||
// date: "2024-08-21 14:41:10",
|
||
// reminderMsg: "设备EWGAGAD需要维保",
|
||
// },
|
||
// {
|
||
// msg: "维修提醒",
|
||
// date: "2024-08-21 14:41:10",
|
||
// reminderMsg: "设备EWGAGAD需要维保",
|
||
// },
|
||
// {
|
||
// msg: "维修提醒",
|
||
// date: "2024-08-21 14:41:10",
|
||
// reminderMsg: "设备EWGAGAD需要维保",
|
||
// },
|
||
]);
|
||
// 搜索框关联的搜索内容
|
||
const searchData = ref();
|
||
function searchCar() {
|
||
let dom = document.querySelector("#iframeRef");
|
||
let data = searchData.value;
|
||
dom.contentWindow.openCar(data.toString());
|
||
searchData.value = "";
|
||
}
|
||
// 库存消息的echarts
|
||
function drawInventoryNewsEcahrt(result) {
|
||
console.log(result, "库存消息");
|
||
// result.特殊空箱子 = 400
|
||
// result.特殊实箱子 = 300
|
||
let myChart = echarts.init(document.getElementById("inventoryNews"));
|
||
var scaleData = [
|
||
{
|
||
name: "正在进行任务数",
|
||
value: result.taskDoingNum,
|
||
radius1: ["51%", "53%"],
|
||
},
|
||
{
|
||
name: "实箱",
|
||
value: result.fullBoxNum,
|
||
radius1: ["59%", "60%"],
|
||
},
|
||
{
|
||
name: "空箱",
|
||
value: result.emptyBoxNum,
|
||
radius1: ["67%", "68%"],
|
||
},
|
||
{
|
||
name: "库存总量",
|
||
value: result.inventoryNum,
|
||
radius1: ["67%", "68%"],
|
||
},
|
||
{
|
||
name: "批次数量",
|
||
value: result.batchNum,
|
||
radius1: ["67%", "68%"],
|
||
},
|
||
];
|
||
let index = 0;
|
||
// for (let key in result) {
|
||
// scaleData.push({
|
||
// name: key,
|
||
// value: result[key],
|
||
// });
|
||
// index++;
|
||
// }
|
||
// let box = {
|
||
// name:'特殊箱子',
|
||
// value:,
|
||
// }
|
||
// 数据处理
|
||
|
||
// scaleData.forEach((el,index) => {
|
||
// console.log(el);
|
||
|
||
// });
|
||
let box = {
|
||
name: "特殊箱子",
|
||
value: 0,
|
||
};
|
||
|
||
// for (let i = 0; i < scaleData.length; i++) {
|
||
// if (scaleData[i].name === "特殊空箱子") {
|
||
// box.value = box.value + scaleData[i].value;
|
||
// scaleData.splice(i, 1);
|
||
// i--;
|
||
// }
|
||
// if (scaleData[i].name === "特殊实箱子") {
|
||
// box.value = box.value + scaleData[i].value;
|
||
// scaleData.splice(i, 1);
|
||
// i--;
|
||
// }
|
||
// }
|
||
// console.log(scaleData);
|
||
// box.radius1 = [43 + (scaleData.length-1) * 8 + "%" + "", 45 + (scaleData.length-1) * 8 + "%" + ""]
|
||
if (box.value != 0) {
|
||
scaleData.push(box);
|
||
}
|
||
scaleData.forEach((el, index) => {
|
||
el.radius1 = [35 + index * 8 + "%" + "", 37 + index * 8 + "%" + ""];
|
||
});
|
||
var placeHolderStyle = {
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: true,
|
||
},
|
||
color: "rgba(0, 0, 0, 0)",
|
||
borderColor: "rgba(0, 0, 0, 0.2)",
|
||
borderWidth: 2,
|
||
};
|
||
var seriesObj = [];
|
||
var color = [
|
||
"rgba(23, 151, 217, 1)",
|
||
// "rgba(28, 238, 251, 1)",
|
||
"rgba(255, 215, 0,1)",
|
||
// "rgba(0, 245, 194, 1)",
|
||
"rgba(255, 255, 224,1)",
|
||
// "rgba(0, 245, 194, 1)",
|
||
"rgba(28, 238, 251, 1)",
|
||
"rgba(255, 192, 203,1)",
|
||
];
|
||
for (var i = 0; i < scaleData.length; i++) {
|
||
seriesObj.push({
|
||
name: "",
|
||
type: "pie",
|
||
radius: scaleData[i].radius1,
|
||
center: ["24%", "50%"],
|
||
hoverAnimation: false,
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false,
|
||
color: "#ddd",
|
||
},
|
||
},
|
||
},
|
||
data: [
|
||
{
|
||
value: scaleData[i].value,
|
||
name: scaleData[i].name,
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 2,
|
||
borderColor: color[i],
|
||
},
|
||
},
|
||
},
|
||
{
|
||
// value:scaleData[i].value,
|
||
|
||
name: "",
|
||
itemStyle: placeHolderStyle,
|
||
},
|
||
],
|
||
});
|
||
}
|
||
let option = {
|
||
graphic: {
|
||
/**
|
||
* 【主要代码】图形中心展示图片
|
||
*/
|
||
elements: [
|
||
{
|
||
type: "image",
|
||
style: {
|
||
image: getPath.homeIcon, // 图片地址
|
||
width: fontSize(0.4),
|
||
height: fontSize(0.4),
|
||
},
|
||
// left: '18.5%',
|
||
left: "17.5%", // 【主要代码1】
|
||
top: "center",
|
||
},
|
||
],
|
||
},
|
||
color: color,
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
legend: {
|
||
icon: "circle",
|
||
orient: "vertical",
|
||
x: "46%",
|
||
y: "center",
|
||
itemWidth: fontSize(0.07),
|
||
itemHeight: fontSize(0.07),
|
||
itemGap: fontSize(0.1),
|
||
data: scaleData.map((el, index) => {
|
||
return el.name;
|
||
}),
|
||
// itemStyle:{
|
||
// color:color
|
||
// },
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "1rem",
|
||
rich: {
|
||
name: {
|
||
color: "#fff",
|
||
fontSize: "0.875rem",
|
||
},
|
||
val: {
|
||
fontSize: ".875rem",
|
||
textAlign: "right",
|
||
// width: "40",
|
||
padding: [0, 0, 0, 5],
|
||
// color: color,
|
||
},
|
||
},
|
||
},
|
||
formatter: function (name) {
|
||
let total = 0;
|
||
for (var i = 0; i < scaleData.length; i++) {
|
||
if (scaleData[i].name === name) {
|
||
total = scaleData[i].value;
|
||
}
|
||
}
|
||
return `{name|${name}} {val|${
|
||
name == "库存总量" ? total + "公斤" : total
|
||
}}`;
|
||
},
|
||
},
|
||
toolbox: {
|
||
show: false,
|
||
},
|
||
series: seriesObj,
|
||
};
|
||
myChart.setOption(option);
|
||
// 添加 resize 事件处理程序
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||
myChart.setOption({
|
||
graphic: {
|
||
/**
|
||
* 【主要代码】图形中心展示图片
|
||
*/
|
||
elements: [
|
||
{
|
||
type: "image",
|
||
style: {
|
||
image: getPath.homeIcon, // 图片地址
|
||
width: fontSize(0.4),
|
||
height: fontSize(0.4),
|
||
},
|
||
// left: '18.5%',
|
||
left: "17.5%", // 【主要代码1】
|
||
top: "center",
|
||
},
|
||
],
|
||
},
|
||
legend: {
|
||
icon: "circle",
|
||
orient: "vertical",
|
||
x: "60%",
|
||
y: "center",
|
||
itemWidth: fontSize(0.07),
|
||
itemHeight: fontSize(0.07),
|
||
itemGap: fontSize(0.1),
|
||
data: scaleData.map((el) => {
|
||
return el.name;
|
||
}),
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "0.7rem",
|
||
rich: {
|
||
name: {
|
||
color: "#fff",
|
||
fontSize: "0.7rem",
|
||
},
|
||
val: {
|
||
fontSize: ".7rem",
|
||
textAlign: "right",
|
||
// width: "40",
|
||
|
||
color: color[i],
|
||
},
|
||
},
|
||
},
|
||
formatter: function (name) {
|
||
let total = 0;
|
||
for (var i = 0; i < scaleData.length; i++) {
|
||
if (scaleData[i].name === name) {
|
||
total = scaleData[i].value;
|
||
}
|
||
}
|
||
return `{name|${name}} {val|${total}}`;
|
||
},
|
||
},
|
||
});
|
||
});
|
||
}
|
||
// 出库工单
|
||
const outboundWorkOrder = ref([
|
||
// {
|
||
// name: "利群（长嘴）烟丝",
|
||
// id: "JB17225LQ（CZ）02",
|
||
// startTime: "08:21",
|
||
// pic: getPath.outDevice,
|
||
// picName: "S08喂丝机",
|
||
// },
|
||
// {
|
||
// name: "利群（长嘴）烟丝",
|
||
// id: "JB17225LQ（CZ）02",
|
||
// startTime: "08:21",
|
||
// pic: getPath.outDevice,
|
||
// picName: "S08喂丝机",
|
||
// },
|
||
// {
|
||
// name: "利群（长嘴）烟丝",
|
||
// id: "JB17225LQ（CZ）02",
|
||
// startTime: "08:21",
|
||
// pic: getPath.outDevice,
|
||
// picName: "S08喂丝机",
|
||
// },
|
||
]);
|
||
// 入库工单
|
||
const inboundWorkOrder = ref([
|
||
// {
|
||
// name: "利群（长嘴）烟丝",
|
||
// id: "JB17225LQ（CZ）02",
|
||
// startTime: "08:21",
|
||
// pic: getPath.inDevice,
|
||
// picName: "S08喂丝机",
|
||
// },
|
||
// {
|
||
// name: "利群（长嘴）烟丝",
|
||
// id: "JB17225LQ（CZ）02",
|
||
// startTime: "08:21",
|
||
// pic: getPath.inDevice,
|
||
// picName: "S08喂丝机",
|
||
// },
|
||
// {
|
||
// name: "利群（长嘴）烟丝",
|
||
// id: "JB17225LQ（CZ）02",
|
||
// startTime: "08:21",
|
||
// pic: getPath.inDevice,
|
||
// picName: "S08喂丝机",
|
||
// },
|
||
]);
|
||
|
||
const asideList = ref([
|
||
{
|
||
default: getPath.devDefault,
|
||
select: getPath.devSelect,
|
||
},
|
||
{
|
||
default: getPath.deviceDefault,
|
||
select: getPath.deviceSelect,
|
||
},
|
||
{
|
||
default: getPath.batteryManagementDefault,
|
||
select: getPath.batteryManagementSelect,
|
||
},
|
||
{
|
||
default: getPath.operationDefault,
|
||
select: getPath.operationSelect,
|
||
},
|
||
]);
|
||
const asideListIndex = ref(-1);
|
||
function asideToggle(index) {
|
||
asideListIndex.value = index;
|
||
}
|
||
// 关闭生产信息弹窗
|
||
// 关闭设备管理弹窗
|
||
function closeDialog(e) {
|
||
asideListIndex.value = e;
|
||
}
|
||
|
||
// 各品牌库存情况
|
||
const brandShow = ref(false);
|
||
function closeBrand(boolean) {
|
||
brandShow.value = boolean;
|
||
}
|
||
const isOpen = ref(false);
|
||
// 消息提醒弹窗
|
||
function closeMsg(boolean) {
|
||
isOpen.value = boolean;
|
||
}
|
||
// 打开消息提醒弹窗
|
||
function openMsg() {
|
||
isOpen.value = true;
|
||
}
|
||
|
||
const inventoryNewsShow = ref(false);
|
||
// 关闭库存消息弹窗
|
||
function closeInventoryNews(boolean) {
|
||
inventoryNewsShow.value = boolean;
|
||
}
|
||
// 打开库存消息弹窗
|
||
function openInventoryNews() {
|
||
inventoryNewsShow.value = true;
|
||
}
|
||
// 出入库工单显隐
|
||
const inOutShow = ref(false);
|
||
const inOutTitle = ref("");
|
||
function closeInOut(boolean) {
|
||
inOutShow.value = boolean;
|
||
}
|
||
/*---------------------------接口方法 */
|
||
// 获取设备状态的接口方法
|
||
function getDeviceStatus() {
|
||
getEquipStatus().then((res) => {
|
||
deviceList.value.forEach((el) => {
|
||
// if(el.deviceStatus)
|
||
for (let key in res.result) {
|
||
if (el.deviceStatus === key) {
|
||
el.deviceNum = res.result[key];
|
||
}
|
||
}
|
||
});
|
||
});
|
||
}
|
||
const brandList = ref([]);
|
||
// 各品牌库存情况接口方法
|
||
function getBrandData() {
|
||
getInventoryInfo().then((res) => {
|
||
// darwBrandChart(res.result);
|
||
// for (let key in res.result[1]) {
|
||
// brandList.value.push({
|
||
// pct: res.result[1][key],
|
||
// name: key,
|
||
// });
|
||
// }
|
||
brandList.value = res.result;
|
||
});
|
||
}
|
||
// 消息提醒
|
||
async function getMessageReminder() {
|
||
// await getCarErrorIn12().then((res) => {
|
||
// res.result.slice(0, 1).forEach((el) => {
|
||
// el.msg = "维修提醒";
|
||
// el.reminderMsg = el.facName + el.facCode + " 需要维修";
|
||
// el.date = el.errorDateTime;
|
||
// messageReminder.value.push(el);
|
||
// });
|
||
// });
|
||
await getOverTransmission().then((res) => {
|
||
res.result.forEach((el) => {
|
||
el.msg = "超时提醒";
|
||
el.reminderMsg = el.itemDesc + el.palletNum + " 任务超时";
|
||
el.date = el.startDate;
|
||
messageReminder.value.push(el);
|
||
});
|
||
});
|
||
}
|
||
// 获取库存消息接口方法
|
||
function getInventory() {
|
||
getLocInfo().then((res) => {
|
||
drawInventoryNewsEcahrt(res.result);
|
||
});
|
||
}
|
||
// 出库工单接口
|
||
function getOutboundWorkOrder() {
|
||
getOutOrder().then((res) => {
|
||
outboundWorkOrder.value = res.result;
|
||
outboundWorkOrder.value.forEach((el) => {
|
||
el.pic = getPath.outDevice;
|
||
});
|
||
});
|
||
}
|
||
// 入库工单接口
|
||
function getInboundWorkOrder() {
|
||
getInOrder().then((res) => {
|
||
inboundWorkOrder.value = res.result;
|
||
inboundWorkOrder.value.forEach((el) => {
|
||
el.pic = getPath.inDevice;
|
||
el.inWeight = formatNumber(el.inWeight);
|
||
el.planWeight = formatNumber(el.planWeight);
|
||
});
|
||
});
|
||
}
|
||
function formatNumber(num) {
|
||
if (typeof num === "number" && !isNaN(num)) {
|
||
// 确认输入参数为有效的数字
|
||
if (Number.isInteger(num)) {
|
||
return num; // 若是整数不做操作
|
||
} else {
|
||
return Number.parseFloat(num).toFixed(2); // 若是小数转换为浮点数并保留两位小数
|
||
}
|
||
} else {
|
||
throw new Error("Invalid input"); // 非法输入时抛出错误
|
||
}
|
||
}
|
||
const mqttList = ref([]);
|
||
// 接受mqtt数据
|
||
function realInfo(topic, message) {
|
||
if (topic == "faults_now") {
|
||
console.log("接收数据1", message);
|
||
const utf8decoder = new TextDecoder();
|
||
const u8arr = new Uint8Array(message);
|
||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||
console.log("temp", temp);
|
||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||
let list = [];
|
||
msg.forEach((el) => {
|
||
el.msg = "维修提醒";
|
||
el.reminderMsg = el.facCode + " 需要维修";
|
||
el.date = el.errorDateTime;
|
||
list.push(el);
|
||
});
|
||
messageReminder.value = list;
|
||
mqttList.value = msg;
|
||
getMessageReminder(); //消息提醒
|
||
}
|
||
}
|
||
onMounted(() => {
|
||
getDeviceStatus(); //获取设备状态
|
||
|
||
getBrandData(); //获取各品牌库存情况
|
||
|
||
getInventory(); //库存消息
|
||
|
||
getOutboundWorkOrder(); //出库工单
|
||
getInboundWorkOrder(); //入库工单
|
||
window.PubScribe(null, realInfo);
|
||
// window.getMqttData = getMqtt;
|
||
|
||
|
||
});
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.kg {
|
||
font-size: 0.875rem;
|
||
margin-left: 0.2rem;
|
||
}
|
||
.unity {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: fixed;
|
||
iframe {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.home-btn {
|
||
position: absolute;
|
||
left: -38%;
|
||
top: 26%;
|
||
&-unity{
|
||
width: 6rem;
|
||
font-size: 1rem;
|
||
padding: 0.5rem;
|
||
background-image: url("@/assets/images/home/unityBtn-D.png");
|
||
background-size: 100% 100%;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
> div:nth-child(2) {
|
||
margin-top: 1.5rem;
|
||
}
|
||
}
|
||
.home-btn-reset {
|
||
width: 6rem;
|
||
font-size: 1rem;
|
||
padding: 0.5rem;
|
||
margin-top: 1rem;
|
||
background-image: url("@/assets/images/home/unityBtn-D.png");
|
||
background-size: 100% 100%;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
.home {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-size: 100% 100%;
|
||
background-image: url("@/assets/images/home/home-bg.png");
|
||
padding: vh(104) vw(20) 0 vw(20);
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
// 标题栏
|
||
&-title {
|
||
background-image: url("@/assets/images/home/home-title.png");
|
||
background-size: 100% 100%;
|
||
height: vh(31);
|
||
padding-left: vw(27);
|
||
display: flex;
|
||
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
&-font {
|
||
text-shadow: 0px 0px 6px #19aefa;
|
||
font-family: "pangmen";
|
||
font-size: 1.2rem;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
&-more {
|
||
background-size: 100% 100%;
|
||
background-image: url("@/assets/images/home/more.png");
|
||
cursor: pointer;
|
||
width: vw(52);
|
||
height: vh(24);
|
||
}
|
||
}
|
||
&-left,
|
||
&-right {
|
||
// background-color: rgba(6, 32, 59, 1);
|
||
|
||
position: relative;
|
||
z-index: 99;
|
||
width: vw(320);
|
||
}
|
||
&-left {
|
||
background-image: url("@/assets/images/home/左侧遮罩.png");
|
||
background-size: 101%;
|
||
// width: 22%;
|
||
&-device {
|
||
display: flex;
|
||
height: vh(186);
|
||
padding: vh(50) 0;
|
||
box-sizing: border-box;
|
||
justify-content: space-around;
|
||
&-box {
|
||
display: flex;
|
||
img {
|
||
width: vw(64);
|
||
height: vh(90);
|
||
margin-right: vw(10);
|
||
}
|
||
p {
|
||
font-size: 1rem;
|
||
margin-top: vh(15);
|
||
margin-bottom: vh(5);
|
||
}
|
||
span {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
&-brand > div {
|
||
margin-bottom: vh(24);
|
||
}
|
||
&-brand::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
&-brand {
|
||
overflow-y: scroll;
|
||
padding: vh(23) vw(10);
|
||
box-sizing: border-box;
|
||
height: vh(388);
|
||
&-progress {
|
||
background-color: rgba(112, 112, 112, 0.23);
|
||
height: vh(8);
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
&-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: vh(10);
|
||
font-size: 0.875rem;
|
||
.pct {
|
||
font-size: 1rem;
|
||
color: rgba(144, 218, 255, 1);
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
&-bg {
|
||
height: 100%;
|
||
|
||
top: 0;
|
||
left: 0;
|
||
position: absolute;
|
||
background: linear-gradient(79deg, #19aefa 0%, #94dbff 100%);
|
||
}
|
||
}
|
||
&-messageReminder::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
&-messageReminder {
|
||
height: vh(180);
|
||
padding: vh(22) vw(12);
|
||
overflow-y: scroll;
|
||
box-sizing: border-box;
|
||
&-data {
|
||
font-size: 0.8rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
&-font {
|
||
width: vw(130);
|
||
}
|
||
}
|
||
&-search {
|
||
:deep(.el-input__inner) {
|
||
height: vh(40);
|
||
font-size: 1rem;
|
||
}
|
||
:deep(.el-input__wrapper) {
|
||
background-image: url("@/assets/images/home/search-input.png");
|
||
background-size: 100% 100%;
|
||
box-shadow: none;
|
||
border-radius: 0;
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
}
|
||
&-right {
|
||
background-image: url("@/assets/images/home/right-bg.png");
|
||
&-inventoryNews {
|
||
height: vh(222);
|
||
}
|
||
&-outboundWorkOrder,
|
||
&-inboundWorkOrder {
|
||
height: vh(388);
|
||
padding: vh(20) vw(20);
|
||
// overflow-y: scroll;
|
||
// display: flex;
|
||
// flex-wrap: wrap;
|
||
// align-content: space-between;
|
||
box-sizing: border-box;
|
||
}
|
||
&-inboundWorkOrder {
|
||
height: vh(205);
|
||
}
|
||
&-outboundWorkOrder-content::-webkit-scrollbar,
|
||
&-inboundWorkOrder-content::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
&-outboundWorkOrder-content,
|
||
&-inboundWorkOrder-content {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow-y: scroll;
|
||
}
|
||
&-outboundWorkOrder-box,
|
||
&-inboundWorkOrder-box {
|
||
margin-bottom: vh(15);
|
||
display: flex;
|
||
.left-plate {
|
||
font-size: 0.75rem;
|
||
text-align: center;
|
||
margin-right: vw(30);
|
||
img {
|
||
width: vw(47);
|
||
height: vh(41);
|
||
}
|
||
.name {
|
||
width: vw(65);
|
||
}
|
||
}
|
||
.right-plate {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: space-around;
|
||
font-size: 0.875rem;
|
||
p {
|
||
width: 100%;
|
||
}
|
||
.id {
|
||
font-size: 1rem;
|
||
color: rgba(144, 218, 255, 1);
|
||
font-weight: 700;
|
||
// margin-bottom: vh(5);
|
||
}
|
||
.start-time {
|
||
span {
|
||
font-size: 1rem;
|
||
color: rgba(28, 238, 251, 1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 底部
|
||
.home-bottom {
|
||
width: 100%;
|
||
position: fixed;
|
||
bottom: vh(-24);
|
||
left: 0;
|
||
height: vh(64.5);
|
||
// height: 41px;
|
||
background-image: url("@/assets/images/home/bottom.png");
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
&-put {
|
||
width: vw(24);
|
||
height: vh(16);
|
||
background-image: url("@/assets/images/home/put.png");
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: vh(-30);
|
||
cursor: pointer;
|
||
}
|
||
ul {
|
||
position: absolute;
|
||
bottom: vh(26);
|
||
display: flex;
|
||
li {
|
||
cursor: pointer;
|
||
width: vw(179);
|
||
height: vh(38);
|
||
background-size: 100% 100%;
|
||
}
|
||
li:nth-child(2) {
|
||
margin: 0 0.625rem;
|
||
}
|
||
li:nth-child(3) {
|
||
margin-right: 0.625rem;
|
||
}
|
||
}
|
||
}
|
||
:deep(.el-timeline-item__wrapper) {
|
||
padding-left: 0.8rem;
|
||
}
|
||
|
||
:deep(.el-timeline) {
|
||
padding-left: 0.3rem;
|
||
box-sizing: border-box;
|
||
padding-top: 0.5rem;
|
||
}
|
||
|
||
:deep(.el-timeline-item) {
|
||
padding-bottom: 0.4rem;
|
||
height: vh(70);
|
||
}
|
||
|
||
:deep(.el-timeline-item__content) {
|
||
color: rgba(233, 244, 255, 1);
|
||
font-size: 1rem;
|
||
padding: 0 0 0 1.5rem;
|
||
//background-image: url('@/assets/images/timeline.png');
|
||
//background-size: 100% 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:deep(.el-timeline-item__node--normal) {
|
||
width: 2.1rem;
|
||
height: 2.1rem;
|
||
left: -10px;
|
||
// top: .3rem;
|
||
background-color: transparent;
|
||
background-size: 100% 100%;
|
||
border-radius: 0;
|
||
background-image: url("@/assets/images/home/reminder.png");
|
||
}
|
||
|
||
:deep(.el-timeline-item__tail) {
|
||
//border-color: #0a6594;
|
||
border: 1px solid rgba(216, 216, 216, 1);
|
||
height: 50%;
|
||
top: 2rem;
|
||
left: 6px;
|
||
}
|
||
</style>
|