代码提交

This commit is contained in:
luoshiwen 2025-01-23 17:12:17 +08:00
parent 9806d73d5b
commit 1181f6b8b7
26 changed files with 959 additions and 391 deletions

BIN
dist.rar

Binary file not shown.

View File

@ -1 +1 @@
10.155.161.49:5005
172.16.1.106:5005

View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
@ -8,211 +9,225 @@
<link rel="stylesheet" href="TemplateData/style.css">
</head>
<style>
body,html{
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
<body>
<div id="unity-container" class="unity-desktop" style="width: 100%;height:100%">
<canvas id="unity-canvas" style="width: 100%;height:100%" tabindex="-1"></canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
<div id="unity-container" class="unity-desktop" style="width: 100%;height:100%">
<canvas id="unity-canvas" style="width: 100%;height:100%" tabindex="-1"></canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-warning"></div>
<div id="unity-footer">
<div id="unity-webgl-logo"></div>
<div id="unity-fullscreen-button"></div>
<div id="unity-build-title">U3D_TobaccoWarehouseISMDTSystem</div>
</div>
</div>
<div id="unity-warning"></div>
<div id="unity-footer">
<div id="unity-webgl-logo"></div>
<div id="unity-fullscreen-button"></div>
<div id="unity-build-title">U3D_TobaccoWarehouseISMDTSystem</div>
</div>
</div>
<button onclick="OpenHtmlMQTT()">Connect</button>
<button onclick="publishMessage()">Publish</button>
<button onclick="disconnectMQTT()">Disconnect</button>
<script src="./js/mqtt.min.js"></script>
<button onclick="OpenHtmlMQTT()">Connect</button>
<button onclick="publishMessage()">Publish</button>
<button onclick="disconnectMQTT()">Disconnect</button>
<script src="./js/mqtt.min.js"></script>
<script>
<script>
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
var warningBanner = document.querySelector("#unity-warning");
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
var warningBanner = document.querySelector("#unity-warning");
// Shows a temporary message banner/ribbon for a few seconds, or
// a permanent error message on top of the canvas if type=='error'.
// If type=='warning', a yellow highlight color is used.
// Modify or remove this function to customize the visually presented
// way that non-critical warnings and error messages are presented to the
// user.
function unityShowBanner(msg, type) {
function updateBannerVisibility() {
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
// Shows a temporary message banner/ribbon for a few seconds, or
// a permanent error message on top of the canvas if type=='error'.
// If type=='warning', a yellow highlight color is used.
// Modify or remove this function to customize the visually presented
// way that non-critical warnings and error messages are presented to the
// user.
function unityShowBanner(msg, type) {
function updateBannerVisibility() {
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
}
var div = document.createElement('div');
div.innerHTML = msg;
warningBanner.appendChild(div);
if (type == 'error') div.style = 'background: red; padding: 10px;';
else {
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
setTimeout(function () {
warningBanner.removeChild(div);
updateBannerVisibility();
}, 5000);
}
updateBannerVisibility();
}
var div = document.createElement('div');
div.innerHTML = msg;
warningBanner.appendChild(div);
if (type == 'error') div.style = 'background: red; padding: 10px;';
else {
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
setTimeout(function () {
warningBanner.removeChild(div);
updateBannerVisibility();
}, 5000);
var buildUrl = "Build";
var loaderUrl = buildUrl + "/webgl.loader.js";
var config = {
dataUrl: buildUrl + "/webgl.data.unityweb",
frameworkUrl: buildUrl + "/webgl.framework.js.unityweb",
codeUrl: buildUrl + "/webgl.wasm.unityweb",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "U3D_TobaccoWarehouseISMDTSystem",
productVersion: "0.1",
showBanner: unityShowBanner,
};
// By default, Unity keeps WebGL canvas render target size matched with
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
// Set this to false if you want to decouple this synchronization from
// happening inside the engine, and you would instead like to size up
// the canvas DOM size and WebGL render target sizes yourself.
// config.matchWebGLToCanvasSize = false;
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
// Mobile device style: fill the whole browser client area with the game canvas:
var meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
document.getElementsByTagName('head')[0].appendChild(meta);
container.className = "unity-mobile";
canvas.className = "unity-mobile";
// To lower canvas resolution on mobile devices to gain some
// performance, uncomment the following line:
// config.devicePixelRatio = 1;
} else {
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
// canvas.style.width = "960px";
// canvas.style.height = "600px";
}
updateBannerVisibility();
}
var buildUrl = "Build";
var loaderUrl = buildUrl + "/webgl.loader.js";
var config = {
dataUrl: buildUrl + "/webgl.data.unityweb",
frameworkUrl: buildUrl + "/webgl.framework.js.unityweb",
codeUrl: buildUrl + "/webgl.wasm.unityweb",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "U3D_TobaccoWarehouseISMDTSystem",
productVersion: "0.1",
showBanner: unityShowBanner,
};
// By default, Unity keeps WebGL canvas render target size matched with
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
// Set this to false if you want to decouple this synchronization from
// happening inside the engine, and you would instead like to size up
// the canvas DOM size and WebGL render target sizes yourself.
// config.matchWebGLToCanvasSize = false;
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
// Mobile device style: fill the whole browser client area with the game canvas:
var meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
document.getElementsByTagName('head')[0].appendChild(meta);
container.className = "unity-mobile";
canvas.className = "unity-mobile";
// To lower canvas resolution on mobile devices to gain some
// performance, uncomment the following line:
// config.devicePixelRatio = 1;
} else {
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
//----------------------------------------------------------------------------------MQTT-----------------------------------------------------------------------------
let client;
// canvas.style.width = "960px";
// canvas.style.height = "600px";
}
function OpenHtmlMQTT() {
client = mqtt.connect('ws://10.155.161.49:8083/mqtt');
client.on('connect', () => {
console.log('连接...');
//----------------------------------------------------------------------------------MQTT-----------------------------------------------------------------------------
let client;
const devices = [
"cm1",//去加盖机
Array.from({ length: 7 }, (_, i) => `elv${i + 1}`),//提升机
Array.from({ length: 7 }, (_, i) => `convoyor510${i + 1}`),//输送机
Array.from({ length: 51 }, (_, i) => `convoyor52${String(i + 1).padStart(2, '0')}`),//输送机
Array.from({ length: 30 }, (_, i) => `convoyor54${String(i + 1).padStart(2, '0')}`),//输送机
Array.from({ length: 4 }, (_, i) => `dpm${i + 1}`),//拆码垛机
Array.from({ length: 2 }, (_, i) => `fxj${i + 1}`),////机械手臂
Array.from({ length: 8 }, (_, i) => `car${i + 1}`),//小车
"fe1",//落地时提升机
Array.from({ length: 2 }, (_, i) => `qcbd${i + 1}`)//快换电池装置
];
function OpenHtmlMQTT() {
client = mqtt.connect('ws://10.155.161.49:8083/mqtt');
client.on('connect', () => {
console.log('连接...');
const devices = [
"cm1",//去加盖机
Array.from({length: 7}, (_, i) => `elv${i + 1}`),//提升机
Array.from({length: 7}, (_, i) => `convoyor510${i + 1}`),//输送机
Array.from({length: 51}, (_, i) => `convoyor52${String(i + 1).padStart(2, '0')}`),//输送机
Array.from({length: 30}, (_, i) => `convoyor54${String(i + 1).padStart(2, '0')}`),//输送机
Array.from({ length: 4 }, (_, i) => `dpm${i + 1}`),//拆码垛机
Array.from({ length: 2 }, (_, i) => `fxj${i + 1}`),////机械手臂
Array.from({length: 8}, (_, i) => `car${i + 1}`),//小车
"fe1",//落地时提升机
Array.from({length: 2}, (_, i) => `qcbd${i + 1}`)//快换电池装置
];
devices.forEach(device => {
console.log(device);
client.subscribe(device, {
onSuccess: () => {
console.log(`已订阅: ${device}`);
},
onFailure: (err) => {
console.error(`订阅失败: ${device}:`, err);
}
devices.forEach(device => {
console.log(device);
client.subscribe(device, {
onSuccess: () => {
console.log(`已订阅: ${device}`);
},
onFailure: (err) => {
console.error(`订阅失败: ${device}:`, err);
}
});
});
// client.subscribe('car1', (err) => {
// if (!err) {
// console.log('Subscribed to car1');
// }
// });
//
});
client.on('message', (topic, message) => {
// client.subscribe('car1', (err) => {
// if (!err) {
// console.log('Subscribed to car1');
// }
// });
//
const mes = JSON.stringify({ device: topic, message: message.toString() });
});
// console.log(mes);
client.on('message', (topic, message) => {
unityInstance.SendMessage('APP', 'Message', mes)
const mes = JSON.stringify({device: topic, message: message.toString()});
});
// console.log(mes);
unityInstance.SendMessage('APP', 'Message', mes)
});
client.on('error', (err) => {
console.error('Connection error: ', err);
});
}
function publishMessage() {
if (client) {
client.publish('car1', 'Hello');
}
}
function disconnectMQTT() {
if (client) {
client.end(() => {
console.log('关闭连接');
client.on('error', (err) => {
console.error('Connection error: ', err);
});
}
}
//----------------------------------------------------------------------------------MQTT-----------------------------------------------------------------------------
function publishMessage() {
if (client) {
client.publish('car1', 'Hello');
}
}
function disconnectMQTT() {
if (client) {
client.end(() => {
console.log('关闭连接');
});
}
}
//----------------------------------------------------------------------------------MQTT-----------------------------------------------------------------------------
loadingBar.style.display = "block";
loadingBar.style.display = "block";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
loadingBar.style.display = "none";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
loadingBar.style.display = "none";
// 为window添加unityInstance对象
window.unityInstance = unityInstance
// 为window添加unityInstance对象
window.unityInstance = unityInstance
fullscreenButton.onclick = () => {
unityInstance.SetFullscreen(1);
};
}).catch((message) => {
alert(message);
});
};
fullscreenButton.onclick = () => {
unityInstance.SetFullscreen(1);
};
}).catch((message) => {
alert(message);
});
};
function openCar(data) {
unityInstance.SendMessage('Canvas', 'Popupwindow', data)
}
function unityBoxHandle(val) {
if (val) {
unityInstance.SendMessage('Canvas', 'Partialhiding', val)
} else {
console.log(val,'xxxxxxxxxxx');
unityInstance.SendMessage('Canvas', 'Boxshow')
document.body.appendChild(script);
}
}
document.body.appendChild(script);
</script>
</script>
</body>
</html>
</html>

234
public/model/index1.html Normal file
View File

@ -0,0 +1,234 @@
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | U3D_TobaccoWarehouseISMDTSystem</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
</head>
<style>
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
<body>
<div id="unity-container" class="unity-desktop" style="width: 100%;height:100%">
<canvas id="unity-canvas" style="width: 100%;height:100%" tabindex="-1"></canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-warning"></div>
<div id="unity-footer">
<div id="unity-webgl-logo"></div>
<div id="unity-fullscreen-button"></div>
<div id="unity-build-title">U3D_TobaccoWarehouseISMDTSystem</div>
</div>
</div>
<button onclick="OpenHtmlMQTT()">Connect</button>
<button onclick="publishMessage()">Publish</button>
<button onclick="disconnectMQTT()">Disconnect</button>
<script src="./js/mqtt.min.js"></script>
<script>
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
var warningBanner = document.querySelector("#unity-warning");
// Shows a temporary message banner/ribbon for a few seconds, or
// a permanent error message on top of the canvas if type=='error'.
// If type=='warning', a yellow highlight color is used.
// Modify or remove this function to customize the visually presented
// way that non-critical warnings and error messages are presented to the
// user.
function unityShowBanner(msg, type) {
function updateBannerVisibility() {
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
}
var div = document.createElement('div');
div.innerHTML = msg;
warningBanner.appendChild(div);
if (type == 'error') div.style = 'background: red; padding: 10px;';
else {
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
setTimeout(function () {
warningBanner.removeChild(div);
updateBannerVisibility();
}, 5000);
}
updateBannerVisibility();
}
var buildUrl = "Build";
var loaderUrl = buildUrl + "/webgl.loader.js";
var config = {
dataUrl: buildUrl + "/webgl.data.unityweb",
frameworkUrl: buildUrl + "/webgl.framework.js.unityweb",
codeUrl: buildUrl + "/webgl.wasm.unityweb",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "U3D_TobaccoWarehouseISMDTSystem",
productVersion: "0.1",
showBanner: unityShowBanner,
};
// By default, Unity keeps WebGL canvas render target size matched with
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
// Set this to false if you want to decouple this synchronization from
// happening inside the engine, and you would instead like to size up
// the canvas DOM size and WebGL render target sizes yourself.
// config.matchWebGLToCanvasSize = false;
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
// Mobile device style: fill the whole browser client area with the game canvas:
var meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
document.getElementsByTagName('head')[0].appendChild(meta);
container.className = "unity-mobile";
canvas.className = "unity-mobile";
// To lower canvas resolution on mobile devices to gain some
// performance, uncomment the following line:
// config.devicePixelRatio = 1;
} else {
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
// canvas.style.width = "960px";
// canvas.style.height = "600px";
}
//----------------------------------------------------------------------------------MQTT-----------------------------------------------------------------------------
let client;
function OpenHtmlMQTT() {
client = mqtt.connect('ws://10.155.161.49:8083/mqtt');
client.on('connect', () => {
console.log('连接...');
const devices = [
"cm1",//去加盖机
Array.from({ length: 7 }, (_, i) => `elv${i + 1}`),//提升机
Array.from({ length: 7 }, (_, i) => `convoyor510${i + 1}`),//输送机
Array.from({ length: 51 }, (_, i) => `convoyor52${String(i + 1).padStart(2, '0')}`),//输送机
Array.from({ length: 30 }, (_, i) => `convoyor54${String(i + 1).padStart(2, '0')}`),//输送机
Array.from({ length: 4 }, (_, i) => `dpm${i + 1}`),//拆码垛机
Array.from({ length: 2 }, (_, i) => `fxj${i + 1}`),////机械手臂
Array.from({ length: 8 }, (_, i) => `car${i + 1}`),//小车
"fe1",//落地时提升机
Array.from({ length: 2 }, (_, i) => `qcbd${i + 1}`)//快换电池装置
];
devices.forEach(device => {
console.log(device);
client.subscribe(device, {
onSuccess: () => {
console.log(`已订阅: ${device}`);
},
onFailure: (err) => {
console.error(`订阅失败: ${device}:`, err);
}
});
});
// client.subscribe('car1', (err) => {
// if (!err) {
// console.log('Subscribed to car1');
// }
// });
//
});
client.on('message', (topic, message) => {
const mes = JSON.stringify({ device: topic, message: message.toString() });
// console.log(mes);
unityInstance.SendMessage('APP', 'Message', mes)
});
client.on('error', (err) => {
console.error('Connection error: ', err);
});
}
function publishMessage() {
if (client) {
client.publish('car1', 'Hello');
}
}
function disconnectMQTT() {
if (client) {
client.end(() => {
console.log('关闭连接');
});
}
}
//----------------------------------------------------------------------------------MQTT-----------------------------------------------------------------------------
loadingBar.style.display = "block";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
loadingBar.style.display = "none";
// 为window添加unityInstance对象
window.unityInstance = unityInstance
fullscreenButton.onclick = () => {
unityInstance.SetFullscreen(1);
};
}).catch((message) => {
alert(message);
});
};
function openCar(data) {
// console.log(data);
unityInstance.SendMessage('Canvas', 'Popupwindow', data)
}
function unityBoxHandle(val) {
if (val) {
unityInstance.SendMessage('Canvas', 'Partialhiding', val)
} else {
console.log(val,'xxxxxxxxxxx');
unityInstance.SendMessage('Canvas', 'Boxshow')
}
}
document.body.appendChild(script);
</script>
</body>
</html>

View File

@ -0,0 +1,49 @@
import request from '@/utils/request'
// 电池位监控
export function getBatteryMonitor(params){
return request({
url:'/api/chargingApi/MonitorRealTime',
method:'get',
params
})
}
// 获取电池编号的基本信息
export function getBatteryStatics(params){
return request({
url:'/api/chargingApi/GetBatteryStatics',
method:'get',
params
})
}
// 统计充电时间
export function countChargeTime(params){
return request({
url:'/api/chargingApi/CountChargeTime',
method:'get',
params
})
}
// 电池检测
export function getBatteryInspect(params){
return request({
url:'/api/chargingApi/GetBatteryInspect',
method:'get',
params
})
}
// 获取所有电池位编号
export function getAllBatteryNum(params){
return request({
url:'/api/chargingApi/GetAllBatteryNum',
method:'get',
params
})
}
// 获取全部电池位置
export function getBatteryLocation(params){
return request({
url:'/api/chargingApi/GetBatteryLocation',
method:'get',
params
})
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

View File

@ -14,7 +14,12 @@
</div>
<p>电池编号</p>
<ul>
<li v-for="(item, index) in batteryNumList" :key="'li' + index">
<li
v-for="(item, index) in batteryNumList"
:class="batteryIndex == index ? 'selectBat' : ''"
:key="'li' + index"
@click="clickBat(item)"
>
{{ item }}
</li>
</ul>
@ -62,20 +67,24 @@
label="充电结束时间"
align="center"
/>
<el-table-column prop="errorMsg" label="故障信息" align="right" />
<el-table-column
prop="isError"
label="故障信息"
align="right"
/>
</el-table>
</div>
<div style="float: right">
<el-pagination
v-model:current-page="currentPage1"
:page-size="100"
:size="size"
v-model:current-page="tableParams.index"
:page-size="tableParams.size"
:size="tableParams.size"
layout="total, prev, pager, next"
:total="1000"
:total="total"
prev-text="上一页"
@current-change="getBatteryInspectData"
next-text="下一页"
>
</el-pagination>
</div>
@ -89,10 +98,20 @@
import { ref, onMounted, nextTick } from "vue";
import getPath from "@/utils/getPath";
import * as echarts from "echarts";
import {
getBatteryMonitor,
getBatteryStatics,
countChargeTime,
getAllBatteryNum,
getBatteryInspect,
} from "@/api/batteryManagement/index.js";
import moment from "moment";
const batteryNumList = ref([
20230013, 20230013, 20230013, 20230013, 20230013, 20230013, 20230013,
20230013, 20230013, 20230013, 20230013, 20230013, 20230013, 20230013,
// 20230013, 20230013, 20230013, 20230013, 20230013, 20230013, 20230013,
// 20230013, 20230013, 20230013, 20230013, 20230013, 20230013, 20230013,
]);
const selectBattery = ref("");
const batteryIndex = ref(0);
const analysisList = ref([
{
pic: getPath.analysisItem1,
@ -103,7 +122,7 @@ const analysisList = ref([
{
pic: getPath.analysisItem2,
name: "充电次数(次)",
num: 3,
num: 0,
color: "rgba(25, 174, 250, 1)",
},
{
@ -116,28 +135,44 @@ const analysisList = ref([
const emit = defineEmits(["closeBattery"]);
const tableList = ref([
{
startTime: "2023-03-08T17:45:04.417",
endTime:'2023-03-08T17:45:04.417',
errorMsg:'无故障'
},
{
startTime: "2023-03-08T17:45:04.417",
endTime:'2023-03-08T17:45:04.417',
errorMsg:'无故障'
},
// {
// startTime: "2023-03-08T17:45:04.417",
// endTime: "2023-03-08T17:45:04.417",
// isError: "",
// },
// {
// startTime: "2023-03-08T17:45:04.417",
// endTime: "2023-03-08T17:45:04.417",
// isError: "",
// },
]);
const total = ref(0);
const tableParams = ref({
index: 1,
size: 5,
});
function close() {
emit("closeBattery", -1);
}
function drawLineChart() {
function drawLineChart(data) {
let dom = document.querySelector("#plate-chart");
dom.removeAttribute("_echarts_instance_");
let myChart;
myChart = echarts.init(dom);
let list = [];
data.forEach((item) => {
console.log();
list.push({
value:moment.duration(item).asMinutes().toFixed(1)
});
});
console.log(list, "数组");
// data = [];
let option = {
tooltip: {},
tooltip: {
trigger: 'axis',
},
grid: {
top: "20%",
left: "1%",
@ -168,7 +203,9 @@ function drawLineChart() {
},
},
axisTick: { show: false },
data: ["1", "2", "3"],
data: data.map((el, index) => {
return index;
}),
},
],
yAxis: [
@ -178,7 +215,7 @@ function drawLineChart() {
nameTextStyle: {
color: "#FFF",
align: "middle",
padding: [0, 0, 0, 0],
padding: data.length === 0 ? [0, -35, 0, 0] : [0, 0, 0, 0],
},
// min: 0,
// max: 1,
@ -231,7 +268,9 @@ function drawLineChart() {
shadowBlur: 20, //shadowBlurshadowColor,shadowOffsetX/Y,
},
},
data: [0.3, 0.8, 0.4, 0.5, 0.8, 0.9, 0.4],
data: list.map((el) => {
return el.value;
}),
},
],
};
@ -244,11 +283,74 @@ function drawLineChart() {
});
}
//
function getAllBettery() {
getAllBatteryNum().then((res) => {
if (res.code == 200) {
batteryNumList.value = res.result;
selectBattery.value = res.result[0];
getRightData();
} else {
return;
}
});
}
//
function getRightData() {
getBetteryDetail();
getCountChargeTime();
getBatteryInspectData();
}
function clickBat(item) {
selectBattery.value = item;
getRightData();
}
//
function getBetteryDetail() {
let params = {
batteryNo: selectBattery.value,
};
getBatteryStatics(params).then((res) => {
analysisList.value.forEach((el) => {
if (el.name.indexOf("报警次数") != -1) {
el.num = res.result.errorNum;
} else if (el.name.indexOf("充电次数") != -1) {
el.num = res.result.chargeNum;
} else if (el.name.indexOf("使用寿命") != -1) {
el.num = res.result.useTime;
}
});
});
}
//
function getCountChargeTime() {
let params = {
batteryNo: selectBattery.value,
};
countChargeTime(params).then((res) => {
if (res.code == 200) {
drawLineChart(res.result);
}
});
}
//
function getBatteryInspectData() {
tableParams.value.batteryNo = selectBattery.value;
getBatteryInspect(tableParams.value).then((res) => {
total.value = res.result.totalNum;
tableList.value = res.result.data;
});
}
onMounted(() => {
drawLineChart();
// drawLineChart();
getAllBettery();
});
</script>
<style scoped lang="scss">
.selectBat {
background-image: url("@/assets/images/dialog/num-select.png") !important;
}
.box {
width: vw(1380);
height: vh(716);
@ -320,6 +422,7 @@ onMounted(() => {
li {
width: vw(224);
height: vh(36);
background-size: 100% 100%;
background-image: url("@/assets/images/dialog/num-default.png");
padding-left: vw(14);
box-sizing: border-box;
@ -424,8 +527,8 @@ onMounted(() => {
.bottom {
position: relative;
&-box {
height: vh(150);
margin-bottom: vh(32);
height: vh(180);
// margin-bottom: vh(32);
}
}
}

View File

@ -2,59 +2,68 @@
<div :id="'pieChart' + dataMap.id"></div>
</template>
<script setup>
import { ref, onMounted,watch ,defineProps} from "vue";
import { ref, onMounted, watch, defineProps } from "vue";
import * as echarts from "echarts";
import getPath from "@/utils/getPath";
import { fontSize } from "@/utils/common";
const props = defineProps({
dataMap: Object,
});
defineExpose({
drawChart
})
drawChart,
});
function drawChart() {
let myChart = echarts.init(
document.getElementById("pieChart" + props.dataMap.id)
);
let option = {
graphic: {
/**
* 主要代码图形中心展示图片
*/
elements: [
{
type: 'image',
style: {
image: props.dataMap.name==='库存数量'?getPath.pieBg1:getPath.pieBg2, //
width: 132,
height: 132
},
// left: '18.5%',
left: 'center', // 1
top: 'center'
}
]
/**
* 主要代码图形中心展示图片
*/
elements: [
{
type: "image",
style: {
image:
props.dataMap.name === "库存数量"
? getPath.pieBg1
: getPath.pieBg2, //
width: fontSize(1.32),
height: fontSize(1.32),
},
// left: '18.5%',
left: "center", // 1
top: "center",
},
],
},
title: [{
text: props.dataMap.name,
x: "center",
y: "85",
textStyle: {
color: props.dataMap.name==='库存数量'?"rgba(174, 211, 255, 1)":"rgba(255, 247, 228, 1)",
fontSize: 12,
fontWeight: "normal",
title: [
{
text: props.dataMap.name,
x: "center",
y: "50%",
textStyle: {
color:
props.dataMap.name === "库存数量"
? "rgba(174, 211, 255, 1)"
: "rgba(255, 247, 228, 1)",
fontSize: 12,
fontWeight: "normal",
},
},
},
{
text: props.dataMap.value,
x: "center",
y: "50",
textStyle: {
color: "#fff",
fontSize: 30,
fontWeight: "normal",
{
text: props.dataMap.value,
x: "center",
y: "35%",
textStyle: {
color: "#fff",
fontSize: 30,
fontWeight: "normal",
},
},
}],
],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
@ -76,30 +85,35 @@ function drawChart() {
value: props.dataMap.value,
name: props.dataMap.name,
itemStyle: {
borderColor:'transparent',
borderWidth:0,
borderColor: "transparent",
borderWidth: 0,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color:props.dataMap.name==='库存数量'?'rgba(45, 204, 255, .3)':'rgba(255, 206, 84, .0)',
color:
props.dataMap.name === "库存数量"
? "rgba(45, 204, 255, .3)"
: "rgba(255, 206, 84, .0)",
},
{
offset: 1,
color: props.dataMap.name==='库存数量'?'rgba(45, 204, 255, 1)':'rgba(255, 206, 84, 1)',
color:
props.dataMap.name === "库存数量"
? "rgba(45, 204, 255, 1)"
: "rgba(255, 206, 84, 1)",
},
]),
},
labelLine:{show:false},
label:{show:false}
labelLine: { show: false },
label: { show: false },
},
{
value: props.dataMap.total - props.dataMap.value,
name: "",
tooltip:{
show:false
tooltip: {
show: false,
},
itemStyle: {
color: "transparent",
},
},
@ -108,6 +122,10 @@ function drawChart() {
],
};
myChart.setOption(option);
// window.addEventListener()
window.addEventListener("resize", function () {
myChart.resize();
});
}
onMounted(() => {
// darwChart();

View File

@ -128,7 +128,6 @@ import {
getDeviceDetail,
} from "@/api/equipmentManagement/index";
const emit = defineEmits(["closeDeviceInfo"]);
const tableList = ref([]);
//
@ -278,6 +277,7 @@ onMounted(() => {
display: flex;
&-left,
&-right {
font-size: 1rem;
padding: vw(20) vh(20);
box-sizing: border-box;
height: 100%;

View File

@ -94,8 +94,8 @@
:key="index"
>
<p>
<span>{{item.elementName }} {{item.elementCode}}</span>
<span>{{ item.damageRatio*100 }}%</span>
<span style="font-size:1rem">{{item.elementName }} {{item.elementCode}}</span>
<span style="font-size:1rem">{{ item.damageRatio*100 }}%</span>
</p>
<div class="switch-item-progress" :style="'width:' + item.damageRatio*100 + '%'"></div>
<div class="switch-item-time">

View File

@ -764,6 +764,7 @@ onMounted(() => {
}
}
&-right {
font-size: 1rem;
.handle,
.untreated {
width: vw(352);

View File

@ -11,20 +11,32 @@
<span>监测分析统计</span>
<div class="box-content-selelct">
<el-form :inline="true" :model="form" class="demo-form-inline">
<el-form-item label="电池筛选">
<el-form-item label="电池筛选">
<el-select
v-model="form.battery"
v-model="form.location"
placeholder="请选择"
clearable
@change="getData()"
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
<el-option
:key="index"
:label="item"
:value="item"
v-for="(item, index) in batteryList"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="时间筛选">
<el-select v-model="form.date" placeholder="请选择" clearable>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
<el-select v-model="form.timeFrame" placeholder="请选择">
<el-option
:label="item + '小时'"
:value="item"
:key="index"
v-for="(item, index) in dateList"
/>
<!-- <el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" /> -->
</el-select>
</el-form-item>
</el-form>
@ -41,16 +53,27 @@
<script setup>
import * as echarts from "echarts";
import { onMounted, reactive, ref } from "vue";
import {
getBatteryMonitor,
getBatteryLocation,
} from "@/api/batteryManagement/index.js";
const emit = defineEmits(["closeOnline"]);
function close() {
emit("closeOnline", -1);
}
const form = reactive({
battery: "", //
date: "",
location: "", //
timeFrame: 1,
});
const batteryList = ref([]);
const dateList = ref([
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
23,
]);
const list = ref([]);
// echart
function drawElectricity() {
function drawElectricity(list) {
let dom = document.querySelector("#electricity");
dom.removeAttribute("_echarts_instance_");
let myChart;
@ -62,40 +85,46 @@ function drawElectricity() {
top: "5%",
right: "center",
itemWidth: 16,
itemHeight:4,
itemGap:20,
itemHeight: 4,
itemGap: 20,
textStyle: {
color: "#fff",
},
},
tooltip: {
trigger: "axis",
borderColor:'rgba(174, 211, 255, 1)',
backgroundColor: 'rgba(8, 54, 86, .7)',
borderColor: "rgba(174, 211, 255, 1)",
backgroundColor: "rgba(8, 54, 86, .7)",
textStyle: {
color: "#FFF",
},
padding: [10, 10],
formatter: function (params) {
// params
let result = params[0].name + '<br/>';
params.forEach(function (item) {
result += item.seriesName + ': ' + item.value + (item.seriesName=='电流'?'A':'V') + '<br/>';
});
return result;
}
// params
let result = params[0].name + "<br/>";
params.forEach(function (item) {
result +=
item.seriesName +
": " +
item.value +
(item.seriesName == "电流" ? "A" : "V") +
"<br/>";
});
return result;
},
},
grid: {
top: "20%",
right:'4%',
left:'2%',
bottom:'6%'
right: "4%",
left: "2%",
bottom: "6%",
},
xAxis: [
{
type: "category",
data: ["3.10", "3.10", "3.10", "3.10", "3.10", "3.10", "3.10"],
data: list.map((el, index) => {
return index;
}),
axisLine: {
lineStyle: {
color: "rgba(56, 72, 89, 1)",
@ -106,7 +135,7 @@ function drawElectricity() {
show: false,
},
axisLabel: {
show:false,
show: false,
interval: 0,
textStyle: {
color: "#fff",
@ -148,10 +177,10 @@ function drawElectricity() {
],
yAxis: [
{
name:'单位:V',
nameTextStyle:{
color:'#fff',
padding:[0,0,0,-10]
name: "单位:A",
nameTextStyle: {
color: "#fff",
padding: [0, 0, 0, -10],
},
type: "value",
axisTick: {
@ -170,18 +199,18 @@ function drawElectricity() {
},
splitLine: {
show: true,
lineStyle:{
type:'dashed',
color:'rgba(255,255,255,0.2)'
}
lineStyle: {
type: "dashed",
color: "rgba(255,255,255,0.2)",
},
},
},
{
name:'单位:A',
name: "单位:V",
type: "value",
nameTextStyle:{
color:'#fff',
padding:[0,-30,0,0]
nameTextStyle: {
color: "#fff",
padding: [0, -30, 0, 0],
},
position: "right",
axisTick: {
@ -205,7 +234,9 @@ function drawElectricity() {
{
name: "电流",
type: "line",
data: [10, 10, 30, 12, 15, 3, 7],
data: list.map((el) => {
return el.outCurrent;
}),
symbolSize: 1,
symbol: "circle",
smooth: true,
@ -213,13 +244,15 @@ function drawElectricity() {
showSymbol: false,
lineStyle: {
// width: 1,
color: 'rgba(25, 174, 250, 1)'
}
color: "rgba(25, 174, 250, 1)",
},
},
{
name: "电压",
type: "line",
data: [150, 120, 170, 140, 500, 160, 110],
data: list.map((el) => {
return el.outVoltage;
}),
symbolSize: 1,
yAxisIndex: 1,
symbol: "circle",
@ -227,11 +260,10 @@ function drawElectricity() {
showSymbol: false,
lineStyle: {
// width: 5,
color: 'rgba(28, 238, 251, 1)'
color: "rgba(28, 238, 251, 1)",
},
itemStyle: {
color: 'rgba(28, 238, 251, 1)',
color: "rgba(28, 238, 251, 1)",
},
},
],
@ -239,52 +271,58 @@ function drawElectricity() {
myChart.setOption(option);
}
// echarts
function drawHeartChart(){
function drawHeartChart(list) {
let dom = document.querySelector("#heart");
dom.removeAttribute("_echarts_instance_");
let myChart;
myChart = echarts.init(dom);
const colorList = ["rgba(25, 174, 250, 1)", "rgba(28, 238, 251, 1)", "rgba(255, 206, 84, 1)", "rgba(174, 211, 255, 1)"];
const colorList = [
"rgba(25, 174, 250, 1)",
"rgba(28, 238, 251, 1)",
"rgba(255, 206, 84, 1)",
"rgba(174, 211, 255, 1)",
];
let option = {
legend: {
icon: "rect",
top: "5%",
right: "center",
itemWidth: 16,
itemHeight:4,
itemGap:20,
itemHeight: 4,
itemGap: 20,
textStyle: {
color: "#fff",
},
},
tooltip: {
trigger: "axis",
borderColor:'rgba(174, 211, 255, 1)',
backgroundColor: 'rgba(8, 54, 86, .7)',
borderColor: "rgba(174, 211, 255, 1)",
backgroundColor: "rgba(8, 54, 86, .7)",
textStyle: {
color: "#FFF",
},
padding: [10, 10],
formatter: function (params) {
// params
let result = params[0].name + '<br/>';
params.forEach(function (item) {
result += item.seriesName + ': ' + item.value + '℃' + '<br/>';
});
return result;
}
// params
let result = params[0].name + "<br/>";
params.forEach(function (item) {
result += item.seriesName + ": " + item.value + "℃" + "<br/>";
});
return result;
},
},
grid: {
top: "20%",
right:'4%',
left:'2%',
bottom:'6%'
right: "4%",
left: "2%",
bottom: "6%",
},
xAxis: [
{
type: "category",
data: ["3.10", "3.10", "3.10", "3.10", "3.10", "3.10", "3.10"],
data: list.map((el, index) => {
return index;
}),
axisLine: {
lineStyle: {
color: "rgba(56, 72, 89, 1)",
@ -295,7 +333,7 @@ function drawHeartChart(){
show: false,
},
axisLabel: {
show:false,
show: false,
interval: 0,
textStyle: {
color: "#fff",
@ -337,10 +375,10 @@ function drawHeartChart(){
],
yAxis: [
{
name:'单位:V',
nameTextStyle:{
color:'#fff',
padding:[0,0,0,-10]
name: "单位:V",
nameTextStyle: {
color: "#fff",
padding: [0, 0, 0, -10],
},
type: "value",
axisTick: {
@ -359,19 +397,20 @@ function drawHeartChart(){
},
splitLine: {
show: true,
lineStyle:{
type:'dashed',
color:'rgba(255,255,255,0.2)'
}
lineStyle: {
type: "dashed",
color: "rgba(255,255,255,0.2)",
},
},
},
],
series: [
{
name: "温度1",
type: "line",
data: [10, 10, 30, 12, 15, 3, 7],
data: list.map((el) => {
return el.outTemp01;
}),
symbolSize: 1,
symbol: "rect",
smooth: true,
@ -379,59 +418,81 @@ function drawHeartChart(){
showSymbol: false,
lineStyle: {
// width: 1,
color: colorList[0]
}
color: colorList[0],
},
},
{
name: "温度2",
type: "line",
data: [22, 3, 4, 5, 6, 9, 11],
data: list.map((el) => {
return el.outTemp02;
}),
symbolSize: 1,
symbol: "rect",
smooth: true,
showSymbol: false,
lineStyle: {
// width: 5,
color: colorList[1]
color: colorList[1],
},
},
{
name: "温度3",
type: "line",
data: [22, 3, 4, 5, 6, 9, 11],
data: list.map((el) => {
return el.outTemp03;
}),
symbolSize: 1,
symbol: "rect",
smooth: true,
showSymbol: false,
lineStyle: {
// width: 5,
color: colorList[2]
color: colorList[2],
},
},
{
name: "温度4",
type: "line",
data: [50, 34, 54, 11, 33, 22, 11],
data: list.map((el) => {
return el.outTemp04;
}),
symbolSize: 1,
symbol: "rect",
smooth: true,
showSymbol: false,
lineStyle: {
// width: 5,
color: colorList[3]
color: colorList[3],
},
itemStyle:{
color:colorList[3]
}
}
itemStyle: {
color: colorList[3],
},
},
],
};
myChart.setOption(option);
}
// echarts
function getData() {
getBatteryMonitor(form).then((res) => {
drawElectricity(res.result);
drawHeartChart(res.result);
});
}
function getBatteryList() {
getBatteryLocation().then((res) => {
if (res.code == 200) {
batteryList.value = res.result;
}
console.log(batteryList.value, "batteryList.value");
});
}
getBatteryList();
onMounted(() => {
drawElectricity();
drawHeartChart();
getData();
});
</script>
<style scoped lang="scss">

View File

@ -113,6 +113,7 @@ onMounted(() => {
<style scoped lang="scss">
.box {
width: vw(1380);
font-size: 1rem;
height: vh(716);
position: absolute;
left: 0;

View File

@ -203,6 +203,7 @@ onMounted(() => {
}
&-left {
width: vw(340);
background-size: 100% 100%;
height: vh(616);
background-image: url("@/assets/images/dialog/knowledgeBase-left.png");
padding: vh(20) vw(20);

View File

@ -6,13 +6,13 @@
<div class="box-btn" @click="close"></div>
</div>
<div class="box-content">
<el-table :data="list" style="width: 100%">
<el-table-column prop="itemDesc" label="品牌" width="150" />
<el-table-column prop="batchNum" label="批次号" width="250"/>
<el-table-column prop="inTime" label="入库时间" width="240"/>
<el-table-column prop="weight" label="重量(kg)" width="160"/>
<el-table-column prop="boxCount" label="箱数" />
<el-table-column prop="status" label="是否入库" />
<el-table v-fit-columns :data="list" @row-click="rowClick" style="width: 100%">
<el-table-column prop="itemDesc" label="品牌" min-width="20%" />
<el-table-column prop="batchNum" label="批次号" min-width="25%"/>
<el-table-column prop="inTime" label="入库时间" min-width="20%"/>
<el-table-column prop="weight" label="重量(kg)" min-width="15%"/>
<el-table-column prop="boxCount" label="箱数" min-width="10%"/>
<el-table-column prop="status" label="是否入库" min-width="10%"/>
</el-table>
</div>
</div>
@ -22,7 +22,7 @@
import { onMounted, ref } from "vue";
import {getInventoryMessage} from '@/api/home'
import getPath from "@/utils/getPath";
const emit = defineEmits(["close"]);
const emit = defineEmits(["close","rowClickHandle"]);
const list = ref([
{
batchNum: "YXZZP2303001",
@ -35,6 +35,9 @@ const list = ref([
function close() {
emit("close", false);
}
function rowClick(row){
emit("rowClickHandle",row.batchNum)
}
onMounted(()=>{
getInventoryMessage().then(res=>{
console.log(res,'xxxxxxxx');

View File

@ -11,7 +11,7 @@
</div>
<el-table :data="list" style="width: 100%" @row-click="rowClick">
<el-table-column prop="batch" label="批次" width="180" />
<el-table-column prop="conveyType" label="任务类型" />
<el-table-column prop="conveyType" label="任务类型" />
<el-table-column prop="itemDesc" label="货箱类型" />
<el-table-column prop="palletNum" label="托盘号" />
<el-table-column prop="startDate" label="任务开始时间" />
@ -23,7 +23,7 @@
</div>
<el-table :data="list1" style="width: 100%" @row-click="rowClick">
<el-table-column prop="facCode" label="设备代码" width="180" />
<el-table-column prop="errorName" label="故障名称" />
<el-table-column prop="errorName" label="故障名称" />
<el-table-column prop="errorDateTime" label="故障日期" />
<el-table-column prop="reason" label="故障原因" />
<el-table-column prop="reporter" label="记录者" />
@ -98,9 +98,15 @@
</template>
<script setup>
import { onMounted, reactive, ref, toRefs } from "vue";
import {getCarErrorIn12,getOverTransmission} from '@/api/home'
import getPath from "@/utils/getPath";
import { getCarErrorIn12, getOverTransmission } from "@/api/home";
import getPath from "@/utils/getPath";
const emit = defineEmits(["closeMsg"]);
const props = defineProps({
mqttData:{
string:Array,
default:[]
}
})
const list = ref([
// {
// code: "car15",
@ -201,34 +207,36 @@ const list = ref([
// repairPersonnel: "",
// },
]);
const list1 = ref([])
const list1 = ref([]);
function close() {
emit("closeMsg", false);
}
// mqtt
function realInfo(topic, message) {
if (topic == 'faults_now') {
if (topic == "faults_now") {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); //
const msg = JSON.parse(temp); //JSON
list1.value = msg
console.log(msg,'xxxxxxxxxxx');
list1.value = msg;
}
}
onMounted(()=>{
onMounted(() => {
//
// console.log(props);
list1.value = props.mqttData
// getCarErrorIn12().then(res=>{
// list1.value = res.result
// })
// window.PubScribe(null, realInfo);
//
getOverTransmission().then(res=>{
list.value = res.result
})
getOverTransmission().then((res) => {
list.value = res.result;
});
//
window.PubScribe(null, realInfo)
})
});
//
const options = [
{
@ -279,7 +287,7 @@ function closeDialogBox() {
}
.box-content {
height: vh(280);
:deep(.el-table){
:deep(.el-table) {
height: vh(280 - 60 - 16);
}
&-title {
@ -292,9 +300,9 @@ function closeDialogBox() {
background-image: url("@/assets/images/dialog/inoutbound.png");
margin-bottom: vh(16);
span {
font-size: 1.375rem;
font-family: "pangmen";
}
font-size: 1.375rem;
font-family: "pangmen";
}
}
}
.dialog-box {

View File

@ -1,7 +1,7 @@
<template>
<Nav />
<div class="unity">
<iframe src="model/index.html" frameborder="0"></iframe>
<iframe src="model/index.html" id="iframeRef" frameborder="0"></iframe>
</div>
<div class="home">
<div class="home-left">
@ -68,9 +68,11 @@
>
<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(148, 219, 255, 1)"
class="home-left-messageReminder-font"
>{{ activity.reminderMsg }}</span
>
<span style="color: rgba(192, 192, 192, 1)">{{
activity.date
}}</span>
@ -85,10 +87,22 @@
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>
@ -185,11 +199,15 @@
</div>
</div>
<!-- 故障提醒弹窗 -->
<messageDialog v-if="isOpen" @closeMsg="closeMsg" />
<messageDialog v-if="isOpen" :mqttData="mqttList" @closeMsg="closeMsg" />
<!-- 各品牌库存弹窗 -->
<brand v-if="brandShow" @closeBrand="closeBrand" />
<!-- 库存消息弹窗 -->
<inventoryNews v-if="inventoryNewsShow" @close="closeInventoryNews" />
<inventoryNews
@rowClickHandle="unityBoxHandle"
v-if="inventoryNewsShow"
@close="closeInventoryNews"
/>
<!-- 出入库信息弹窗 -->
<inOutBound
v-if="inOutShow"
@ -232,7 +250,33 @@ import {
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([
@ -307,7 +351,7 @@ function darwBrandChart(data) {
// moveOnMouseWheel: true, //
// moveOnMouseMove: false, //
// },
// ],
// ],ontSize
yAxis: [
{
type: "category",
@ -432,7 +476,12 @@ const messageReminder = ref([
]);
//
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, "库存消息");
@ -488,7 +537,7 @@ function drawInventoryNewsEcahrt(result) {
name: "特殊箱子",
value: 0,
};
// for (let i = 0; i < scaleData.length; i++) {
// if (scaleData[i].name === "") {
// box.value = box.value + scaleData[i].value;
@ -849,7 +898,7 @@ async function getMessageReminder() {
// });
// });
await getOverTransmission().then((res) => {
res.result.slice(0, 1).forEach((el) => {
res.result.forEach((el) => {
el.msg = "超时提醒";
el.reminderMsg = el.itemDesc + el.palletNum + " 任务超时";
el.date = el.startDate;
@ -857,10 +906,6 @@ async function getMessageReminder() {
});
});
}
// mqtt
function getMqtt(msg){
console.log(msg,'数据');
}
//
function getInventory() {
getLocInfo().then((res) => {
@ -899,39 +944,41 @@ function formatNumber(num) {
throw new Error("Invalid input"); //
}
}
const mqttList = ref([]);
// mqtt
function realInfo(topic, message) {
if (topic == 'faults_now') {
console.log('接收数据1',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)
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;
messageReminder.value.push(el);
list.push(el);
});
messageReminder.value = list;
mqttList.value = msg;
getMessageReminder(); //
}
}
onMounted(() => {
getDeviceStatus(); //
getBrandData(); //
getInventory(); //
getOutboundWorkOrder(); //
getInboundWorkOrder(); //
window.getMqttData = getMqtt
window.PubScribe(null, realInfo);
// window.getMqttData = getMqtt;
window.PubScribe(null, realInfo)
});
</script>
<style scoped lang="scss">
@ -948,6 +995,33 @@ onMounted(() => {
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%;
@ -1054,7 +1128,7 @@ onMounted(() => {
background: linear-gradient(79deg, #19aefa 0%, #94dbff 100%);
}
}
&-messageReminder::-webkit-scrollbar{
&-messageReminder::-webkit-scrollbar {
display: none;
}
&-messageReminder {
@ -1067,7 +1141,7 @@ onMounted(() => {
display: flex;
justify-content: space-between;
}
&-font{
&-font {
width: vw(130);
}
}

View File

@ -58,7 +58,7 @@
</div>
</template>
<script setup>
import Nav from '@/views/home/components/layout.vue'
import Nav from "@/views/home/components/layout.vue";
import { ref, reactive, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
@ -94,7 +94,7 @@ function submitForm(elForm) {
localStorage.setItem("loginInfo", JSON.stringify({}));
}
login(ruleForm).then((res) => {
if (res.result == '登录成功') {
if (res.result == "登录成功") {
ElMessage({
message: "登录成功",
type: "success",